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 learn how to pass data to stateful widget in Flutter.

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

pass data to stateful widget flutter

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:

problem when passing data to stateful widget flutter

Steps to Pass Data to Stateful Widget 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.

Step-by-Step instructions:

Step 1: Create the first page and add the ElevatedButton to open the second page.

Step 2: Create the second page and write a variable that will hold the value coming from the first page.

Step 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).

Step 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.

Step 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:

Pass Data to Stateful Widget in Flutter demo

Conclusion

In this tutorial, we learned how to pass data to stateful widget in Flutter with practical examples. We first saw the problem you may 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.

Would you like to check other interesting Flutter tutorials?