initial

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

@@ -0,0 +1,139 @@
+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')
+              ]),
+        ));
+  }
+}
+
+```