How to Display selected data to another page in flutter

Question

Hi i am new to flutter i have used sample database to get data of 10 users. this data is displayed in list tile with leading item is checkbox (to select / deselect). Now i need help in displaying the selected data on to the other page once i press cart button in the appbar..

here's my main

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_application_http_get/example.dart';
import 'package:flutter_application_http_get/screen.dart';
import 'package:flutter_application_http_get/selected.dart';
import 'package:flutter_application_http_get/sunday_state.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Sunday(),
    );
  }
}

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

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

API Called Here

class _SundayState extends State<Sunday> {
  var users = [];
  Future getUserData() async {
    var res =
        await http.get(Uri.https("jsonplaceholder.typicode.com", "users"));
    var jsonData = jsonDecode(res.body) as List;

    setState(() {
      users = jsonData;
    });
  }

  @override
  void initState() {
    super.initState();
    getUserData();
  }

  final notification = [SundayCheckBoxState()];

  late final post;

data from post if checked printed..

  getCheckboxItems() {
    users.forEach((post) {
      if (post['checked'] == true) {
        
        print(post);
       
      }
    });
  }

here in when onpressed i need to display the checked data on to the other page

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("User Data"),
        actions: [
          IconButton(
            onPressed: getCheckboxItems,
             
              icon: Icon(Icons.shopping_cart))
        ],
      ),
      body: Container(
        child: Card(
          margin: EdgeInsets.all(20.0),
          child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, i) {
                final post = users[i];

                return Card(
                    elevation: 5,
                    child: Padding(
                        padding: const EdgeInsets.all(12.0),
                        child: ListView(shrinkWrap: true, children: [
                          

                          ListTile(
                            leading: Checkbox(
                                value: post['checked'] ?? false,
                                onChanged: (value) {
                                  setState(() {
                                    post['checked'] = value;
                                  });
                                }),
                            title: Text("${post['id']}" + "${post['name']}"),
                              
                          ),
                        ])

                        
                        ));
              }),
        ),
      ),
    );
  }

Answer 1

You can try this logic it worked for me:

 var _isSelectedCheckBoxArr = [];
 var _addSelectedValueArr = [];

 Checkbox(
    value: _isSelectedCheckBoxArr[i],
    materialTapTargetSize:
        MaterialTapTargetSize
            .shrinkWrap,
    onChanged: (s) {
      setState(() {
        _isSelectedCheckBoxArr[i] =
            !_isSelectedCheckBoxArr[i];
      });
      print(
          "$_tag onChanged: (s): $s");
      if (s) {
        setState(() {
          _addSelectedValueArr.add(
              "${users[i]}");
        });
      } else if (!s) {
        setState(() {
          _addSelectedValueArr
              .remove(
                  users[i]);
        });
      }
    }),

Then on the click of cart button pass the _addSelectedValueArr array in the constructor of the screen you want to display.