Starter/flutter-examples
1
0
Fork 0
mirror of https://github.com/nisrulz/flutter-examples.git synced 2026-08-24 16:50:47 +00:00
Code Issues Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Nishant Srivastava
2026-08-18 00:24:22 +02:00
parent 2cf50c0b6b
commit e143b4c3a2
10 changed files with 304 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
dropdown_button/lib/example.dart Normal file
View File

@@ -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,
)
],
),
),
),
);
}
}

62
dropdown_button/lib/main.dart
View File

@@ -1,68 +1,20 @@
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
import 'example.dart';
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<StatefulWidget> createState() {
return MyAppState();
}
void main() {
runApp(const MyApp());
}
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!;
});
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
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,
)
],
)),
),
),
title: "DropDown Button Example",
home: const Example(),
);
}
}

21
simple_material_app/lib/example.dart Normal file
View File

@@ -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!"),
),
),
);
}
}

34
simple_material_app/lib/main.dart
View File

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

53
stateful_widget/lib/example.dart Normal file
View File

@@ -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),
),
)
],
),
),
),
);
}
}

55
stateful_widget/lib/main.dart
View File

@@ -1,58 +1,19 @@
import 'package:flutter/material.dart';
import 'example.dart';
void main() {
runApp(MaterialApp(
home: MyButton(),
));
runApp(const MyApp());
}
class MyButton extends StatefulWidget {
const MyButton({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;
});
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: 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),
),
)
],
),
),
),
return MaterialApp(
title: "Stateful Widget",
home: const Example(),
);
}
}

33
using_gradient/lib/example.dart Normal file
View File

@@ -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),
),
),
),
);
}
}

39
using_gradient/lib/main.dart
View File

@@ -1,30 +1,19 @@
import 'package:flutter/material.dart';
import './utils.dart' as utils;
import 'example.dart';
void main() {
runApp(MaterialApp(
// Title
title: "Using Gradient",
// Home
home: Scaffold(
// Appbar
appBar: AppBar(
// Title
title: Text("Using Gradient"),
),
// Body
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),
),
)))));
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "Using Gradient",
home: const Example(),
);
}
}

74
using_tabs/lib/example.dart Normal file
View File

@@ -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()]),
);
}
}

88
using_tabs/lib/main.dart
View File

@@ -1,89 +1,19 @@
import 'package:flutter/material.dart';
import 'package:using_tabs/tabs/first.dart';
import 'package:using_tabs/tabs/second.dart';
import 'package:using_tabs/tabs/third.dart';
import 'example.dart';
void main() {
runApp(MaterialApp(
// Title
title: "Using Tabs",
// Home
home: MyHome()));
runApp(const MyApp());
}
class MyHome extends StatefulWidget {
const MyHome({super.key});
class MyApp extends StatelessWidget {
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(
// Appbar
appBar: AppBar(
// 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()]));
return MaterialApp(
title: "Using Tabs",
home: const Example(),
);
}
}