Flutter: Essential widgets

Gostaria de ler em português? Leia aqui

Flutter builds layout combining widgets, just like lego blocks. In this article, I'm going to present you a few widgets that can build various screens when combined.

Essential Widgets

Text

Text is a widget used to render text(string) in a screen, it can be constant or dynamic. It can customize style, with properties like font, font weight, handle overflow and wrap, and many others.

Constant Text Example

Text('Hello, World');

Dynamic Text

const greeting = (name) => 'Hello, $name';

Text(greeting('Maria'));

Container

Container is a widget with a single child and has multiple properties, like color that can be used to change background color and decoration that allows us to create borders, which can only be used one at time.

Exemple using color property to change background color:

Container(
    color: Colors.red,
  child: Text('Container'),
);

Example using decoration to define background color:

Container(
        decoration: BoxDecoration(
          color: Colors.red,
        ),
        child: const Text('Container'),
);

SizedBox

SizedBox is a widget that make it possible to create a widget with fixed dimensions, like width, height or both. Has a optional single child.

SizedBox(height: 6);

Padding

Padding is a widget that creates space inside a widget, just like CSS Padding.

Padding(
    padding: EdgeInsets.all(16),
    child: Text('Widget A'),
);

Column

Column is a widget that stacks itens vertically. It's a flex widget, so it will take all available space.

Usage Example:

Column(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Complete Example:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 620,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
          Container(
            height: 150,
            alignment: Alignment.center,
            child: const Text('Widget D'),
          ),
          const Divider(
            height: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

Row

Similar to Column, render itens horizontally.

Row(
  children: [
        Container(color: Colors.red),
        Container(color: Colors.blue),
    ],
);

Complete Example:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 600,
      decoration: BoxDecoration(border: Border.all()),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget A'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget B'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
          Container(
            width: 150,
            alignment: Alignment.center,
            child: const Text('Widget C'),
          ),
          Container(
            width: 1,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

SingleChildScrolView

SingleChildScrollView creates a scrollable widget with single child, useful when child size is dynamic.

Usage Example:

SingleChildScrollView(
    child: Text('long text here')
);

Complete Example:

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 2,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisSize: MainAxisSize.min,
          children: [
            Flexible(
              child: Container(
                color: Colors.blue,
                alignment: Alignment.center,
                child: const Text('Widget A'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.green,
                alignment: Alignment.center,
                child: const Text('Widget B'),
              ),
            ),
            Flexible(
              child: Container(
                color: Colors.yellow,
                alignment: Alignment.center,
                child: const Text('Widget C'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

References

Flutter Documentation