Flutter Basics: Widgets, Layout, and Lifecycle for Beginners

Flutter is a cross‑platform, high‑performance mobile development framework that uses a widget‑centric architecture. Every UI element, from simple text to complex layouts, is represented as a widget, making the UI description declarative and immutable.

Widgets are the building blocks of Flutter. The Text widget displays strings with rich styling via TextStyle . The Image widget loads pictures from assets, network, files, or memory, and supports various BoxFit scaling options such as fill , contain , cover , etc.

Container combines padding, margin, decoration, and alignment in a single widget. Decoration is usually provided by BoxDecoration , which can set background colors, borders, border radii, and background images via DecorationImage .

Layout in Flutter follows a single‑child ( SingleChildRenderObjectWidget ) and multi‑child ( MultiChildRenderObjectWidget ) model. Common layout widgets include Row , Column (both subclasses of Flex ), Stack for layered positioning, and Flex itself for fine‑grained control of main‑axis and cross‑axis alignment.

Example of a centered Flex layout:

new Flex(
  direction: Axis.horizontal,
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    new Container(width: 40.0, height: 60.0, color: Colors.pink, child: const Text('left')),
    new Container(width: 80.0, height: 60.0, color: Colors.grey, child: const Text('middle')),
    new Container(width: 60.0, height: 60.0, color: Colors.yellow, child: const Text('right')),
  ],
);

Visibility can be controlled by removing a widget, using Offstage , or adjusting opacity with AnimatedOpacity . Each method has trade‑offs in rendering cost and layout impact.

State Management is handled by StatefulWidget and its associated State class, which provides lifecycle callbacks such as initState , didChangeDependencies , build , deactivate , and dispose . The app‑level lifecycle (e.g., resumed , inactive , paused ) can be observed via WidgetsBindingObserver .

The article also addresses common beginner questions: why Flutter uses Dart, why widgets are immutable, the distinction between StatelessWidget and StatefulWidget , and how widgets differ from native views.