Basic Widget

Container

Container widget have child widget to apply style properties on it.

alignment : AlignmentGeometry ->Align the child within the container

container

constraints : BoxConstraints

  • maxHeight: value
  • maxWidth: value
  • minWidth: value
  • minHeight: value

decoration : Decoration ->The decoration to paint behind the child

Implementers for Decoration widget:

  • BoxDecoration
  • FlutterLogoDecoration
  • ShapeDecoration
  • UnderlineTabIndicator

margin : EdgeInsetsGeometry->Empty space to surround container

  • EdgeInsets.all(double value)
  • EdgeInsets.fromLTRB(double left, double top, double right, double bottom)
  • EdgeInsets.fromWindowPadding (WindowPadding padding, double devicePixelRatio)
  • EdgeInsets.only({double left: 0.0, double top: 0.0, double right: 0.0, double bottom: 0.0 })
  • EdgeInsets.symmetric({double vertical: 0.0, double horizontal: 0.0 })

foregroundDecoration : Decoration ->The decoration to paint in front of the child

container

padding : EdgeInsetsGeometry ->Empty space inside of container

transform : Matrix4 More info about transform

Let's create "pages" folder and create "container_widget.dart"

1. main.dart

This is main.dart file

import 'package:flutter/material.dart';
import './pages/container_widget.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(primaryColor: Colors.amber, fontFamily: 'Ubuntu'),
      home: ContainerWidget(),
    );
  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. container_widget.dart

import 'package:flutter/material.dart';

class ContainerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: Container(
        margin: EdgeInsets.only(top: 200.0, left: 40),
        child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30),
            color: Colors.redAccent,
          ),
          foregroundDecoration:
              FlutterLogoDecoration(darkColor: Colors.blueAccent),
          width: 300,
          height: 300,
          child: Center(
            child: Text(
              'Container Widget',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
  • Line 7 code : set background color with blueGrey

  • Line 9 code : set margin with top:200 and left:40

  • Line 11 code : define decoration for container with color and border radius

  • Line 15 code : draw foreground widget on the top of container

  • Line 17 - 18 code : set width and height for that container

  • Remove Line code 9 and add below code "alignment". You will see red container widget that move into bottom right corner.

alignment: Alignment(1.0, 1.0),
1

Row

Row widget displays child with horizontal direction. and it is not scrollable. if we want to make it scrollable then use Lisview. The width of the Row is controlled by the mainAxisSize property.

  • mainAxisAlignment -- How the children should be placed along the main axis(main axis for Row is horizontal, main axis for Column is vertical axis). more info

  • crossAxisAlignment -- How the children should be placed along the cross axis(cross axis for Row is vertical axis, cross axis for column is horizontal axis)

  • mainAxisSize -- How much space should be occupied in the main axis.

  • mainAxisSize.max - then the width of the Row is the max width of the incoming constraints

  • mainAxisSize.min - the width of the Row is the sum of widths of the children

container

1. main.dart

import 'package:flutter/material.dart';
import './pages/row_widget.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(primaryColor: Colors.amber, fontFamily: 'Ubuntu'),
      home: RowWidget(),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. row_widget.dart

import 'package:flutter/material.dart';

class RowWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment(0.0, 0.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              color: Colors.amber,
              height: 100,
              width: 100,
              child: Center(
                child: Text(
                  'container 1',
                ),
              ),
            ),
            Container(
              color: Colors.redAccent,
              height: 100,
              width: 100,
              child: Center(
                child: Text('container 2'),
              ),
            ),
            Container(
              color: Colors.blueGrey,
              height: 100,
              width: 100,
              child: Center(
                child: Text('container 3'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

Column

Column widget displays child with vertical direction. and it is not scrollable and it creates a vertical array of children.

Properties

  • MainAxisAlignment
  • MainAxisSize mainAxisSize
  • CrossAxisAlignment
  • TextDirection
  • VerticalDirection
  • TextBaseline textBaseline

container

1. main.dart

import 'package:flutter/material.dart';
import './pages/column_widget.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(primaryColor: Colors.amber, fontFamily: 'Ubuntu'),
      home: ColumnWidget(),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2. column_widget.dart

import 'package:flutter/material.dart';

class ColumnWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          alignment: Alignment(0.0, 0.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                color: Colors.amber,
                height: 100,
                width: 100,
                child: Center(
                  child: Text('container 1'),
                ),
              ),
              Container(
                color: Colors.redAccent,
                height: 100,
                width: 100,
                child: Center(
                  child: Text('container 2'),
                ),
              ),
              Container(
                color: Colors.blueGrey,
                height: 100,
                width: 100,
                child: Center(
                  child: Text('container 3'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

Image

container

Image widget is displaying image element. If you use Image.asset widget, you need to add asset list on pubspec.yaml file like below code

flutter:
  assets:
    - assets/iphonex.jpg
    - assets/iphonelogo.jpg
1
2
3
4

Several Constructor of Image Widget

Properties

  • width
  • height
  • alignment
  • color
  • fit
  • repeat
  • there are more ...

1.main.dart

import 'package:flutter/material.dart';
import './pages/image_widget.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(fontFamily: 'Ubuntu'),
      home: ImageWidget(),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

2.image_widget.dart

import 'package:flutter/material.dart';

class ImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.all(20),
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 30, bottom: 20),
              child: Text(
                'New Generation of iPhone',
                style: TextStyle(
                    color: Colors.white, fontSize: 27, fontFamily: 'Ubuntu'),
              ),
            ),
            Container(
              child: Image.asset(
                'assets/iphonelogo.jpg',
              ),
            ),
            Container(
              child: Image.asset('assets/iphonex.jpg'),
            ),
            SizedBox(
              height: 20,
            ),
          ],
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  • Line 9 code : ListView is "A scrollable list of widgets arranged linearly" and it expands every element to full width of its container.
  • Line 10 code : add padding around ListView with 20px.
  • Line 13 code : make it alignment as center
  • Line 22 - 24 code : Image.asset widget

Text

container

Text widget is "a string of text with single style" Here is detail info about Text widget

Properties

  • TextStyle (fontSize / fontFamily / color / height)
  • TextAlign (center / left / right / end / justify / start)
  • TextDirection
  • TextOverflow
  • maxLines
  • softWrap
  • there are more

1.main.dart

import 'package:flutter/material.dart';
import './pages/text_widget.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(fontFamily: 'Ubuntu'),
      home: TextWidget(),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.text_widget.dart

import 'package:flutter/material.dart';

class TextWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: ListView(
          padding: EdgeInsets.all(20),
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: 30, bottom: 20),
              child: Text(
                'New Generation of iPhone',
                style: TextStyle(
                    color: Colors.white, fontSize: 27, fontFamily: 'Ubuntu'),
              ),
            ),
            Container(
              child: Image.asset(
                'assets/iphonelogo.jpg',
              ),
            ),
            Container(
              child: Image.asset('assets/iphonex.jpg'),
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              child: Text(
                'Super Retina in two sizes — including the largest display ever on an iPhone. Even faster Face ID. The smartest, most powerful chip in a smartphone. And a breakthrough dual-camera system with Depth Control. iPhone XS is everything you love about iPhone. Taken to the extreme.',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 17,
                    height: 1.5,
                    fontFamily: 'Ubuntu'),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            Container(
              child: Text(
                'Exceptional materials. The most durable glass ever in a smartphone. A beautiful new gold finish, achieved with an atomic-level process. Precision-machined, surgical-grade stainless steel bands. And a new level of water and dust resistance.2',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 17,
                    height: 1.5,
                    fontFamily: 'Ubuntu'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

Icon

flutter already have icon widget that is defined itself. If we want to use 'fontawesome icon' library. Use 'fontawesome' icon package more info

main.dart

import 'package:flutter/material.dart';
import './pages/icon_widget.dart';

void main() => runApp(HomeApp());

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'appTitle',
      theme: ThemeData(fontFamily: 'Ubuntu'),
      home: IconWidget(),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

icon_widget.dart

import 'package:flutter/material.dart';

class IconWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                child: Icon(
                  Icons.menu,
                  size: 50,
                  color: Colors.red,
                ),
              ),
              Container(
                child: Icon(
                  Icons.add,
                  size: 50,
                  color: Colors.red,
                ),
              ),
              Container(
                child: Icon(
                  Icons.memory,
                  size: 50,
                  color: Colors.red,
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39