Flutter: Introduction to widgets

https://docs.flutter.dev/ui

Basic widgets

• Text
• Row, Column
• Stack
• Container

‘Text’

Must be specified with ‘textDirection: TextDirection.ltr,’

import 'package:flutter/material.dart';

void main() {
  runApp(
    const Text(
      'Hello, world!',
      textDirection: TextDirection.ltr,
    ),
  );
}

‘Row, Column’

If ‘Row, Column’ is used, it must be a child element of ‘Directionality’ and ‘textDirection’ must be specified.

import 'package:flutter/material.dart';

void main() {
  runApp(Directionality(
      textDirection: TextDirection.ltr,
      child: Row(
        children: const <Widget>[
          Expanded(
            child: Text('Deliver features faster', textAlign: TextAlign.center),
          ),
          Expanded(
            child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
          ),
          Expanded(
            child: FittedBox(
              child: FlutterLogo(),
            ),
          ),
        ],
      )));
}

‘Stack’

If ‘stack’ is used, it must be a child element of ‘Directionality’ and ‘textDirection’ must be specified.

import 'package:flutter/material.dart';

void main() {
  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: Stack(
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
        Container(
          width: 90,
          height: 90,
          color: Colors.green,
        ),
        Container(
          width: 80,
          height: 80,
          color: Colors.blue,
        ),
      ],
    ),
  ));
}

‘Container’

import 'package:flutter/material.dart';

void main() {
  runApp(Center(
    child: Container(
      margin: const EdgeInsets.all(10.0),
      color: Colors.amber[600],
      width: 48.0,
      height: 48.0,
    ),
  ));
}