works

Author: LouiseHsu

add_to_app/ios_content_resizing/ios_content_resizing/ios_content_resizing.xcworkspace/xcuserdata/louisehsu.xcuserdatad/UserInterfaceState.xcuserstate

@@ -2,54 +2,93 @@ import Flutter
 import UIKit
 
 class ViewController: UIViewController {
-  override func viewDidLoad() {
-    super.viewDidLoad()
-
-    showScollView()
-  }
-
-  func showScollView() {
-    let scrollView = UIScrollView()
-    scrollView.isUserInteractionEnabled = true
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        view.backgroundColor = .systemGroupedBackground
+        showStyledScrollView()
+    }
 
-    let stackView = UIStackView()
-    stackView.axis = .vertical
-    stackView.distribution = .fill
-    stackView.backgroundColor = .yellow
-    stackView.translatesAutoresizingMaskIntoConstraints = false
+    func showStyledScrollView() {
+        let scrollView = UIScrollView()
+        let stackView = UIStackView()
+        stackView.axis = .vertical
+        stackView.spacing = 12 // Spacing between the "cards"
 
-    let engine1 = FlutterEngine(name: "one")
-    engine1.run()
+        let engine1 = FlutterEngine(name: "one")
+        engine1.run()
 
-    for index in 1...50 {
-      if (index == 10) {
-        let flutterViewController = FlutterViewController(engine: engine1, nibName: nil, bundle: nil)
-        flutterViewController.isAutoResizable = true
-        addChild(flutterViewController)
-        stackView.addArrangedSubview(flutterViewController.view)
-        flutterViewController.didMove(toParent: self)
+        for index in 1...50 {
+            if index == 10 {
+                // This is our Flutter view
+                let flutterViewController = FlutterViewController(engine: engine1, nibName: nil, bundle: nil)
+                flutterViewController.isAutoResizable = true
+                addChild(flutterViewController)
+                
+                // The Flutter view's background should be clear to see the card behind it
+                flutterViewController.view.backgroundColor = .clear
+                
+                // Wrap the Flutter view in a styled container "card"
+                let cardView = UIView()
+                cardView.backgroundColor = .systemBackground
+                cardView.layer.cornerRadius = 12
+                cardView.layer.masksToBounds = true
+                
+                flutterViewController.view.translatesAutoresizingMaskIntoConstraints = false
+                cardView.addSubview(flutterViewController.view)
+                
+                NSLayoutConstraint.activate([
+                    flutterViewController.view.topAnchor.constraint(equalTo: cardView.topAnchor),
+                    flutterViewController.view.leadingAnchor.constraint(equalTo: cardView.leadingAnchor),
+                    flutterViewController.view.trailingAnchor.constraint(equalTo: cardView.trailingAnchor),
+                    flutterViewController.view.bottomAnchor.constraint(equalTo: cardView.bottomAnchor)
+                ])
+                
+                stackView.addArrangedSubview(cardView)
+                flutterViewController.didMove(toParent: self)
 
-      } else {
-        let label = UILabel()
-        label.text = "Hello from iOS \(index)"
-        stackView.addArrangedSubview(label)
-      }
+            } else {
+                let label = UILabel()
+                label.text = "It's me, iOS \(index)"
+                label.translatesAutoresizingMaskIntoConstraints = false
+                
+                let cardView = UIView()
+                cardView.backgroundColor = .systemBackground
+                cardView.layer.cornerRadius = 12
+                cardView.addSubview(label)
+                
+                NSLayoutConstraint.activate([
+                    label.topAnchor.constraint(equalTo: cardView.topAnchor, constant: 16),
+                    label.bottomAnchor.constraint(equalTo: cardView.bottomAnchor, constant: -16),
+                    label.leadingAnchor.constraint(equalTo: cardView.leadingAnchor, constant: 16),
+                    label.trailingAnchor.constraint(equalTo: cardView.trailingAnchor, constant: -16)
+                ])
+                
+                stackView.addArrangedSubview(cardView)
+            }
+        }
+        
+        // --- Auto Layout Setup ---
+        scrollView.translatesAutoresizingMaskIntoConstraints = false
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        
+        view.addSubview(scrollView)
+        scrollView.addSubview(stackView)
+        
+        // Set constraints for the scroll view to fill the main view
+        NSLayoutConstraint.activate([
+            scrollView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
+            scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
+            scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
+            scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor)
+        ])
+        
+        // Set constraints for the stack view within the scroll view
+        NSLayoutConstraint.activate([
+            stackView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor, constant: 20),
+            stackView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor, constant: -20),
+            // Inset the stack view horizontally for the grouped look
+            stackView.leadingAnchor.constraint(equalTo: scrollView.frameLayoutGuide.leadingAnchor, constant: 20),
+            stackView.trailingAnchor.constraint(equalTo: scrollView.frameLayoutGuide.trailingAnchor, constant: -20)
+        ])
     }
-    scrollView.addSubview(stackView)
-    scrollView.layoutIfNeeded()
-    self.view.addSubview(scrollView)
-
-    scrollView.translatesAutoresizingMaskIntoConstraints = false
-    scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
-    scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true
-    scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
-    scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
-
-    stackView.translatesAutoresizingMaskIntoConstraints = false
-    stackView.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
-    stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
-    stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
-    stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
-    stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
-  }
 }