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)