flutter passing array data from one screen to another in flutter using route

Question

please i am trying to pass to array data from one screen to another via route. bellow is my code. Thank you all.

class BallGamesWidget extends StatefulWidget {
  @override
  BallGamesWidgetState createState() => new BallGamesWidgetState();
}

class BallGamesWidgetState extends State {
  Map<String, bool> List = {
    'Bubble Football ⚽': false,
    'Futsal ': false,
    'Beach Volleyball ': false,
    'Volleyball ': false,
    'Dodgeball ': false,
    'Rugby ': false,
    'American Footbal ': false,
    'Korftbal ': false,
    'Netbal ⚾': false,
  };

  var holder_1 = [];

  getItems() {
    List.forEach((key, value) {
      if (value == true) {
        holder_1.add(key);
      }
    });

from my scrren one. i mapped through the List and stored the true value to holder_1

 AppLargeButton(
          text: "Next",
          textColor: Colors.white,
          backgroundColor: Colors.black,
          onTap: () {
            // getItems();
            Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => BallGamesSelectedItems(holder_1),
          ),
        );
          }),

then from the button, i am trying to use Navigator.push to push the holder_1 to my second scrren 'BallGamesSelectedItems()'

firstly, i dont know if i am right with usage of the Naviagtion.push and secondly, i dont know how to retrieve it back in my second screen. thanks

score 2 · Accepted Answer · answered Dec 08 '21 at 10:24

this works for me

from my first page, i called the Navigator.push inside the getItems()

getItems() {
    List.forEach((key, value) {
      if (value == true) {
        holder_1.add(key);
      }
    });

    // Printing all selected items on Terminal screen.
    print(holder_1);

    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => GamesSelectedItems(),
        settings: RouteSettings(
          arguments: holder_1,
        ),
      ),
    );
    // Clear array after use.
    // holder_1.clear();
  }

then in my GamesSelectedItems() Screen,

@override
 Widget build(BuildContext context) {

   final List holder_1_data = ModalRoute.of(context)!.settings.arguments as List;

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[for (var item in holder_1_data) 
        Text(item)],
    ),

Jahidul Islam · Answer 2 · 2021-12-07T13:34:45.970

1

On your screen page, you declare and pass with the constructor

class BallGamesSelectedItems {
 final List holder_1;
 BallGamesSelectedItems(this.holder_1)
}

And if you used stateful then can call it on your screen widget.holder_1

class BallGamesWidget extends StatefulWidget {
  @override
  BallGamesWidgetState createState() => new BallGamesWidgetState();
}

class BallGamesWidgetState extends State {
  Map<String, bool> list = {
    'Bubble Football ⚽': false,
    'Futsal ': false,
    'Beach Volleyball ': false,
    'Volleyball ': false,
    'Dodgeball ': false,
    'Rugby ': false,
    'American Footbal ': false,
    'Korftbal ': false,
    'Netbal ⚾': false,
  };


