States - Function setState should be in the callback function which would be responsible to increment the counter defined inside callback function of setState - Instead of using maps of array for loading dynamic widgets we can use for loop too ```dart class _MyHomePageState extends State { int strength = 0; int sugars = 0; @override Widget build(BuildContext context) { void incrementStats(String name) { setState(() { switch (name) { case 'Strength': strength = (strength + 1) % 5; break; case 'Sugars': sugars = (sugars + 1) % 5; break; } }); // end of setState } // end of incrementStatus function body : TextButton( child: Text('$strength - $sugars'), onPressed : ()=>incrementStats('Strength'), ) } } ``` **Control flow** with for loop ```dart for (int i = 0; i < int.parse('${e['amount']}'); i++) Image.asset( '${e['imagePath']}', width: 25, color: Colors.brown[200], colorBlendMode: BlendMode.multiply, ), ``` if statement ```dart if (int.parse('${e['amount']}') == 0) Text('No ${e['string']}'), ```   **Reusable Widgets** in separate file define its class ```dart import 'package:flutter/material.dart'; class StyledBodyText extends StatelessWidget { const StyledBodyText(this.text, {super.key}); final String text; @override Widget build(BuildContext context) { return Text(text, style: TextStyle( color: Colors.brown[900], fontWeight: FontWeight.bold, fontSize: 18, )); } } class StyledButton extends StatelessWidget { const StyledButton({ super.key, required this.onPressed, required this.child, }); final Widget child; final void Function() onPressed; @override Widget build(BuildContext context) { return TextButton( style: TextButton.styleFrom( backgroundColor: Colors.brown[700], foregroundColor: Colors.white, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.all(Radius.circular(5)), ), // roundedRectangleBorder ), onPressed: onPressed, child: child, ); } } ``` in our main file ```dart // for styled text Container( width: double.infinity, padding: const EdgeInsets.all(10), decoration: BoxDecoration(color: Colors.brown[300]), child: const StyledBodyText('How I like my coffee ..'), // 'You have pushed the button this many times:', ), // for styled button StyledButton( // style: TextButton.styleFrom( // backgroundColor: Colors.brown, // foregroundColor: Colors.white, // ), child: Icon(Icons.add), onPressed: () => incrementStats('${e['string']}'), ), ```   **Routes** - https://docs.flutter.dev/cookbook/navigation/named-routes - https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments - Consistent Overlay across multiple routes ```dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatefulWidget { @override _MyAppState createState() => _MyAppState(); } class _MyAppState extends State { bool _showOverlay = false; @override Widget build(BuildContext context) { return MaterialApp( home: Stack( children: [ Navigator( onGenerateRoute: (settings) { // Your routes return MaterialPageRoute( builder: (context) { // Your route/page content return Scaffold( appBar: AppBar(title: Text(settings.name ?? 'Home')), body: Center(child: Text('Page content')), ); }, ); }, ), if (_showOverlay) Positioned.fill( // Overlay widget child: ColoredBox( color: Colors.black.withOpacity(0.5), // Semi-transparent background child: Center( child: ElevatedButton( onPressed: () { setState(() => _showOverlay = false); }, child: Text('Close Overlay'), ), ), ), ), ], ), ); } } ``` onGenerateRoute property usecase for routes '/' and '/video' ```dart class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( onGenerateRoute: (settings) { switch (settings.name) { case '/': return MaterialPageRoute(builder: (context) => HomePage()); case '/video': return MaterialPageRoute(builder: (context) => VideoPage()); default: return MaterialPageRoute( builder: (context) => Scaffold( // Handle unknown routes body: Center(child: Text('404 - Page Not Found')), ), ); } }, ); } } ```