Passing data between screens in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Passing data with Navigator.push

What will be displayed on the second screen after navigating from the first screen with the given code?

Flutter

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => SecondScreen(data: 'Hello'),
          ),
        );
      },
      child: Text('Go'),
    );
  }
}

class SecondScreen extends StatelessWidget {
  final String data;
  SecondScreen({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text(data)),
    );
  }
}

A The second screen shows a blank screen

B The app crashes with a runtime error

C The second screen shows a centered text: Hello

D The second screen shows the text: Go

💡 Hint

Check how the data is passed through the constructor and displayed in the Text widget.

The FirstScreen passes the string 'Hello' to SecondScreen via its constructor. SecondScreen displays this string in a centered Text widget.

🧠 Conceptual

intermediate

Understanding Navigator.pop with data

What value will be received in the first screen after popping the second screen with Navigator.pop(context, 42)?

Flutter

class FirstScreen extends StatefulWidget {
  @override
  State<FirstScreen> createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  int? result;

  void _navigate() async {
    final data = await Navigator.push<int>(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
    setState(() {
      result = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(onPressed: _navigate, child: Text('Go')),
        if (result != null) Text('Result: $result'),
      ],
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.pop(context, 42);
      },
      child: Text('Return 42'),
    );
  }
}

A The first screen shows the text: Result: 42

B The first screen shows no text

C The app crashes with a type error

D The first screen shows the text: Result: null

💡 Hint

Navigator.pop can send data back to the previous screen using the second argument.

Navigator.pop(context, 42) sends the integer 42 back to the first screen, which receives it via await and updates the UI.

❓ lifecycle

advanced

State retention when passing data between screens

Given the code below, what will be the value of counter on the first screen after returning from the second screen?

Flutter

class FirstScreen extends StatefulWidget {
  @override
  State<FirstScreen> createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  int counter = 0;

  void _navigate() async {
    final increment = await Navigator.push<int>(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    );
    if (increment != null) {
      setState(() {
        counter += increment;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Counter: $counter'),
        ElevatedButton(onPressed: _navigate, child: Text('Go')),
      ],
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.pop(context, 5);
      },
      child: Text('Add 5'),
    );
  }
}

A The first screen shows: Counter: null

B The first screen shows: Counter: 0

C The app crashes with a runtime error

D The first screen shows: Counter: 5

💡 Hint

The first screen updates its state with the value returned from the second screen.

The second screen returns 5 via Navigator.pop. The first screen adds this to counter and updates the UI.

📝 Syntax

advanced

Correct way to pass multiple data items between screens

Which option correctly passes two strings, name and email, from FirstScreen to SecondScreen?

Flutter

class SecondScreen extends StatelessWidget {
  final String name;
  final String email;
  SecondScreen({required this.name, required this.email});

  @override
  Widget build(BuildContext context) {
    return Text('$name - $email');
  }
}

// In FirstScreen, which code is correct to navigate?

A Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen('Alice', '[e-mail]')));

B Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen(name: 'Alice', email: '[e-mail]')));

C Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen(name: 'Alice')));

D Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen(email: '[e-mail]')));

💡 Hint

Check the constructor parameters and how named arguments are passed in Dart.

SecondScreen requires named parameters name and email. Option B correctly passes both named arguments.

🔧 Debug

expert

Why does data not update after returning from second screen?

Given the code below, why does the first screen not show the updated data after returning from the second screen?

Flutter

class FirstScreen extends StatefulWidget {
  @override
  State<FirstScreen> createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  String data = 'Old';

  void _navigate() {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => SecondScreen()),
    ).then((value) {
      data = value ?? data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text(data),
        ElevatedButton(onPressed: _navigate, child: Text('Go')),
      ],
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.pop(context, 'New');
      },
      child: Text('Return New'),
    );
  }
}

A Because setState is not called after updating data, so UI does not refresh

B Because Navigator.pop does not send data back correctly

C Because the initial value of data is final and cannot be changed

D Because the Text widget cannot display variables

💡 Hint

Remember how Flutter updates the UI when state changes.

The data variable is updated but setState is not called, so Flutter does not rebuild the widget to show the new data.