Flutter – Pass Data One Screen To Another Screen

In this article we gonna know how you can pass the data from one screen to another screen in Flutter. In this example we took two screens one and screen two, In the first screen, you enter the data, and that data you can see on your second screen. This is the main object of this application. If we told you about the design of the app then on the first screen we took the stateful widget and in that stateful widget we took the scaffold and in that scaffold, we took the app bar and I took the text field in the body section, and also a Button, If you tap on that button then you go to the second screen. 

In the Second screen, we only take the stateless widget and in that stateless widget I return the scaffold in the scaffold, we just took an app bar, and body in the body we pass the data. On the first screen, you enter the data, and that data you can see on your second screen. A sample video is given below to get an idea about what we are going to do in this article.

Code method is below.

Text(
      '${widget.title}',
      style: TextStyle(fontSize: 54),     
  ),

When you tap on the button then you can go to the second screen code method below.

 ElevatedButton(
             onPressed: () {
               // Step 3 <-- SEE HERE
               Navigator.push(
                 context,
                 MaterialPageRoute(
                   builder: (context) =>
                        // here we give the second screen class name 
                       DetailScreen(title: myController.text), 
                 ),
               );
             },
             child: const Text(
               'Pass Data To Next Screen',
               style: TextStyle(fontSize: 24),
             ),
           ),

Complete Code

Dart

// ignore_for_file: prefer_const_constructors

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Geeks For Geeks Passing Data',
      theme: ThemeData(
        // This is the theme of your application.
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.green,
      ),
      // home: const MyHomePage(title: 'Flutter Demo Home Page'),
      home: PassDataDemo(),
    );
  }
}

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(
        title: Text("Geeks For Geeks"),
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            Container(
              height: 50,
              width: 300,
              margin: EdgeInsets.all(8),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Colors.black, width: 1),
              ),
              child: TextField(
                controller: myController,
                decoration: InputDecoration(
                  labelText: 'Enter The Data',
                  border: InputBorder.none,
                  floatingLabelBehavior: FloatingLabelBehavior.never,
                ),
              ),
            ),
            SizedBox(
              height: 30,
            ),
            // 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(
        title: Text("Screen Two"),
      ),
      body: Center(
        child: Column(
          children: [
            SizedBox(
              height: 50,
            ),
            // Step 4 <-- SEE HERE
            Text(
              '${widget.title}',
              style: TextStyle(fontSize: 54),
            ),

            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("Write New Text"),
            )
          ],
        ),
      ),
    );
  }
}

This is the complete code. Copy the code and paste it on your main screen and run it, You will get the output like my output.

Output: