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: