Switch between function and design Protoype with _MyFormPageState2

emma/lib/main.dart

@@ -122,7 +122,7 @@ class MyFormPage extends StatefulWidget {
       : super(key: key);
   final String title;
   @override
-  _MyFormPageState createState() => _MyFormPageState();
+  _MyFormPageState2 createState() => _MyFormPageState2();
 }
 
 class _MyFormPageState extends State<MyFormPage> {
@@ -307,6 +307,83 @@ class _MyFormPageState extends State<MyFormPage> {
   }*/
 }
 
+class _MyFormPageState2 extends State<MyFormPage> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  Widget build(BuildContext context) {
+    return Scaffold(
+      //You should use `Scaffold` if you have `TextField` in body.
+      //Otherwise on focus your `TextField` won`t scroll when keyboard popup.
+      body: SafeArea(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: <Widget>[
+            //Header Container
+            Container(
+              padding: const EdgeInsets.all(8.0),
+              height: 96,
+              color: Colors.blue,
+              alignment: Alignment.center,
+              child: Column(
+                children: <Widget>[
+                  SizedBox(
+                    height: 70, //height of button
+                    //width of button
+                    child: IconButton(
+                      icon: Image.asset('images/logo.png'),
+                      onPressed: () {},
+                    ),
+                  ),
+                ],
+              ),
+            ),
+
+            //Body Container
+            Expanded(
+              child: SingleChildScrollView(
+                padding: const EdgeInsets.symmetric(horizontal: 30.0),
+                child: Column(
+                  children: <Widget>[
+                    Container(
+                      color: Colors.red,
+                      height: 200.0,
+                      alignment: Alignment.center,
+                      child: Text("Content 1"),
+                    ),
+                    Container(
+                      color: Colors.green,
+                      height: 300.0,
+                      alignment: Alignment.center,
+                      child: Text("Content 1"),
+                    ),
+                    //TextField nearly at bottom
+                    TextField(
+                      decoration: InputDecoration(hintText: "Enter Text Here"),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+
+            //Footer Container
+            //Here you will get unexpected behaviour when keyboard pops-up.
+            //So its better to use `bottomNavigationBar` to avoid this.
+            Container(
+              padding: const EdgeInsets.all(8.0),
+              color: Colors.blue,
+              alignment: Alignment.center,
+              child: Text("Footer"),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 class TypePage extends StatelessWidget {
   const TypePage({Key? key, required this.title}) : super(key: key);
   final String title;

emma/pubspec.yaml

@@ -30,6 +30,7 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+    
 
 
   # The following adds the Cupertino Icons font to your application.
@@ -64,7 +65,9 @@ flutter:
   # assets:
   #   - images/a_dot_burr.jpeg
   #   - images/a_dot_ham.jpeg
-
+  assets: 
+    - images/
+    - images/logo.png
   # An image asset can refer to one or more resolution-specific "variants", see
   # https://flutter.dev/assets-and-images/#resolution-aware