Pass Data Between Screens in Dart (Android Studio Guide)

Passing data between screens is a crucial part of building interactive Flutter apps. Whether you’re navigating from a home screen to a detail page or sending user input to another part of the app, understanding how to pass data in Dart will enhance your app’s functionality. This guide will walk you through how to pass data between screens in Dart using Android Studio with clean and simple examples.

We’ll use Navigator.push and Navigator.pop for navigation and data transfer.

Step-by-step Example to Pass Data

1. Create the First Screen (MainScreen.dart)

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Main Screen')),
      body: Center(
        child: ElevatedButton(
          child: const Text('Go to Second Screen'),
          onPressed: () async {
            final result = await Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const SecondScreen(data: 'Hello from MainScreen'),
              ),
            );

            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Returned: $result')),
            );
          },
        ),
      ),
    );
  }
}

2. Create the Second Screen (SecondScreen.dart)

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  final String data;

  const SecondScreen({super.key, required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Received: $data'),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context, 'Data from SecondScreen');
              },
              child: const Text('Go Back with Data'),
            ),
          ],
        ),
      ),
    );
  }
}

How to Run in Android Studio

1. Create a new Flutter project.
2. Add both MainScreen.dart and SecondScreen.dart files to lib/.
3. Set MainScreen() as the home widget in main.dart.

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MainScreen(),
    );
  }
}

Recommended External Resource

Learn more from the official Flutter Navigator documentation.

This technique is essential when dealing with forms, detail pages, or interactive flows in Dart. With Flutter and Android Studio, managing navigation and data transfer becomes seamless and clean.