Widgets

Flutter Widgets

Widgets are the building blocks of a Flutter application. Everything in Flutter is a widget!

What is a Widget?

A widget is an immutable description of part of a user interface. Widgets are used to build the UI hierarchy, and they describe what their view should look like given their current configuration and state.

Types of Widgets

StatelessWidget

A StatelessWidget is a widget that does not require mutable state. It describes part of the user interface that depends solely on the configuration information provided to it.

1
2
3
4
5
6

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Hello, World!');
  }
}

StatefulWidget

A StatefulWidget is a widget that has mutable state. It is used when the widget needs to change dynamically based on user interaction or other factors.

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

class MyStatefulWidget extends StatefulWidget {
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text('Counter: $_counter'),
        RaisedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

Common Widgets

Text

The Text widget displays a string of text with a single style.

1

Text('Hello, Flutter!', style: TextStyle(fontSize: 24, color: Colors.blue))

Container

The Container widget combines common painting, positioning, and sizing of child widgets.

1
2
3
4
5
6
7
8
9
10
11
12

Container(
  margin: EdgeInsets.all(16.0),
  padding: EdgeInsets.all(8.0),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8.0),
    boxShadow: [
      BoxShadow(color: Colors.black26, blurRadius: 4.0),
    ],
  ),
  child: Text('Hello, World!'),
)

Row and Column

Row and Column are layout widgets that let you create horizontal and vertical arrays of widgets.

1
2
3
4
5
6
7
8

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
    Icon(Icons.star, color: Colors.yellow),
  ],
)

ListView

ListView is a scrollable list of widgets arranged linearly.

1
2
3
4
5
6
7

ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)

Building with Widgets

Widgets are composed together to create complex UIs. Here’s an example of a simple profile card:

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

class ProfileCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      child: Column(
        children: <Widget>[
          CircleAvatar(
            radius: 40.0,
            backgroundImage: NetworkImage('https://example.com/avatar.png'),
          ),
          Text('John Doe', style: TextStyle(fontSize: 20.0)),
          Text('Flutter Developer'),
        ],
      ),
    );
  }
}

Learn More