joplin-notes/joplin notion extension/Web Development/Flutter/Stateless vs Stateful widgets.md

Stateless vs Stateful widgets https://pub.dev/packages

• Stateless widget is similar to pure components and stateful widget is more similar to smart containers in react means Stateless widget is for static widget for no interactivity and stateful contains states too.
• To get more widgets we need to add packages. so go to pub.dev site and find
• To add toast search this package in pub.dev and read through how to install it. Once you add the line in under dependency then use flutter pub get which is similar to npm i in nodejs. To avoid entering package info in pubspec.yaml directly, flutter pub add toast can be used too.

  dependencies:
  	flutter:
  		sdk: flutter
  	toast: ^0.3.0
  

• As toast is interactive widget so it must be under Stateful widget's state.

import 'package:flutter/material.dart';
import 'package:toast/toast.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomeAppState();
}

class _MyHomeAppState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    ToastContext().init(context);
    return Scaffold(
        appBar: AppBar(
          title: Text('Programming Knowledge'),
          backgroundColor: Colors.brown,
          bottom: PreferredSize(
              preferredSize: Size(12, 24), child: Icon(Icons.add)),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text('my name'),
                TextButton(
                    child: Text('Press'),
                    onPressed: () {
                      Toast.show('Toast demo',
                          duration: Toast.lengthLong,
                          gravity: Toast.center,
                          backgroundColor: Colors.cyan,
                          textStyle: TextStyle(color: Colors.black));
                    },
                    style: TextButton.styleFrom(
                        foregroundColor: Colors.brown,
                        backgroundColor: Colors.grey,
                        shape: LinearBorder())),
                Text('Programming')
              ]),
        ));
  }
}

 

Separation of widgets in main.dart, containing root of widget only

import 'package:flutter/material.dart';
import './myhomepage.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MyHomePage());
  }
}

in myhomepage.dart

import 'package:toast/toast.dart';
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomeAppState();
}

class _MyHomeAppState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    ToastContext().init(context);
    return Scaffold(
        appBar: AppBar(
          title: Text('Programming Knowledge'),
          backgroundColor: Colors.brown,
          bottom: PreferredSize(
              preferredSize: Size(12, 24), child: Icon(Icons.add)),
        ),
        body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text('my name'),
                TextButton(
                    child: Text('Press'),
                    onPressed: () {
                      Toast.show('Toast demo',
                          duration: Toast.lengthLong,
                          gravity: Toast.center,
                          backgroundColor: Colors.cyan,
                          textStyle: TextStyle(color: Colors.black));
                    },
                    style: TextButton.styleFrom(
                        foregroundColor: Colors.brown,
                        backgroundColor: Colors.grey,
                        shape: LinearBorder())),
                Text('Programming')
              ]),
        ));
  }
}