joplin-notes/joplin notion extension/Web Development/Flutter/States.md

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

class _MyHomePageState extends State<MyHomePage> {

  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

  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

if (int.parse('${e['amount']}') == 0)
   Text('No ${e['string']}'),

 

Reusable Widgets in separate file define its class

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

// 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

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  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'

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