  getItems() {
    list.forEach((key, value) {
      if (value == true) {
        widget.holder_1.add(key);
      }
    });

edited Dec 07 '21 at 13:34

answered Dec 07 '21 at 08:32

Jahidul Islam

11,435
3
17
38

thanks man. i tried that but it retrun null. thanks – Yusuf Dec 07 '21 at 12:04
can you share `BallGamesSelectedItems ` code – Jahidul Islam Dec 07 '21 at 12:47
thank you, i have added it – Yusuf Dec 07 '21 at 13:08
class BallGamesSelectedItems extends StatefulWidget { final List? holder_1; BallGamesSelectedItems({this.holder_1, Key? key}) : super(key: key); override _BallGamesSelectedItemsState createState() => _BallGamesSelectedItemsState(); } class _BallGamesSelectedItemsState extends State { override Widget build(BuildContext context) { double h = MediaQuery.of(context).size.height; return Scaffold( body: Column( Text( widget.holder_1.toString(), ), – Yusuf Dec 07 '21 at 13:24
Does it work or you get the issue – Jahidul Islam Dec 07 '21 at 13:32
in your `BallGamesSelectedItems`, remove `var holder_1 = [];` and reform your `List` to `list` – Jahidul Islam Dec 07 '21 at 13:33
i dont have var holder_1 = [ ] in BallGamesSelectedItems and changing List to list returns this error message 'Undefined class 'list'.' – Yusuf Dec 07 '21 at 13:43

Tejaswini Dev · Answer 3 · 2021-12-07T13:33:55.290

Please refer to below code


class BallGamesWidget extends StatefulWidget {
  

  BallGamesWidget({Key key}) : super(key: key);

  @override
  BallGamesWidgetState createState() => new BallGamesWidgetState();
}

 // Change this
class BallGamesWidgetState extends State<BallGamesWidget>  {
  Map<String, bool> List = {
    'Bubble Football ⚽': false,
    'Futsal ': false,
    'Beach Volleyball ': false,
    'Volleyball ': false,
    'Dodgeball ': false,
    'Rugby ': false,
    'American Footbal ': false,
    'Korftbal ': false,
    'Netbal ⚾': false,
  };

  var holder_1 = [];

  getItems() {
    List.forEach((key, value) {
      if (value == true) {
        
        holder_1.add(key);
      }
    });
  }

 
}

Please refer to below example code for passing arguments

class FirstScreen extends StatefulWidget {
  const FirstScreen({Key key}) : super(key: key);

  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: InkWell(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => SecondScreen(
                  dataList: ["Data"],
                ),
              ),
            );
          },
          child: Text(
            "Second Screen",
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatefulWidget {
  final List dataList;
  const SecondScreen({Key key, this.dataList}) : super(key: key);

  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text(
          widget.dataList[0].toString(),
        ),
      ),
    );
  }
}

the BallGamesSelectedItem screen


class BallGamesSelectedItems extends StatefulWidget {
  final List? holder_1;

  BallGamesSelectedItems({this.holder_1, Key? key}) : super(key: key);

  @override
  _BallGamesSelectedItemsState createState() => _BallGamesSelectedItemsState();
}

class _BallGamesSelectedItemsState extends State<BallGamesSelectedItems> {
  @override
  // var holder_1;

  Widget build(BuildContext context) {
 
   // final data = ModalRoute.of(context)!.settings;

    double h = MediaQuery.of(context).size.height;
    double w = MediaQuery.of(context).size.width;
    return Scaffold(
        body: Column(
      children: [
        Flexible(
          fit: FlexFit.tight,
          child: Container(
            padding: EdgeInsets.only(top: 0, bottom: 10, left: 0, right: 0),
            color: Colors.white,...

//=============== 
                  Container(
                    child: Center(
                      child: Text(
                        widget.holder_1.toString(),
                      ),
                    ),
                  ),

Yashraj · Answer 4 · 2021-12-07T08:37:33.503

Reference : https://docs.flutter.dev/cookbook/navigation/passing-data

First Screen,

Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => BallGamesSelectedItems(holder_1:holder_1),
          ),
        );

Second Screen,

class BallGamesSelectedItems extends StatefulWidget {
  final var holder_1;

  BallGamesSelectedItems(Key key, this.holder_1});
  @override
  _BallGamesSelectedItemsState createState() => _BallGamesSelectedItemsState(holder_1);
}

class _BallGamesSelectedItemsState extends State<BallGamesSelectedItems>
    {
    
    var holder_1;
    }

score 1 · Answer 5 · answered Dec 07 '21 at 08:42

1

As your question says, you like to pass data using route, but you are passing data though constructor. You can check details more about navigate-with-arguments.

Passing data using ModalRoute

  Navigator.of(context).push(
                  MaterialPageRoute(
                      builder: (context) => BallGamesSelectedItems(),
                      settings: RouteSettings(
                        arguments: holder_1,
                      )),
                );

Receive data inside build method like

 final data = ModalRoute.of(context)!.settings;

I will highly recommend checking this answer about passing data and navigate-with-arguments.

answered Dec 07 '21 at 08:42

Md. Yeasin Sheikh

54,221
7
29
56

thanks Yeasin. on my second screen. i got an error 'The instance member 'context' can't be accessed in an initializer.' when i write 'final data = ModalRoute.of(context)!.settings; ' – Yusuf Dec 07 '21 at 12:11
Did you declare it inside build method, you can check above answer link as reference – Md. Yeasin Sheikh Dec 07 '21 at 12:25

flutter passing array data from one screen to another in flutter using route

5 Answers5