Flutter Widgets

To start the flutter appliation we need to know about few widgets

Flutter framework contains 3 set of widget
Basic Widgets
Material Design
Cupertino Design

See widgets on Flutter Widget Catalog

 

Container

The Container widget is used to contain child widgets whilst
If the container has no children then it will automatically fill the given area on the screen (dependant on constraints), 
otherwise it will wrap the height & width of the given child elements
Container properties are
Color Property:
We can use the color property to apply a background color for the container.
We will use the Color Class or Colors Class
Use the Colors class
Center(
  child: Container(
    color: Colors.green,
  ),
);

We can add shade also
Center(
  child: Container(
    color: Colors.green[400],
  ),
);

use Color Class with a full 8 hexadecimal digits not 6. 
If we only specify six, then the leading two digits are assumed to be zero, which means fully-transparent.

We can use the .fromARGB with the color number or hexadecimal number


Child Property
Provide a child widget to be contained by the container, the container will wrap the width & height of this child

This widget can only have one child. To lay out multiple children, let this widget’s child be a widget such as Row, Column, or Stack, 
which have a children property, and then provide the children to that widget

Center(
  child: Container(
    color: Color.fromARGB(255, 124, 0, 12),
    child: new Text("Flutter Container", textDirection:TextDirection.ltr),
  ),
);


Alignment property
We use an Alignment Class with the alignment property to be applied for aligning the child widgets.
Alignment take 2 parameters x and y

Alignment(0.0, 0.0) represents the center of the rectangle

Alignment will takes positions like
(-1,-1) as top left corner
(-1,1) as top right corner
(0,0) as center 
(1,-1) as bottom left
(1,1) as bottom right 

We can also use FractionalOffset Class with the alignment property
FractionalOffset uses a coordinate system with an origin in the top-left corner of the rectangle whereas Alignment uses a coordinate system with an origin in the center of the rectangle.
FractionalOffset will takes the position like
(0,0) as top left corner
(1,0) as top right corner
(.5,.5) as center 
(0,1) as bottom left
(1,1) as bottom right 

We can also use AlignmentDirectional Class with the alignment property
 

Constrain property
A constraint is just a property specifying the size or space a widget can take up. 
Most of the widgets and UI can be build by using simple BoxConstraint.

A BoxConstraint only cares about minWidth, maxWidth, minHeight and maxHeight
Center(
  child: Container(
    color: Color.fromARGB(255, 66, 165, 245),
    alignment: AlignmentDirectional(0.0, 0.0),
    child: Container(
      color: Colors.green,
      constraints: BoxConstraints(
          maxHeight: 300.0,
          maxWidth: 200.0,
          minWidth: 150.0,
          minHeight: 150.0
      ),
    ),
  ),
);

Margin Property
A margin is just a property specifying to add empty space to surround of the container using an EdgeInsets constant value
With below we can apply different ways of margin for widget.
EdgeInsets.all(20)
EdgeInsets.symmetric( vertical: 20.0,horizontal: 50.0)
EdgeInsets.fromLTRB(1,10,5,10)
EdgeInsets.only(left: 20.0,bottom: 40.0,top: 50.0)

Padding Property
A padding is just a property specifying to add empty space to inscribe inside the container using an EdgeInsets constant value same as the margin
With below we can apply different ways of margin for widget.
EdgeInsets.all(20)
EdgeInsets.symmetric( vertical: 20.0,horizontal: 50.0)
EdgeInsets.fromLTRB(1,10,5,10)
EdgeInsets.only(left: 20.0,bottom: 40.0,top: 50.0)


BoxDecoration

Will set the decoration for the specified widget.

decoration:BoxDecoration(
              border: Border.all(color: Colors.green,width: 5),
              borderRadius:BorderRadius.all(Radius.circular(50))
            ),

 


ShapeDecoration

home: Scaffold(
        body: Center(

          child:Container(

            width: 200,
            height: 200,
            padding:  EdgeInsets.all(10.0),
            margin: EdgeInsets.all(5.0),
            alignment: Alignment.center,

              child: Text("First Flutter Demo Application this is the center widget with child text", textAlign: TextAlign.center,),
            decoration:ShapeDecoration(shape: Border.all(
              width: 1,
              color: Colors.green
            ),color: Colors.yellow,
              shadows: [
                BoxShadow(
                  color: Colors.red,
                  blurRadius: 10.0, // has the effect of softening the shadow
                  spreadRadius: 1.0, // has the effect of extending the shadow
                  offset: Offset(
                    0.05, // horizontal, move right 10
                    0.05, // vertical, move down 10
                  ),
                ),

              ],
            )
          )

        ),

      )
 


Row Widget

It will align the childs in Horizontal direction.
MaterialApp(
       home:Scaffold(
          appBar: AppBar(
            title: Text("Row Widget"),
          ),
          body: Center(
            child: Row(
              
              children: <Widget>[
                Text("Row one",style: TextStyle(
                  color: Colors.green
                ),),
                Text("Row two",style: TextStyle(
                    color: Colors.green
                ),),
                Text("Row two",style: TextStyle(
                    color: Colors.green
                ),),
               
              ],
            ),

          ),

        ),
    );

    To arrange the childs inside Row widget will use the mainAxisAlignment property
    mainAxisAlignment: MainAxisAlignment.center,

    This will arrange the childrens in horizontal center
    
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    This will arrange the childres in equal space arround the each child
    
    mainAxisAlignment: MainAxisAlignment.end
    
     mainAxisAlignment: MainAxisAlignment.spaceBetween
     This will put the child and at edges and give the space inbetween each widget
     
     In the above if i want to align first child in left and remaing two childs at right what should i have to do?
     Will show that in other chapter.
     
 


Column Widget

It will align the childs in Vertical direction.
Scaffold(
          appBar: AppBar(
            title: Text("Column Widget"),
          ),
          body: Column(


            children: <Widget>[
              
              Container(child: Text("Column 1")),

              Text("Column 2"),
              Text("Column 3"),

            ],
          ),
        ),
        
To align the childs inside column widget will use the MainAxisAlignment
 


Image Widget

To display an image will use the Image widget.

We can load images in Image widget by following ways
Image From Assets:

Create a assets folder in project andd add your images in this assets folder.
Now set this assets images in pubspec.yaml file below the flutter:
In the flutter Indentation is very important, we need to add assets with one indentation from the flutter package

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
  - ic_flutter.png
  
  I have added ic_flutter.png image in assets folder and configured that in pubspec.yaml file.
  
  Now i am going to display this image with image widget 
  
  MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Images"),
        ),
        body: Column(children:<Widget>[
          Container(child: Image.asset("assets/ic_flutter.png",width: 200,)),
        
        ]),

      ),
    );

Image from Network
To load the Image from network we will use the Image.network constructor 
MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Images"),
        ),
        body: Column(children:<Widget>[
          Container(child: Image.network("https://media.gettyimages.com/photos/tree-against-white-background-picture-id887508916?s=612x612",width: 200,)),
        
        ]),

      ),
    ); 
     
Load Image from File-
We can load local image from the file by