Mathieu Kerjouan

Posted on Jun 19

Stateless Widgets in Flutters

#flutter #stateless #widget #mobile

Most of the blog posts and articles I've read about Stateless Widgets during the last weeks were mostly listing the differences with the Stateful Widgets. Sadly, I was hoping to have a deep description of stateless widgets and their usage. I mean, managing state is hard, everybody knows that, and if they can avoid having dealing with any kind of state, they will do it. What kind of application can be created without any state? Could a prototype or a demo app can work with any specific state? Let find out.

Definition

A widget that does not require mutable state [...] Stateless widget are useful when the part of the user interface you are describing does not depend on anything other than the configuration information in the object itself and the BuildContext in which the widget is inflated.

-- StatelessWidget class

What does it mean? When an application is running, it needs to keep some state; for example, if your application is requiring credentials, it must be stored somewhere, this is a state. A StatelessWidget does not care about that and can be used to modify the Flutter application tree.

Use Case

I was looking for an use case, without any state... But it seems complicated to do that. At my level of knowledge, I would said StatelessWidget only application could be used to design the style of an application and the flow between the different screens. Then the data can be hardcoded in the code.

But one problem arises: how to switch between Screens? We will need a Navigator object, and this one is based on... StatefulWidget! A complete stateless application looks really hard to create right now. Let start to write the code.

import 'package:flutter/material.dart';

The main() entry-point will start the application using an Init() object, based on the Init class created just after. Why not direcly using the class MyApp instead? We will see that on another post, but having a first Widget before the application can be quite helpful to deal with the application state.

void main() {
  runApp(const Init());
}

The Init class extends a StatelessWidget and returns MyApp() object. Again, nothing complex there. This Init class could have been replaced by the main() entry-point.

class Init extends StatelessWidget {
  const Init({super.key});

  @override
  Widget build(BuildContext context) {
    return MyApp();
  }
}

MyApp class creates a MaterialApp object when it is instantiated. This one will have a default route set to the home parameter and a list of extra-routes defined in routes attribute. The Navigator part will have its own article very soon, but the idea is to easily switch from/to different screens.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MyApp',
      home: Home(),
      routes: {
        "/blog": (BuildContext context) => BlogPage(),
        "/projects": (BuildContext context) => ProjectsPage(),
        "/about": (BuildContext context) => AboutPage()
      }
    );
  }
}

Because all our pages/screens will have the same AppBar, creating a topBar helper function can be helpful. The trick here is to alter the AppBar object returned based on the page displayed. If the current page is a reference to the active page, nothing happens, else, a new screen is opened. This is a really dirty way to deal with routes by the way, but it "works" for a cheap draft application.

AppBar topBar(BuildContext context, String active) {
  return AppBar(
      title: Text("MyApp"),
      leading: IconButton(
          onPressed: () {
            Navigator.of(context).popUntil(ModalRoute.withName('/'));
          },
          icon: Icon(
            Icons.home
          )
      ),
      actions: <Widget>[
        TextButton(
          onPressed: () {
            if (active != "blog") {
              Navigator.of(context).pushNamed("/blog");
            }
          },
          child: Text("blog")
        ),
        TextButton(
          onPressed: () {
            if (active != "projects") {
              Navigator.of(context).pushNamed("/projects");
            }
          },
          child: Text("projects")
        ),
        TextButton(
          onPressed: () {
            if (active != "about") {
              Navigator.of(context).pushNamed("/about");
            }
          },
          child: Text("about")
        ),
      ]
    );
}

The Home class displaying the home page. A list of ListTile is created via the listTiles function defined below.

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: topBar(context, "home"),
      body: listTiles([
        ListTile(
          leading: Icon(
            Icons.favorite
          ),
          title: Text("Title 0"),
          subtitle: Text("Subtitle 0"),
          trailing: Text("Trailing 0")
        ),
        ListTile(
          leading: Icon(
            Icons.access_time_outlined
          ),
          title: Text("Lorem ipsum dolor sit amet"),
          subtitle: Text("Tempus leo eu aenean sed diam urna tempor. Pulvinar vivamus fringilla lacus nec"),
          trailing: Text("himenaeos")
        ),
      ])
    );
  }
}

The listTiles() function is creating a ColoredBox() object, nothing more.

ColoredBox listTiles(List<ListTile> tiles, {Color color = Colors.white}) {
  return ColoredBox(
    color: color,
    child: Material(
      child: Column(
        children: tiles
      )
    ),
  );
}

The BlogPage class definition. Again, nothing really exciting there.

