3 min read

While developing your Flutter app, you may need to pass data from one screen to another. For example, when the user clicks on the Todo list, you may want to display the details of the Todo item on another screen. To display the Todo details on another screen, you must have either actual data or a reference of an item on that screen to fetch further details. So in this tutorial, we’ll see 3 easy steps for Pass Parameter to StatefulWidget in Flutter.

Here’s what we’ll try to implement with easy steps:

Here’s what we’ll cover:

The Problem

When you pass data from one screen to another (which is a Statefulwidget), the problem is that you cannot access the variable directly. That means if you have a title parameter and the value is being passed from the previous page, you cannot simply write the title and display the value on the second screen. If you try to do so, you’ll get an ‘Undefined name’ error.

Here’s how it looks:

Steps to Pass Parameter to StatefulWidget in Flutter

To pass data to stateful widget, first of all, create two pages. Now from the first page open the second page and pass the data. Inside the second page, access the variable using the widget. For example widget.title.

To pass data to Stateful Widget in Flutter:

  1. Create the first page and add the ElevatedButton to open the second page.
  2. Create the second page and write a variable that will hold the value coming from the first page.
  3. Come to the first page, inside the onPressed method of ElevatedButton, add a code to open the second page and pass the value in parameter name (defined in the second page).
  4. Come to the second page, inside the build method, access the variable using the widget. For example widget.title, widget.name, widget.age, etc.
  5. Restart the app.

Full Code Example: 

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

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

  @override
  State<PassDataDemo> createState() => _PassDataDemoState();
}

class _PassDataDemoState extends State<PassDataDemo> {
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        children: [
          SizedBox(
            height: 50,
          ),
          TextField(
            controller: myController,
            decoration: InputDecoration(labelText: 'Enter Fruit Name'),
          ),
          // Step 1 <-- SEE HERE
          ElevatedButton(
            onPressed: () {
              // Step 3 <-- SEE HERE
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(title: myController.text),
                ),
              );
            },
            child: const Text(
              'Pass Data To Next Screen',
              style: TextStyle(fontSize: 24),
            ),
          ),
        ],
      ),
    );
  }
}

class DetailScreen extends StatefulWidget {
  // In the constructor, require a Todo.
  const DetailScreen({Key? key, required this.title}) : super(key: key);

  // Step 2 <-- SEE HERE
  final String title;

  @override
  State<DetailScreen> createState() => _DetailScreenState();
}

class _DetailScreenState extends State<DetailScreen> {
  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            // Step 4 <-- SEE HERE
            Text(
              '${widget.title}',
              style: TextStyle(fontSize: 54),
            ),
          ],
        ),
      ),
    );
  }
}

Output:

Conclusion

In this tutorial, we learned how to Pass Parameter to StatefulWidget in Flutter with practical examples. We first saw the problem you might face while trying to access the variable without using the widget. and then finally went through the steps to successfully pass and access data inside the stateful widget.

FAQs

How to access variable “x” in state class from stateful class in flutter?

In Flutter, you can access variables defined in the State class from the Stateful widget by using the widget keyword. For example, if you define a variable x in the State class, you can access it in the Stateful widget by using widget.x. This works because the Stateful widget and the State class are connected by a parent-child relationship, and the widget is the parent of the state. Therefore, you can access the widget’s properties from the state using the widget keyword.

Would you like to check other interesting Flutter tutorials?

Flutter Change/Lock Device Orientation to Portrait/Landscape Only
2 Easiest Ways to Show Toast in Flutter (2023 Code + Gifs)