initial

joplin notion extension/Web Development/Flutter/First app.md

@@ -0,0 +1,75 @@
+First app
+
+- StatelessWidget : base class of all the widget
+- using const with constructor is recommended if it doesnt change often as it will executed during compile time and this improving performance
+```dart
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+        home: Scaffold(
+      body: SelectableText('hello world'),
+    ));
+  }
+}
+
+```
+![04e385c71738cef51c4f0c30e5aa9413.png](../../../_resources/04e385c71738cef51c4f0c30e5aa9413.png)
+ 
+
+**Appbar**
+```
+  Widget build(BuildContext context) {
+    return MaterialApp(
+        home: Scaffold(
+            appBar: AppBar(
+              title: Text('Programming Knowledge'),
+              backgroundColor: Colors.brown,
+              bottom: PreferredSize(
+                  preferredSize: Size(12, 24), child: Icon(Icons.add)),
+            ),
+            body: Center(child: Text("Hello World"))));
+  }
+```
+ 
+
+**Column and Rows**
+- These widgets are similar to flex layout in web development
+- Column widget is same as flex-column means widgets inside it will be arranged vertically
+- to make our widgets center both vertically and horizontally use mainAxisAlignment property of column should be `MainAxisAlignment.center` and if Column widget is taking whole screen then crossAxisAlignment property with `CrossAxisAlignment.center` would work. If column is not taking whole width then in the case wrap whole Column Widget as a value of child property of Center Widget
+- Row widget has similar properties like column with difference is that widgets inside it will be arranged horizontally
+```dart
+Widget build(BuildContext context) {
+    return MaterialApp(
+        home: 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: () => print('Pressed'),
+                        style: TextButton.styleFrom(
+                            foregroundColor: Colors.brown,
+                            backgroundColor: Colors.grey,
+                            shape: LinearBorder())),
+                    Text('Programming')
+                  ]),
+            )));
+  }
+```
+![6ec7276be266fd10cc77057d9dfc76d1.png](../../../_resources/6ec7276be266fd10cc77057d9dfc76d1.png)