Flutter StatelessWidget

A StatelessWidget is a widget that does not require mutable state.

StatelessWidget describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely.

Here's the api definition of StatelessWidget:

abstract class StatelessWidget extends Widget

StatelessWidget is contained in the flutter package.

StatelessWidgets will build the it's constellation of concrete widgets recursively until the description of the user interface is fully concrete (e.g., consists entirely of RenderObjectWidgets, which describe concrete RenderObjects).

You will use Stateless widgets when the part of the user interface you are creating does not depend on anything other than the configuration information in the object itself and the BuildContext in which the widget is inflated.

However if you have compositions that will change dynamically, e.g. due to having an internal clock-driven state, or depending on some system state, then use StatefulWidget.

StatelessWidget has a build() method that will be called only in three situations:

  1. The first time the widget is inserted in the tree.
  2. When the widget's parent changes its configuration.
  3. When an InheritedWidget it depends on changes.

This positively impacts performance.

If a widget's parent will regularly change the widget's configuration, or if it depends on inherited widgets that frequently change, then it is important to optimize the performance of the build method to maintain a fluid rendering performance.

Stateless Widget example

The following is a skeleton of a stateless widget subclass called GreenFrog:

class GreenFrog extends StatelessWidget {
  const GreenFrog({ Key key }) : super(key: key);

  Widget build(BuildContext context) {
    return new Container(color: const Color(0xFF2DBD3A));

Normally widgets have more constructor arguments, each of which corresponds to a final property. The next example shows the more generic widget Frog which can be given a color and a child:

class Frog extends StatelessWidget {
  const Frog({
    Key key,
    this.color: const Color(0xFF2DBD3A),
  }) : super(key: key);

  final Color color;

  final Widget child;

  Widget build(BuildContext context) {
    return new Container(color: color, child: child);

Best regards, Oclemy.

How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section. This feedback helps us gauge our progress.

Help me Grow.

I set myself some growth ambitions I desire to achieve by this year's end regarding this website and my youtube channel. Am halfway. Help me reach them by:


What do You Think

Previous Post Next Post