Pass Data To Stateful Widget In Flutter

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:

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:

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:

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?