Ask Question Sign In Sign Up

How to send data to next screen in Flutter?

Member

by raul_reichert , in category: Other , a year ago

How to send data to next screen in Flutter?

Facebook Twitter LinkedIn Telegram Whatsapp
data screen flutter send

1 answer

Member

by princess.fritsch , a year ago

@raul_reichert 

In Flutter, you can use the Navigator class to push a new route (screen) onto the navigation stack, and pass data to the route.


Here's an example of how you can use the Navigator to push a new route and pass data to it:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // When the user taps the button, navigate to the next screen and
            // pass some data to it.
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => NextScreen(
                  data: 'Hello World!',
                ),
              ),
            );
          },
          child: Text('Go to next screen'),
        ),
      ),
    );
  }
}

class NextScreen extends StatelessWidget {
  final String data;

  NextScreen({
    Key key,
    @required this.data,
  }) : super(key: key);

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


In this example, when the user taps the button on the HomeScreen, the NextScreen is pushed onto the navigation stack and the string 'Hello World!' is passed to it as an argument. The NextScreen can then use this data to build its UI.


Note that this example uses a StatelessWidget for both the HomeScreen and the NextScreen. If you are using a StatefulWidget and you need to pass data to the next screen, you can do so by using a callback function. For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  String data = 'Hello World!';

  void _navigateToNextScreen() {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => NextScreen(
          data: data,
          onDataChanged: (newData) {
            setState(() {
              data = newData;
            });
          },
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          onPressed: _navigateToNextScreen,
          child: Text('Go to next screen'),
        ),
      ),
    );
  }
}

class NextScreen extends StatefulWidget {
  final String data;
  final ValueChanged<String> onDataChanged;

  NextScreen({


Related Threads:

How to navigate to the next screen in Flutter?
How to send multipart form data in flutter and dart?
How to pass data to the next screen in React Native?
How to navigate to the next screen in React Native?
How to navigate to the next page in Flutter?