Flutter in Mobile Development: What It Is, Key Concepts, and How It Works

Flutter: Widget, StatelessWidget, and StatefulWidget Basics

Widget — a declarative description of a part of the UI. Everything in Flutter is a Widget: from a button to the app itself. A Widget is configuration (not the UI itself). StatelessWidget — an immutable Widget. build() is called once. Has no state. Used for static content. StatefulWidget — a mutable Widget. Has a State object that can change. setState() — triggers rebuild. State — a mutable object tied to a StatefulWidget. Contains data that can change.

StatelessWidget vs StatefulWidget

StatelessWidget — build() is called once. Suitable for headers, icons, static texts. StatefulWidget — build() is called every time setState() is invoked. Suitable for forms, lists with changes, timers. InheritedWidget — passing data down the tree without explicit constructor passing. Theme, MediaQuery, Navigator — InheritedWidgets. BuildContext — a Widget's position in the tree. context.of<T>, context.watch<T>, context.select<T,R> — access to InheritedWidget.

// Example Flutter Widget: StatefulWidget with setState
class CounterWidget extends StatefulWidget {
  const CounterWidget({Key? key}) : super(key: key);

  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _counter = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter Counter')),
      body: const Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Widget — configuration. StatelessWidget — immutable. StatefulWidget — mutable with setState(). IT Sectr recommends starting with StatelessWidget and switching to StatefulWidget only when you need state.

Trees (Widget Tree, Element Tree, RenderObject Tree)

Flutter uses three trees for efficient rendering. Widget Tree — configuration tree. Widgets are created often (every build), lightweight. Element Tree — element tree. One element per Widget (if the type does not change). Element — bridge between Widget and RenderObject. RenderObject Tree — rendering tree. Handles sizes, positions, painting. RenderObject — heavy, created rarely. Flutter compares the Widget Tree and updates the Element Tree, which triggers the RenderObject Tree update.

Keys and Element Tree

Key — Widget identifier in the Element Tree. ValueKey, ObjectKey, UniqueKey, PageStorageKey. Keys allow Flutter to match old and new Widgets during rebuild. Without Keys, Flutter matches by Widget type and position. GlobalKey — access to State from another Widget. Used for: complex forms, animations, State access in tests. IT Sectr recommends using Keys for lists (List.generate) and avoiding GlobalKey unless necessary.

Expanded — Widget that fills available space in Row/Column/Flex. Flexible — does not force filling (can be smaller). MediaQuery — InheritedWidget with device information: screen size, orientation, platform, text scale factor. Theme/ThemeData — centralized theme. Theme.of(context) — access. MaterialApp — root Widget for routing, themes, locales configuration. Scaffold — basic layout with AppBar, Drawer, BottomNavigationBar. AppBar — top panel.

Navigation (Navigator, Route)

Navigator — route stack (Routes). Navigator.push — open screen (returns Future). Navigator.pop — close (with result). MaterialPageRoute — animated transition (slide from right). Named Routes — string identifiers. onGenerateRoute — centralized handler. Navigator 2.0 (Router + RouteInformationParser + RouterDelegate) — declarative navigation for web, deep linking, and complex scenarios.

Navigator 2.0

Navigator 2.0 — declarative navigation. Router — central Widget. RouteInformationParser — URL parsing. RouterDelegate — stack management. GoRouter (package) — simplified wrapper over Navigator 2.0. Supports: named routes, parameters, redirect, deep linking. IT Sectr recommends GoRouter for most projects and Navigator 2.0 only for complex scenarios (web, desktop).

Async (FutureBuilder, StreamBuilder)

FutureBuilder — Widget that builds UI based on a Future. connectionState: none, waiting, active, done. Used for: HTTP requests, database reads, timers. StreamBuilder — Widget for Stream (infinite data flow). snapshot.data, snapshot.hasError, snapshot.hasData. Used for: WebSocket, Firebase, location updates. Both Widgets rebuild upon receiving new data.

State Management

Provider — simple DI + state management. ChangeNotifierProvider, MultiProvider. Riverpod — modern replacement for Provider: compile-safe, independent of BuildContext. Bloc — Event-Driven architecture: Cubit (simple events) vs Bloc (complex). GetX — lightweight state management + DI + routing. setState — simplest, for local state. IT Sectr recommends Riverpod for new projects and Provider for existing ones.

Themes and Adaptation (MediaQuery, ThemeData)

MediaQuery — screen size, orientation, platform, textScaleFactor. MediaQuery.of(context).size.width. ThemeData — app theme: colors, fonts, shapes. Theme.of(context).textTheme.bodyLarge. Hot Reload — code injection into a running app. Preserves state. Does not support: changing main(), global variables, static fields. Hot Restart — full app restart (state loss). Hot Reload — Flutter's main advantage for developers.

StatelessWidget — for static content. StatefulWidget — for dynamic content. InheritedWidget — for DI. IT Sectr recommends StatelessWidget by default and StatefulWidget only when necessary.

Responsive Layout

LayoutBuilder — adapt to parent dimensions. OrientationBuilder — adapt to orientation. Expanded vs Flexible — space distribution in Row/Column. MediaQuery — breakpoints for tablets and desktops. SafeArea — insets from system elements (notch, status bar). AspectRatio — maintain proportions. IT Sectr recommends LayoutBuilder for adaptive layouts and OrientationBuilder for landscape orientation.

Testing (Widget, Integration, Unit)

Unit tests — testing business logic, repositories, models. dart test — run. Widget tests — testing widgets in isolation. WidgetTester — pumpWidget, tap, enterText. Integration tests — full scenarios on a real device/emulator. Mockito — dependency mocking. Golden tests — screenshot comparison (golden files). IT Sectr recommends Widget tests for each screen and Unit tests for business logic.

void main() {
  testWidgets('Counter increments on tap', (tester) async {
    await tester.pumpWidget(const MaterialApp(home: CounterWidget()));

    expect(find.text('0'), findsOneWidget);

    await tester.tap(find.byType(FloatingActionButton));
    await tester.pump();

    expect(find.text('1'), findsOneWidget);
  });
}

Animations (Implicit, Explicit, Hero)

Implicit animations — AnimatedContainer, AnimatedOpacity, AnimatedPadding, TweenAnimationBuilder. Property changes animate automatically. Explicit animations — AnimationController with Tween. forward() / reverse(). Hero animation — Hero Widget with a tag — transition animation between screens. Staggered animation — animation chain with Interval. Lottie — After Effects animation integration. Rive — interactive animations (state machine). IT Sectr recommends AnimatedContainer for 80% of cases and AnimationController for complex scenarios.

class AnimatedBox extends StatefulWidget {
  @override
  State<AnimatedBox> createState() => _AnimatedBoxState();
}

class _AnimatedBoxState extends State<AnimatedBox> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => setState(() => _expanded = !_expanded),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _expanded ? 200 : 100,
        height: _expanded ? 200 : 100,
        color: _expanded ? Colors.blue : Colors.red,
        child: const Center(child: Text('Tap me')),
      ),
    );
  }
}

Networking (http, dio, graphql)

http — simple HTTP client (get, post, put, delete). dio — advanced client with interceptors, timeouts, retry, logging. graphql_flutter — GraphQL client for Flutter. json_serializable — fromJson/toJson generation via annotations. Retrofit Dart — type-safe HTTP client like Retrofit. WebSocket — via web_socket_channel. Firebase — Cloud Firestore, Realtime Database, Cloud Functions. IT Sectr recommends dio for REST API and graphql_flutter for GraphQL.

Flutter DevTools — tool set: Inspector (widget tree), Timeline (performance), Memory, Network, Logging. Profile mode — profiling without debug. Performance overlay — FPS, build times. Flame chart — flame chart tracing. DevTools — essential tool for optimizing Flutter applications in production.

Flutter Web — compiling Flutter to WASM (WebAssembly). CanvasKit (Skia) vs HTML renderer. CanvasKit — pixel-perfect, but heavier. HTML renderer — lightweight, but with limitations. WASM (Flutter 3.22+) — native performance. Responsive adaptation via LayoutBuilder and MediaQuery. IT Sectr recommends CanvasKit for desktop web applications and HTML renderer for content sites.