Flutter Widgets
Tags: flutter, widget, blog, google
Published: 2022-04-10 11:58:29

> 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**
![Flutter Canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6765uqqi9jfiw2psau3b.jpg)
## 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 *<u>Scaffold</u>* 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,),],),
```
![Column 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ii9pljr9vt0uknkut0bo.jpg)
![Column 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3c6eb5xjmip5aa634h6k.jpg)

**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 <u>_Axis Alignment_</u> 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,),],),
```

![Row 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4v2e2a4io25wmzwpw6gr.jpg)
![Row 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il4vxeq1rw31ejamas41.jpg)

**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**

---