Passing Data From one Screen to another Screen with Navigator

We’re building a multi-page navigation app using Flutter. It includes:

  1. 3 pages/screens: Navi, Page2, and Page3.
  2. The data flow starts at Navi, passes input to Page2, and from Page2 to Page3.

Source Code​ 

				
					import 'package:flutter/material.dart';
import 'package:ostadapp/class%201.dart';


//page 1
class Navi extends StatelessWidget {
  const Navi({super.key});

  @override
  Widget build(BuildContext context) {
    TextEditingController t1Controller=TextEditingController();

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("This is the NAvigator class",style: TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w700
        ),),
    ),
      body: Column(
        children: [
          TextField(
            controller: t1Controller,
            decoration: InputDecoration(
              hintText: "Input the key of page 2",
              border: OutlineInputBorder(),
            ),

          ),
          ElevatedButton(onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (context)=>Page2(textkey: t1Controller.text,)));
          }, child: Text("Page-2")),

        ],
      ),
    );
  }
}

//page 2
class Page2 extends StatelessWidget {
  final String textkey;
  const Page2({super.key, required this.textkey});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("This is page 2", style: TextStyle(
          fontWeight: FontWeight.w700,
          color: Colors.white,
        ),),

      ),
      body: Column(
        children: [
          TextButton(onPressed: (){
            Navigator.push(context, MaterialPageRoute(builder: (context)=>Page3( key3: textkey,)));
          }, child: Text("Page3")),
          Text(textkey, style: TextStyle (
            fontSize: 30,
            fontWeight: FontWeight.w700
          ),)

        ],
      ),
    );
  }
}

//page 3
class Page3 extends StatelessWidget {
  final String key3;
  const Page3({super.key, required this.key3});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text("This is page 3", style: TextStyle(
          fontWeight: FontWeight.w700,
          color: Colors.white,
        ),),

      ),
      body: Column(
        children: [
Text(key3),
        ],
      ),
    );
  }
}

Ai Code Analizer

✅ Navi (Page 1)

dart
TextEditingController t1Controller = TextEditingController();

  • This is used to capture text input from a TextField.

dart
Navigator.push(context, MaterialPageRoute(builder: (context) => Page2(textkey: t1Controller.text)));

  • Navigates to Page2, passing the value entered in the TextField.

Issue/Note:

  • The TextEditingController is defined inside build(), which means it will be recreated every time build() runs.
    ➤ 🔧 Best practice: Move the controller to a StatefulWidget and dispose it properly.

✅ Page2

dart
final String textkey;

  • Receives a string from Navi.

dart
Navigator.push(context, MaterialPageRoute(builder: (context)=>Page3(key3: textkey)));

  • Navigates to Page3, passing along the same string.

dart
Text(textkey, style: TextStyle(fontSize: 30, fontWeight: FontWeight.w700))

  • Displays the passed text.

✅ No issues here. This is clean and functional.

✅ Page3

dart
final String key3;

  • Receives the data from Page2 and displays it.

dart
Text(key3)

  • Simple output.

✅ Works fine, though adding padding or styling would improve UI.

Share:

More Posts

Send Us A Message