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.
	```yaml
	dependencies:
		flutter:
			sdk: flutter
		toast: ^0.3.0
	```
- As toast is interactive widget so it must be under Stateful widget's state.
```dart
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')
              ]),
        ));
  }
}

```
&nbsp;

Separation of widgets
in `main.dart`, containing root of widget only 
```dart
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`
```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')
              ]),
        ));
  }
}

```