class BlogPage extends StatelessWidget {
  const BlogPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: topBar(context, "blog"),
      body: Container(
        child: Padding(
          padding: .all(16.0),
          child: listTiles([
        ListTile(
          leading: Icon(
            Icons.favorite
          ),
          title: Text("Title 0"),
          subtitle: Text("Subtitle 0"),
          trailing: Text("Trailing 0")
        )])
        )
      )
    );
  }
}

The ProjectsPage class definition, quite similar to the previous one.

class ProjectsPage extends StatelessWidget {
  const ProjectsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: topBar(context, "projects"),
      body: Container(
        child: Text("projects")
      )
    );
  }
}

Finally, the AboutPage class definition, the last one. No surprise, tt looks like the previous.

class AboutPage extends StatelessWidget {
  const AboutPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: topBar(context, "about"),
      body: Container(
        child: Container()
      )
    );
  }
}

No theme, no color, nothing fancy, here. The code is working correctly on dartpad, so, if you want to modify it, you can.

Conclusion

Talking only about StatelessWidget is perhaps not the best thing to do. In fact, using them can be quite limited without state. Maybe I still don't have enough experiences and can see more use cases though... I have even more questions than answers, for example, how to create a new Screen without a Navigator? After a quick research, it seems a Screen is a native interface, specified by the w3c.

Anyway, If you want to know more about StatelessWidget, you can still check those links:

StatelessWidget class from Flutter API documentation;
How to Create Stateless Widgets from Flutter blog;
Understanding Stateless and Stateful Widgets in Flutter. by @shahid6289
To never forget again: Stateless vs. Stateful in Flutter by @feministech
Flutter Stateful and Stateless widgets by @dailydevtips1
Flutter: Difference Between Stateful and Stateless Widget by @iqrafatimame
Best practices for using StatelessWidget in Flutter by colinchflutter on Github;
Stateless Widgets in Flutter on Gist;
Stateless Flutter by eggzotic on Medium;
flutter_create_stateless repository on Github;
Flutter Stateless Widget – Adding interactivity To Your Application by BOSC Lab;
Guide to Flutter Stateless Widget
by Zeeshan Ali on Medium;
Is it Stateful? Is it Stateless? A guide for choosing widget in flutter by Mario Gunawan on Medium;
Stateful and Stateless Widget Flutter Example on Github;
Using widgets wisely (Stateless vs Stateful) in Flutter App Development by Shresthabwes on Medium
Stateless Widget in flutter by App Dev Insights on Medium
Designing Screens & Widgets In Flutter
by @kcl
Stateless widget example on Gist
Flutter demo card using proper stateless widget extraction on Gist.

Nothing to add there, just... Hack well and Have fun!

Cover Image by engin akyurt on Unsplash

Top comments (8)

David Dikman • Jun 24

There are loads of places to use stateless widgets, anything where you need to style anything for example.

If you look at the BloC pattern or Riverpod, these both allow state to work within a Stateless widget by pushing state to a Notifier/Bloc and listening to updates to that state.

The big win here is that you disconnect the state itself from the display logic of it so you can have tests on the logic and tests on the state independently. If the state is disconnected to the lifecycle of the widget, it becomes much easier to inject or update the state from outside for testing.

Another point is that it makes for a better separation of concerns. Say for example that the logic for validating an email changes, you can do that within your state management (controller, notifier or whatever it is) without any change to your widget, and that also becomes testable without having to scaffold and trigger changes on the widget itself.

So the two main reasons we do this is separation of concern (for better maintainability) and secondly testability.

That being said, if you're not using a state system like BloC or Riverpod and relying mostly on setState, which can be completely fine for a small app, your top level screens will likely all be stateful widgets.

Mathieu Kerjouan • Jun 24

There are loads of places to use stateless widgets, anything where you need to style anything for example.

Yes, StatelessWidget can be used in many places, but having an application with StatelessWidget only is kinda useless. An application without states can only be used as design PoC or perhaps prototype, but I don't think we can do more with that.

If you look at the BloC pattern or Riverpod, these both allow state to work within a Stateless widget by pushing state to a Notifier/Bloc and listening to updates to that state.

But there, you are also dealing with an application state. My idea was to use only StalessWidget, without state at all (or the only required amount).

That being said, if you're not using a state system like BloC or Riverpod and relying mostly on setState, which can be completely fine for a small app, your top level screens will likely all be stateful widgets.

Agreed. I started to do the same kind of article but for StatefulWidget, and using setState can become complex in the end. This is also why I will probably do also a publication on InheritedWidget and InheritedNotifier.

Anyway, thanks for your feedback! It's great to have another point of view when learning something like Flutter. :)