Flutter Widget and Element: Core Concepts and Architecture

Flutter is Google’s next‑generation cross‑platform UI toolkit that uses its own Skia rendering engine, providing high performance and high code reuse across Android, iOS, Web, macOS, Linux, and Windows. Major Chinese companies such as ByteDance, Alibaba, Tencent, JD, NetEase and Meituan have adopted it, and Alibaba even created an Alibabab‑Flutter division that is now a strategic priority.

The most distinctive feature of Flutter is its rendering pipeline: widgets describe configuration, the Flutter engine draws everything on a Canvas via Skia, and the platform only supplies a native Surface . This decouples the UI from the underlying OS and guarantees consistent appearance on all platforms.

Widget fundamentals

In Flutter every UI element starts as an immutable Widget . A widget represents a single frame of UI; when its visual state changes a new widget instance is created. Because widgets are immutable, any mutable state must be stored elsewhere.

Example of a stateless widget with a mutable field that triggers a compiler warning:

Warnning
/// This class is marked as '@immutable'
/// but one or more of its instance fields are not final

class TestWidget extends StatelessWidget {
  final String title;
  int count;
  TestWidget({this.title, this.count});
  @override
  Widget build(BuildContext context) {
    this.count = (count > 99) ? 99 : count;
    return Container(
      child: new Text("$title $count"),
    );
  }
}

To keep mutable data across frames, Flutter provides StatefulWidget and its associated State object. The widget itself remains immutable, while the State holds fields such as count that can change over time.

Example of a proper stateful widget:

class TestWidget extends StatefulWidget {
  final String title;
  TestWidget({this.title});
  @override
  _TestWidgetState createState() => _TestWidgetState();
}

class _TestWidgetState extends State
{
  int count;
  @override
  Widget build(BuildContext context) {
    this.count = (count > 99) ? 99 : count;
    return InkWell(
      onTap: () {
        setState(() {
          count++;
        });
      },
      child: Container(
        child: new Text("${widget.title} $count"),
      ),
    );
  }
}

The State object lives inside an Element . When a widget is first mounted, Flutter creates a corresponding Element (e.g., StatefulElement for a StatefulWidget ) and stores the State inside it. Subsequent rebuilds replace only the widget configuration; the element and its state persist, which is why the UI can update without losing data.

Understanding the relationship between Widget , Element , and State is crucial. A widget is merely a configuration object; an element is the live node in the render tree that holds the state and performs layout and painting. Multiple widgets can share the same element tree, and the same widget can be inflated in many places because it is immutable.

For example, a globally defined Text widget can be used in several screens without creating separate view instances, as the element hierarchy manages the actual rendering.

final textUseAll = new Text(
  "3333333",
  style: new TextStyle(fontSize: 18, color: Colors.red),
);

class MyHomePage extends StatelessWidget {
  void goNext(context) {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) {
      return ShowPage();
    }));
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Container(
          color: Colors.blue,
          height: 80,
          child: Stack(
            children:
[
              Center(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children:
[
                    textUseAll,
                    Text(' GSY ', style: TextStyle(fontSize: 36, fontFamily: "Heiti")),
                    textUseAll,
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { goNext(context); },
        tooltip: 'Next',
        child: Icon(Icons.add),
      ),
    );
  }
}

class ShowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Center(child: textUseAll),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () { /* navigate further */ },
        child: Icon(Icons.add),
      ),
    );
  }
}

Beyond widgets and elements, Flutter’s rendering pipeline also involves RenderObject and Layer objects, which together form the complete Dart‑side rendering loop.

Mastering these concepts—immutable widgets, stateful widgets, elements, and the underlying render objects—provides a solid foundation for building performant, maintainable Flutter applications.

The article concludes by recommending the book “Flutter Development in Practice” for a deeper dive into the framework.