Flutter widgets and layouts in minutes
Tags: flutterui, flutter, flutterio, flutterwave
Published: 2023-01-06 17:41:24

---
title: Flutter widgets and layouts in minutes
published: true
date: 2019-01-26 16:37:16 UTC
tags: flutterui,flutter,flutterio,flutterwave
canonical_url: 
---

### Flutter widgets and layouts in minutes - Part I

![](https://cdn-images-1.medium.com/max/1024/1*Ag-3BNY1HGPT-vDW5QZ4UQ.png)

Ever tried of learning fast?. Do you think it’s possible?

Now, Introducing [**FlutterExamples**](https://github.com/TakeoffAndroid/FlutterExamples) **,** the ultimate cheatsheet of curated examples, designs, layouts and widgets.

Github — [https://github.com/TakeoffAndroid/FlutterExamples](https://github.com/TakeoffAndroid/FlutterExamples)

What’s special?

The idea behind creating this repo is to learn flutter UI faster as easy as possible in minutes. Then, how? I know it’s been striking everyone’s head. Let’s see some of the beloved examples to analyse this much.

Trust me! No explanation! No theoritical proofs!

**Container**

![](https://cdn-images-1.medium.com/max/80/1*C69D3vLAnk4kEI4ls9lyxw.png)

```
Container(
 padding: const EdgeInsets.all(0.0),
 color: Colors.cyanAccent,
 width: 80.0,
 height: 80.0,
),
```

**Center**

![](https://cdn-images-1.medium.com/max/191/1*Yd4SEoEasqL31eL0mJaRmQ.png)

```
Center(child: Container(
  padding: const EdgeInsets.all(0.0),
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
))
```

**Align**

![](https://cdn-images-1.medium.com/max/191/1*nrBtLTYdCap-zh3pAxljvw.png)

![](https://cdn-images-1.medium.com/max/191/1*klmOnmKT5ZnwyMUaQ7Z6_A.png)

![](https://cdn-images-1.medium.com/max/191/1*9ryC0jnvDjYcM9dx3Y_ZdA.png)
_Bottom Align (Left, center and right)_

![](https://cdn-images-1.medium.com/max/191/1*V9dZOoXD-1PKu523Vx025A.png)

![](https://cdn-images-1.medium.com/max/191/1*Yd4SEoEasqL31eL0mJaRmQ.png)

![](https://cdn-images-1.medium.com/max/191/1*5eZlhdaWPZRMram-M64GSg.png)
_Center Align (Left, center and right)_

![](https://cdn-images-1.medium.com/max/191/1*3jh0gLb2nzn-kDSD8nH9TA.png)

![](https://cdn-images-1.medium.com/max/191/1*ZzFCof46ohelR6bmz6hOeg.png)

![](https://cdn-images-1.medium.com/max/191/1*nrr5QDi994nXcZEIh2Fw9A.png)
_Top Align (Left, center and right)_

```
Align(
  alignment: Alignment.center, 
  child: Container(
  padding: const EdgeInsets.all(0.0),
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
))
```

**Padding**

![](https://cdn-images-1.medium.com/max/129/1*RNk5swdhhGwVRc_YBDp1TA.png)

```
Padding(
  padding: EdgeInsets.fromLTRB(24, 32, 24, 32) ,
  child: Container(
  padding: const EdgeInsets.all(0.0),
  color: Colors.cyanAccent,
  width: 80.0,
  height: 80.0,
))
```

**SizedBox**

![](https://cdn-images-1.medium.com/max/202/1*HQUJCLPtQhMY6E5nTStvmQ.png)

```
SizedBox(
  width: 200.0,
  height: 100.0,
  child: Card(
    color: Colors.indigoAccent,
    child: Center(
        child: Text('SizedBox',
            style: TextStyle(color: Colors.white)
         )
       )
     )
   )
```

**Expanded**

![](https://cdn-images-1.medium.com/max/245/1*iQSUc-pOO9Rq5UAGiqKawQ.png)
_Row_

![](https://cdn-images-1.medium.com/max/96/1*CpMkykPSA2tUUyQh4sRFYA.png)
_Column_

```
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    Expanded(
      child: Container(color: Colors.cyan, height: 80),
      flex: 2,
    ),
    Expanded(
      child: Container(color: Colors.indigoAccent, height: 80),
      flex: 3,
    ),
    Expanded(
      child: Container(color: Colors.orange, height: 80),
      flex: 4,
    ),
  ],
),
```

**Flat Button**

![](https://cdn-images-1.medium.com/max/584/1*Vl5r7V-dJbHPtrx8AA_oyw.png)

```
FlatButton(
  onPressed: () {
    debugPrint('I am Awesome');
  },
  textColor: Colors.white,
  color: Colors.blueAccent,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.white,
  highlightColor: Colors.orangeAccent,
  child: Text('Flat Button'),
),
```

**Raised Button**

![](https://cdn-images-1.medium.com/max/588/1*FlZQX55tk4-VUgmX40E38Q.png)

```
RaisedButton(
  onPressed: () {
    debugPrint('I am Awesome');
  },
  textColor: Colors.white,
  color: Colors.blueAccent,
  disabledColor: Colors.grey,
  disabledTextColor: Colors.white,
  highlightColor: Colors.orangeAccent,
  elevation: 4.0,
  child: Text('Raised Button'),
),
```

**Icon Button**

![](https://cdn-images-1.medium.com/max/338/1*KgzkMIR6UNxN3H8A5zxsAw.png)

```
IconButton(
  onPressed: () {
    debugPrint("Starred Me!");
  },
  color: Colors.orangeAccent,
  icon: Icon(Icons.star),
  disabledColor: Colors.grey,
  highlightColor: Colors.black38,
),
```

**Floating Action Button**

![](https://cdn-images-1.medium.com/max/68/1*Ohcnv4E7E5lljZPdn41d3Q.png)
_FAB (Default)_

![](https://cdn-images-1.medium.com/max/52/1*ZpYMpT4Ce6U49P_Z48hHkQ.png)
_FAB (Mini)_

```
return Scaffold(
  floatingActionButton: new FloatingActionButton(
    mini: true,
    child: new Icon(Icons.add),
    onPressed: () {},
  ),
);
```

**TextField**

**Under Line Style**

![](https://cdn-images-1.medium.com/max/487/1*AH3EBvfz0cSsFFbTPF5Bbw.png)

```
TextField(
  decoration: InputDecoration(
  hintText: "Enter your name!",
  hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),
  enabledBorder: new UnderlineInputBorder(
      borderSide: new BorderSide(color: Colors.blue)),
  focusedBorder: UnderlineInputBorder(
    borderSide: BorderSide(color: Colors.orange),
  ),
  ),
)
```

**Outer Line Style**

![](https://cdn-images-1.medium.com/max/525/1*idq2BTwmdt7juXw-pyOe6w.png)

```
TextField(
  decoration: InputDecoration(
  hintText: "Enter your name!",
  hintStyle: TextStyle(fontWeight: FontWeight.w300, color: Colors.blue),
  enabledBorder: new OutlineInputBorder(
      borderSide: new BorderSide(color: Colors.blue)),
  focusedBorder: OutlineInputBorder(
    borderSide: BorderSide(color: Colors.orange),
  ),
  ),
)
```

More collection of widgets can be found [**here**](https://github.com/TakeoffAndroid/FlutterExamples)

* * *