refactor: split app wrapper from focused example code (pilot)

Apply a consistent structure to 5 example apps (simple_material_app,
stateful_widget, dropdown_button, using_gradient, using_tabs):

- lib/main.dart now contains only the app bootstrap: runApp + a const
  MyApp widget wrapping the app in a MaterialApp.
- lib/example.dart holds the full screen (Scaffold, AppBar, and the
  focused code that demonstrates the example feature), marked with a
  '// Example:' banner comment.

This makes it easy to pinpoint the code that teaches each concept while
keeping the wrapping/chrome code uniform and minimal. Review this pilot
before rolling the pattern out to the remaining apps.

dropdown_button/lib/example.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+// Example: the focused code for this app.
+// A DropdownButton that lets the user pick a fruit from a list.
+class Example extends StatefulWidget {
+  const Example({super.key});
+
+  @override
+  State<Example> createState() => _ExampleState();
+}
+
+class _ExampleState extends State<Example> {
+  final List<String> _fruits = [
+    "Apple",
+    "Banana",
+    "Pineapple",
+    "Mango",
+    "Grapes"
+  ];
+
+  late List<DropdownMenuItem<String>> _dropDownMenuItems;
+  late String _selectedFruit;
+
+  @override
+  void initState() {
+    _dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
+    _selectedFruit = _dropDownMenuItems[0].value!;
+    super.initState();
+  }
+
+  List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(
+      List<String> fruits) {
+    List<DropdownMenuItem<String>> items = [];
+    for (String fruit in fruits) {
+      items.add(DropdownMenuItem(value: fruit, child: Text(fruit)));
+    }
+    return items;
+  }
+
+  void changedDropDownItem(String? selectedFruit) {
+    setState(() {
+      _selectedFruit = selectedFruit!;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text("DropDown Button Example"),
+      ),
+      body: Container(
+        child: Center(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              Text("Please choose a fruit: "),
+              DropdownButton<String>(
+                value: _selectedFruit,
+                items: _dropDownMenuItems,
+                onChanged: changedDropDownItem,
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

dropdown_button/lib/main.dart

@@ -1,68 +1,20 @@
 import 'package:flutter/material.dart';
 
-void main() => runApp(MyApp());
+import 'example.dart';
 
-class MyApp extends StatefulWidget {
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
   const MyApp({super.key});
 
-  @override
-  State<StatefulWidget> createState() {
-    return MyAppState();
-  }
-}
-
-class MyAppState extends State<MyApp> {
-  final List<String> _fruits = ["Apple", "Banana", "Pineapple", "Mango", "Grapes"];
-
-  late List<DropdownMenuItem<String>> _dropDownMenuItems;
-  late String _selectedFruit;
-
-  @override
-  void initState() {
-    _dropDownMenuItems = buildAndGetDropDownMenuItems(_fruits);
-    _selectedFruit = _dropDownMenuItems[0].value!;
-    super.initState();
-  }
-
-  List<DropdownMenuItem<String>> buildAndGetDropDownMenuItems(
-      List<String> fruits) {
-    List<DropdownMenuItem<String>> items = [];
-    for (String fruit in fruits) {
-      items.add(DropdownMenuItem(value: fruit, child: Text(fruit)));
-    }
-    return items;
-  }
-
-  void changedDropDownItem(String? selectedFruit) {
-    setState(() {
-      _selectedFruit = selectedFruit!;
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
-      home: Scaffold(
+      title: "DropDown Button Example",
-        appBar: AppBar(
+      home: const Example(),
-          title: Text("DropDown Button Example"),
-        ),
-        body: Container(
-          child: Center(
-              child: Column(
-            crossAxisAlignment: CrossAxisAlignment.center,
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: <Widget>[
-              Text("Please choose a fruit: "),
-              DropdownButton<String>(
-                value: _selectedFruit,
-                items: _dropDownMenuItems,
-                onChanged: changedDropDownItem,
-              )
-            ],
-          )),
-        ),
-      ),
     );
   }
 }

simple_material_app/lib/example.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+// Example: the focused code for this app.
+// Shows a single centered Text widget inside a plain Material app.
+class Example extends StatelessWidget {
+  const Example({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text("Simple Material App"),
+      ),
+      body: Container(
+        child: const Center(
+          child: Text("Hello World!"),
+        ),
+      ),
+    );
+  }
+}

simple_material_app/lib/main.dart

@@ -1,23 +1,19 @@
 import 'package:flutter/material.dart';
 
+import 'example.dart';
+
 void main() {
-  runApp(MaterialApp(
+  runApp(const MyApp());
-      // Title
+}
-      title: "Simple Material App",
+
-      // Home
+class MyApp extends StatelessWidget {
-      home: Scaffold(
+  const MyApp({super.key});
-        // Appbar
+
-        appBar: AppBar(
+  @override
-          // Title
+  Widget build(BuildContext context) {
-          title: Text("Simple Material App"),
+    return MaterialApp(
-        ),
+      title: "Simple Material App",
-        // Body
+      home: const Example(),
-        body: Container(
+    );
-          // Center the content
+  }
-          child: Center(
-            // Add Text
-            child: Text("Hello World!"),
-          ),
-        ),
-      )));
 }

stateful_widget/lib/example.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+
+// Example: the focused code for this app.
+// A StatefulWidget that cycles through a list of strings each time the
+// button is pressed.
+class Example extends StatefulWidget {
+  const Example({super.key});
+
+  @override
+  State<Example> createState() => _ExampleState();
+}
+
+class _ExampleState extends State<Example> {
+  int counter = 0;
+  List<String> strings = ['Flutter', 'is', 'cool', "and", "awesome!"];
+  String displayedString = "Hello World!";
+
+  void onPressOfButton() {
+    setState(() {
+      displayedString = strings[counter];
+      counter = counter < 4 ? counter + 1 : 0;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text("Stateful Widget"),
+        backgroundColor: Colors.green,
+      ),
+      body: Container(
+        child: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              Text(displayedString, style: TextStyle(fontSize: 40.0)),
+              Padding(padding: EdgeInsets.all(10.0)),
+              ElevatedButton(
+                style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
+                onPressed: onPressOfButton,
+                child: Text(
+                  "Press me",
+                  style: TextStyle(color: Colors.white),
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

stateful_widget/lib/main.dart

@@ -1,58 +1,19 @@
 import 'package:flutter/material.dart';
 
+import 'example.dart';
+
 void main() {
-  runApp(MaterialApp(
+  runApp(const MyApp());
-    home: MyButton(),
-  ));
 }
 
-class MyButton extends StatefulWidget {
+class MyApp extends StatelessWidget {
-  const MyButton({super.key});
+  const MyApp({super.key});
-
-  @override
-  MyButtonState createState() {
-    return MyButtonState();
-  }
-}
-
-class MyButtonState extends State<MyButton> {
-  int counter = 0;
-  List<String> strings = ['Flutter', 'is', 'cool', "and", "awesome!"];
-  String displayedString = "Hello World!";
-
-  void onPressOfButton() {
-    setState(() {
-      displayedString = strings[counter];
-      counter = counter < 4 ? counter + 1 : 0;
-    });
-  }
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return MaterialApp(
-      appBar: AppBar(
+      title: "Stateful Widget",
-        title: Text("Stateful Widget"),
+      home: const Example(),
-        backgroundColor: Colors.green,
-      ),
-      body: Container(
-        child: Center(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: <Widget>[
-              Text(displayedString, style: TextStyle(fontSize: 40.0)),
-              Padding(padding: EdgeInsets.all(10.0)),
-              ElevatedButton(
-                style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
-                onPressed: onPressOfButton,
-                child: Text(
-                  "Press me",
-                  style: TextStyle(color: Colors.white),
-                ),
-              )
-            ],
-          ),
-        ),
-      ),
     );
   }
 }

using_gradient/lib/example.dart

@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+
+import 'utils.dart' as utils;
+
+// Example: the focused code for this app.
+// A Container whose background uses a custom LinearGradient.
+class Example extends StatelessWidget {
+  const Example({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text("Using Gradient"),
+      ),
+      body: Container(
+        // Decoration
+        decoration: BoxDecoration(
+          // Add Gradient
+          gradient: utils.getCustomGradient(),
+        ),
+        // Center the content
+        child: const Center(
+          // Add Text
+          child: Text(
+            "Hello World!",
+            style: TextStyle(color: Colors.white),
+          ),
+        ),
+      ),
+    );
+  }
+}

using_gradient/lib/main.dart

@@ -1,30 +1,19 @@
 import 'package:flutter/material.dart';
 
-import './utils.dart' as utils;
+import 'example.dart';
 
 void main() {
-  runApp(MaterialApp(
+  runApp(const MyApp());
-      // Title
+}
-      title: "Using Gradient",
+
-      // Home
+class MyApp extends StatelessWidget {
-      home: Scaffold(
+  const MyApp({super.key});
-          // Appbar
+
-          appBar: AppBar(
+  @override
-            // Title
+  Widget build(BuildContext context) {
-            title: Text("Using Gradient"),
+    return MaterialApp(
-          ),
+      title: "Using Gradient",
-          // Body
+      home: const Example(),
-          body: Container(
+    );
-              // Center the content
+  }
-              decoration: BoxDecoration(
-                  // Add Gradient
-                  gradient: utils.getCustomGradient()),
-              // Center the content
-              child: Center(
-                // Add Text
-                child: Text(
-                  "Hello World!",
-                  style: TextStyle(color: Colors.white),
-                ),
-              )))));
 }

using_tabs/lib/example.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+
+import 'tabs/first.dart';
+import 'tabs/second.dart';
+import 'tabs/third.dart';
+
+// Example: the focused code for this app.
+// A TabController wired to a TabBar (in the AppBar) and a TabBarView
+// showing three tabs.
+class Example extends StatefulWidget {
+  const Example({super.key});
+
+  @override
+  State<Example> createState() => _ExampleState();
+}
+
+// SingleTickerProviderStateMixin is used for animation
+class _ExampleState extends State<Example> with SingleTickerProviderStateMixin {
+  late TabController controller;
+
+  @override
+  void initState() {
+    super.initState();
+    // Initialize the Tab Controller
+    controller = TabController(length: 3, vsync: this);
+  }
+
+  @override
+  void dispose() {
+    // Dispose of the Tab Controller
+    controller.dispose();
+    super.dispose();
+  }
+
+  TabBar getTabBar() {
+    return TabBar(
+      tabs: <Tab>[
+        // set icon to the tab
+        const Tab(icon: Icon(Icons.favorite)),
+        const Tab(icon: Icon(Icons.adb)),
+        const Tab(icon: Icon(Icons.airport_shuttle)),
+      ],
+      // setup the controller
+      controller: controller,
+    );
+  }
+
+  TabBarView getTabBarView(List<Widget> tabs) {
+    return TabBarView(
+      // set the controller
+      controller: controller,
+      // Add tabs as widgets
+      children: tabs,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      // Appbar
+      appBar: AppBar(
+        // Title
+        title: const Text("Using Tabs"),
+        // Set the background color of the App Bar
+        backgroundColor: Colors.blue,
+        // Set the bottom property of the Appbar to include a Tab Bar
+        bottom: getTabBar(),
+      ),
+      // Set the TabBar view as the body of the Scaffold
+      body:
+          getTabBarView(<Widget>[const First(), const Second(), const Third()]),
+    );
+  }
+}

using_tabs/lib/main.dart

@@ -1,89 +1,19 @@
 import 'package:flutter/material.dart';
-import 'package:using_tabs/tabs/first.dart';
+
-import 'package:using_tabs/tabs/second.dart';
+import 'example.dart';
-import 'package:using_tabs/tabs/third.dart';
 
 void main() {
-  runApp(MaterialApp(
+  runApp(const MyApp());
-    // Title
-      title: "Using Tabs",
-      // Home
-      home: MyHome()));
 }
 
-class MyHome extends StatefulWidget {
+class MyApp extends StatelessWidget {
-  const MyHome({super.key});
+  const MyApp({super.key});
 
-  @override
-  MyHomeState createState() => MyHomeState();
-}
-
-// SingleTickerProviderStateMixin is used for animation
-class MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
-  /*
-   *-------------------- Setup Tabs ------------------*
-   */
-  // Create a tab controller
-late TabController controller;
-
-  @override
-  void initState() {
-    super.initState();
-
-    // Initialize the Tab Controller
-    controller = TabController(length: 3, vsync: this);
-  }
-
-  @override
-  void dispose() {
-    // Dispose of the Tab Controller
-    controller.dispose();
-    super.dispose();
-  }
-
-  TabBar getTabBar() {
-    return TabBar(
-      tabs: <Tab>[
-        Tab(
-          // set icon to the tab
-          icon: Icon(Icons.favorite),
-        ),
-        Tab(
-          icon: Icon(Icons.adb),
-        ),
-        Tab(
-          icon: Icon(Icons.airport_shuttle),
-        ),
-      ],
-      // setup the controller
-      controller: controller,
-    );
-  }
-
-  TabBarView getTabBarView(var tabs) {
-    return TabBarView(
-      // Add tabs as widgets
-      children: tabs,
-      // set the controller
-      controller: controller,
-    );
-  }
-
-  /*
-   *-------------------- Setup the page by setting up tabs in the body ------------------*
-   */
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return MaterialApp(
-      // Appbar
+      title: "Using Tabs",
-        appBar: AppBar(
+      home: const Example(),
-          // Title
+    );
-            title: Text("Using Tabs"),
-            // Set the background color of the App Bar
-            backgroundColor: Colors.blue,
-            // Set the bottom property of the Appbar to include a Tab Bar
-            bottom: getTabBar()),
-        // Set the TabBar view as the body of the Scaffold
-        body: getTabBarView(<Widget>[First(), Second(), Third()]));
   }
 }