# Flutter day 1
## runApp
The minimal Flutter app simply calls the runApp() function with a widget:

void main() {
  runApp(const MyWidget());
}

The runApp() function takes the given Widget and makes it the root of the widget tree

## Widget
A widget is either stateful or stateless. If a widget can change—when a user interacts with it, for example—it’s stateful.

A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.

A stateful widget is dynamic: for example, it can change its appearance in response to events triggered by user interactions or when it receives data. Checkbox, Radio, Slider, InkWell, Form, and TextField are examples of stateful widgets. Stateful widgets subclass StatefulWidget.

A widget’s state is stored in a State object, separating the widget’s state from its appearance. The state consists of values that can change, like a slider’s current value or whether a checkbox is checked. When the widget’s state changes, the state object calls setState(), telling the framework to redraw the widget.

class ParentWidget extends StatelessWidget {
  const ParentWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChildWidget();
  }
}

## Material App
MaterialApp Widget is the starting point of your app, it tells Flutter that you are going to use Material components and follow the material design in your app.

MaterialApp is a widget that introduces a number of widgets Navigator, Theme that are required to build a material design app.

MaterialApp(
  title: appName,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],

    // Define the default font family.
    fontFamily: 'Georgia',

    // Define the default `TextTheme`. Use this to specify the default
    // text styling for headlines, titles, bodies of text, and more.
    textTheme: const TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: const MyHomePage(
    title: appName,
  ),
);

## Scaffold
The Scaffold is a widget in Flutter used to implements the basic material design visual layout structure. It is quick enough to create a general-purpose mobile application and contains almost everything we need to create a functional and responsive Flutter apps. This widget is able to occupy the whole device screen. In other words, we can say that it is mainly responsible for creating a base to the app screen on which the child widgets hold on and render on the screen.

Widget build(BuildContext context) {   
return Scaffold(   
    appBar: AppBar(   
        title: Text('First Flutter Application'),   
    ),   
    body: Center(   
        child: Text("Welcome to UniCOding Bootcamp"),   
    ),  
} 

## Container
Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A basic container element that stores a widget has a margin, which separates the present container from other contents. The total container can be given a border of different shapes, for example, rounded rectangles, etc. A container surrounds its child with padding and then applies additional constraints to the padded extent.


Container(
    //set the height of the container
    height: 200,
    
    //set the width of the container
    width: 300,
    
    //set the color of the container
    color: Colors.red,
    
    //align the child positon
    alignment: Alignment.center,
    
    //space between the container and the child widget
    padding: EdgeInsets.all(5),
    
    //space between the container and the parent widget
    margin: EdgeInsets.only(right: 10),
    
    //decoration
    decoration: BoxDecoration(),
    
    //child widget
    child: ChildWidget(),
),

## Row & Column
A widget that displays its children in a horizontal array (Row) or vertical array (Column).
The first screenshot below shows 3 icons with a label under each one:


Here’s a diagram of the widget tree for this UI:


Here is a more complex use of Row and Column:


### syntax
Row:

Row( 
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

Column:

Column( 
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

 

## Alignment
We can set the alignment of the Row or Column using the mainAxisAlignment and the crossAxisAlignment.

 

### mainAxisALignment
example:

Row /*or Column*/( 
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),

 

**Check the other alinments options:**

mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,

### crossAxisALignment
example:

Row /*or Column*/( 
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 200),
    Icon(Icons.star, size: 50),
  ],
),

 

**Check the other alinments options:**

crosAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.baseline,
crossAxisAlignment: CrossAxisAlignment.streatch,