Flutter State: WithHer App – Step 2

We have been building a weather App. In the first step, the “WithHer” App has used the Geolocator plugin. In addition, we have also used a Stateful Widget.

Why we have used a Stateful Widget? We will realise as we progress.

But before that, we need to understand a few important concepts that revolve around the State class.

Firstly, the State class is an abstract class that defines the logic and internal state for a Stateful Widget.

Secondly, it does not act like a Stateless Widget.

What is the main difference?

During the lifetime of a Stateless Widget, it does not change. On the contrary, it destroys the old instance and creates a new instance.

But in its lifetime, a Stateful Widget may change its information.

Let us consider a Flutter App that has two pages. We can use the “routes” property to mention the path.

import 'package:flutter/material.dart';
import 'first_page.dart';
import 'my_app_home.dart';
import 'second_page.dart';

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      //home: const MyAppHome(title: 'Flutter Demo Home Page'),
      initialRoute: '/',
      routes: {
        '/': (context) => const FirstPage(),
        SecondPage.routeName: (context) => const SecondPage(),
      },
    );
  }
}

Certainly the First page is a Stateless widget which has a Text Button that redirects us to the second page.

import 'package:flutter/material.dart';
import 'package:with_her/view/second_page.dart';

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

  static const routeName = '/first-page';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Page'),
      ),
      body: Center(
        child: Container(
          margin: const EdgeInsets.all(20.0),
          width: 400.0,
          height: 150.0,
          child: TextButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const SecondPage(),
                ),
              );
            },
            child: const Text('Go to Second Page'),
          ),
        ),
      ),
    );
  }
}

On the other hand, the second page is a Stateful Widget with a Text Button that on pressing takes us back to the First page again.

The second page has the following code.

import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget {
  const SecondPage({Key? key}) : super(key: key);

  static const routeName = '/second-page';

  @override
  State<SecondPage> createState() => _SecondPageState();
}

class _SecondPageState extends State<SecondPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print('I am called first, after each State object has been created.');
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
    print('The state object removed from the tree');
  }

  @override
  Widget build(BuildContext context) {
    print('I am called after initState() method.');
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: Center(
        child: Container(
          margin: const EdgeInsets.all(20.0),
          width: 400.0,
          height: 150.0,
          child: TextButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: const Text('Go to Frist Page'),
          ),
        ),
      ),
    );
  }
}

How Flutter State works

As we come to the second page, two methods fire immediately.

In our terminal we have got two outputs.

I am called first, after each State object has been created.
I am called after initState() method.

The first output comes from the initState() method. And the second output comes from the build() method.

However, when we press the back button to go back to the first page, another output comes in.

The state object removed from the tree

This output comes from the deactivate() method.

As a result, we have a clear picture how the life cycle of the Stateful Widget starts and ends.

As we progress with our weather app, we will discuss this topic again. But now we have a basic understanding of how the Stateful widget works.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter