Flutter Widgets

There is nothing more then Widgets in Flutter.

Widgets Comes with Attribute and Widgets have Some Properties built-in.
appbar: AppBar()
home: Scaffold ()
body: Column()
children: []

How can these Widgets Wrote:

runApp: MyApp(MaterialApp(
home: Scaffold (
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("This is My Demo Flutter Application made for Blog 💙❤️")]),
appbar: AppBar(
drawer: Drawer(
child: UserAccountDrawerHeader (
accountName: "Muhammad Rameez"
accountMail: "muhammadrmz871@gmail.com"
picture: Image(image: Circular Avatar ("https://images.app.goo.gl/HakjTuLRRQRnGZAY7"),
     ),),),),),),),

Don't Worry I am going to Explain All the Possible Widgets for you

Visual Representation of App Code

Main Widgets:

The Flutter Application code starts from “ void main '’ then comes our Application Widget name with it’s attribute (runApp) like :
void main (runApp: MyApp());
Material App Widget :

• This is the parent widget of Flutter UI Widget. This is like the canvas of Flutter Drawing
• Material App have an attribute of home that extend the Scaffold Widget.
• MaterialApp also have property called theme extend Themedata.

MaterialApp (
theme: Theme.dark()) //for Dark Theme

Use Theme.dark.tocopy(
scaffoldcolor : Colors.Blue)for changing the default values of dark theme

// For Custom Color Theme of App
theme: Theme(
primaryswatch : Colors.blue,
assent: Colors.Red,
scaffoldcolor: Colors.white,
text color: ThemeData(
body1: Colors.Pink,
),)

Scaffold Widget :

• Scaffold Widget mainly have four components : appbar, body, child, bottomNavigationbar.
• We can also add drawer : Drawer() in our Appbar and then Design it accordingly.
• Similarly we can add Bottom Navigation Bar and include there assets in BNB. In Flutter we need to include the dependency in our pubspec.yml file to use it in the application.

There are Two type of Widgets that we use in Flutter as a parent widget

• Stateful Widget
• Stateless Widget

What do you meant by Parent widget?
Example :

Column(
 child: Text("I am a child of Column"),)

Stateful Widget:

• Stateful Widget is used when we need an updation on our screen.
• Any Graphics, number or image can be updated into the parent screen by using a parent widget “ Stateful Widget ". But We need to add setState function which is a child of Stateful Widget which the text, image, or color that we want to update.
• Shortcut of Stateful Widget is 'stfull — Tab'.

setState:

setState basically update the screen and can be used only with Stateful Widget.

Stateless Widget:

• Stateless Widget is used when there isn’t any need of screen updation in an application. When the app screen is static then we use stateless Widget.
• The shortcut of stateless Widget is 'stless — Tab'

Some Most Commonly Used Widgets :

Column widget :

• As, the name tell it’s bio, Column widget is used to add widgets in an app Vertically. Column widget is used to add widgets as children as many as we can.
• Column widget carry an attribute of child : Column() but it have children property we means we can add widget in Column through children property without using the attribute of child in children

child: Column(
children: [ 
Text (“ This is Muhammad Rameez '’),
Container(
height : 60, width: 120, color: Colors.teal,),],),

Row Widget :

• Row widget is similar to column widget the only difference is, we can add Widgets in Row widget horizontally. It have the same property of children[].
• Both Row and Column have two external properties which is used to align the elements in a Row/Column. One is CrossAxisAlignment and other is MainAxisAlignment.
• Cross Axis Alignment basically handle horizontal alignment s and Main Axis Alignment handle vertical alignments.

child: Row(
children: [ 
Text (“ This is Muhammad Rameez '’),
Container(
height : 60, width: 120, color: Colors.teal,),],),

Text widget :

• Text widget is most commonly used widget in Flutter. Text widget is used to enter the “Text” in a App Canvas. The styling of Text can be done by using TextStyle() widget

• TextStyle have some properties like fontSize, color, fontWeight.
  

title: Text('This is Muhammad Rameez', 
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.Red,
)),

Container Widget:

• Container Widget is used to make custom elements like buttons, headers, footers. Container have margin and padding property

• Margin property is used to add margin or gap between two widgets. It is used with margin attribute but EdgetInsect property like margin: EdgeInsect.only (top: 15, left : 5 )

• Similar the case with Padding property but padding add gap inside in widget hence widget get shrink. Padding is used as padding: EdgeInsect.only (top: 15, left : 5 )

• It also have box decoration property which have number of child properties like radius, shape, color, blurradius, offset, gradiant.
  

Container(
height : 60, width: 130,
decoration: BoxDecoration(
  color: Colors.yellow,
  gradient: LinearGradient(
  colors:[
  Colors.Blue,
  Colors.Purple,
  Colors.teal,],),
begin: topLeft[5,5]
end: bottomRight[5,5]))

Appbar widget :

• Appbar widget is used to add the title bar of your application. It’s attribute Is appbar. We can also add drawer in appbar.

• drawer extends Drawer. It have UserAccountDrawerHeader which have some properties like account name, account email, account picture, other pictures. We can also change the color of Drawer by using color property.

Custom Widget :

• We can also made our own custom widgets and can be used throughout the application. All we need to now about constructor and overriding phenomenon.

• This widget is very helpful for making complex application and tends towards less time consumption. Reusability is the advantage of Custom Widgets.

ListView widget :

• ListView widget is used to create a list of items. ListView have a function called builder which is used to build the list again and again till the count that we have set.

Expanded widget:

• Expanded widget takes all the possible available space between to widget of Row vise or in Column vise. This is very important widget for Flutter User interface design.

child: Column(
children[
Expanded (
Container (),)
Text('Bottom of Page'),

Card widget :

• As, the name guess, Card is used to make an item card of information that we want to pack all necessary information about the product together.

Center Widget:

• Center Widget is used to center the Widgets into the Screen or Flutter Canvas. When we add a widget in between Center Widget then such widget goes center itself.

child: Center(
title: Text('Heading of AppBar'),

SizedBox :

• SizedBox widget is used to add margin or gap in row vise or Column vise between two widgets.

• For Row we add width and for Column we add height
  

Column(
children [
SizedBox(
  height: 5,),
Container (),
],)

FlateButton
InkWell
GestureDetector

To be Continue