Flutter Explained: One Codebase, Every Screen

Introduction

Flutter is Google's framework for building apps from a single codebase: write once in Dart, and ship to iOS, Android, web, Windows, macOS, and Linux. It powers apps from Google Pay to the New York Times crossword app. Its core idea is simple and radical: everything on screen is a widget, and the interface is rebuilt from data whenever that data changes.

Everything is a widget

In Flutter, there are no separate concepts for layout, styling, and controls — everything is a widget, nested inside other widgets like HTML elements, but in code:

import 'package:flutter/material.dart';
class Greeting extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hello, Sara!',
        style: TextStyle(fontSize: 24, color: Colors.teal),
      ),
    );
  }
}

Center positions its child, Text displays words, TextStyle styles them — each a widget, composed by nesting. Layout widgets (like Row, Column, and Padding) do the arranging, so there is no separate layout language to learn: it is all Dart.

State: the widget that changes

Widgets come in two kinds. Stateless widgets never change after creation, like the greeting above. Stateful widgets hold data that changes — a counter, a form field, a toggle — and rebuild themselves when it does:

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}
class _CounterState extends State<Counter> {
  int count = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $count'),
        ElevatedButton(
          onPressed: () => setState(() => count++),
          child: Text('Increase'),
        ),
      ],
    );
  }
}

setState is the key call: it says "this data changed, rebuild me". Flutter then rebuilds just the affected widgets — the same reactivity idea as React, Vue, and SwiftUI, expressed in one method call.

Hot reload: the developer superpower

Flutter's most loved feature is hot reload: change your code, and the running app updates in under a second, keeping its current state. Tweak a colour, fix a layout, adjust text — without restarting the app or losing your place in it. It turns interface development from a compile-wait-check cycle into something that feels almost live, and it is the single biggest reason developers who try Flutter tend to stay.

Takeaway

Everything is a widget, state changes rebuild the interface through setState, and hot reload makes development feel live. One codebase, every screen — and Dart, from the previous post, is the language underneath it all.

Originally published at https://practicaldevblog.blogspot.com/2026/10/flutter-explained-one-codebase-every.html

Comments

[Jyanthi]

Flutter’s widget-based approach makes UI development feel so much more organized, and hot reload is definitely a game-changer for productivity! 🚀 The ability to maintain one codebase across multiple platforms is a huge advantage, especially for teams trying to build faster without compromising the user experience. Great explanation! 👏