Home > Software design >  How to pass selected checkboxes to pop()?
How to pass selected checkboxes to pop()?

Time:05-04

In the application, when you return to the previous screen, you need to display the selected checkboxes. To return to the previous screen, use pop(). How can I pass the selected checkboxes and display them on the screen? I need to use only pop(), without Provider and the rest. Screen with checkbox:

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

  @override
  State<TextScreen> createState() => _TextScreenState();
}

class _TextScreenState extends State<TextScreen> {
  // initial values for checkboxes
  bool _privacy = false;
  bool _termsOfUse = false;

  void _getResult(BuildContext context) {
    Navigator.pop(context);
  }

  @override
  Widget build(BuildContext context) {
    void _onChangePrivacy(value) {
      setState(() {
        _privacy = value!;
      });
    }

    void _onChangeTermsOfUse(value) {
      setState(() {
        _termsOfUse = value!;
      });
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Enter data'),
      ),
      body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CheckboxListTile(
                title: const Text('Privacy'),
                controlAffinity: ListTileControlAffinity.leading,
                value: _privacy,
                onChanged: (value) {
                  _onChangePrivacy(value);
                },
                contentPadding: EdgeInsets.zero,
              ),
              CheckboxListTile(
                title: const Text('Terms of use'),
                controlAffinity: ListTileControlAffinity.leading,
                value: _termsOfUse,
                onChanged: (value) {
                  _onChangeTermsOfUse(value);
                },
                contentPadding: EdgeInsets.zero,
              ),
              ElevatedButton(
                  onPressed: () {
                    _getResult(context);
                  },
                  child: const Text('Display result'))
            ],
          )),
    );
  }
}

Screen with Results:

class ResultScreen extends StatefulWidget {
  @override
  State<ResultScreen> createState() => _ResultScreenState();
}

class _ResultScreenState extends State<ResultScreen> {


  @override
  Widget build(BuildContext context) {
    // navigation to next screen
    void _navToNextScreen(BuildContext context) async {
      final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const TextScreen()),
      );
      setState(() {

      });
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Results'),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
              onPressed: () {
                _navToNextScreen(context);
              },
              child: const Text('Enter data')),
          const SizedBox(height: 20),
          Text('Checkboxes:')
        ],
      )),
    );
  }
}

CodePudding user response:

Easy way to do this

import 'package:flutter/material.dart';

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

  @override
  State<TextScreen> createState() => _TextScreenState();
}

class _TextScreenState extends State<TextScreen> {
  // initial values for checkboxes
  Map<String, bool> result = {"privacy": false, "ToU": false};

  void _getResult(BuildContext context) {
    Navigator.of(context).pop(result);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    void _onChangePrivacy(value) {
      result.update("privacy", (val) => value);
      setState(() {});
    }

    void _onChangeTermsOfUse(value) {
      result.update("ToU", (val) => value);
      setState(() {});
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Enter data'),
      ),
      body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CheckboxListTile(
                title: const Text('Privacy'),
                controlAffinity: ListTileControlAffinity.leading,
                value: result['privacy'],
                onChanged: (value) {
                  _onChangePrivacy(value);
                },
                contentPadding: EdgeInsets.zero,
              ),
              CheckboxListTile(
                title: const Text('Terms of use'),
                controlAffinity: ListTileControlAffinity.leading,
                value: result['ToU'],
                onChanged: (value) {
                  _onChangeTermsOfUse(value);
                },
                contentPadding: EdgeInsets.zero,
              ),
              ElevatedButton(
                  onPressed: () {
                    _getResult(context);
                  },
                  child: const Text('Display result'))
            ],
          )),
    );
  }
}

Screen with Results:

class ResultScreen extends StatefulWidget {
  @override
  State<ResultScreen> createState() => _ResultScreenState();
}

class _ResultScreenState extends State<ResultScreen> {


  @override
  Widget build(BuildContext context) {
    // navigation to next screen
    void _navToNextScreen(BuildContext context) async {
      final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => const TextScreen()),
      );
      
     var privacy = result['privacy'];

      setState(() {

      });
    }

    return Scaffold(
      appBar: AppBar(
        title: const Text('Results'),
      ),
      body: Center(
          child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
              onPressed: () {
                _navToNextScreen(context);
              },
              child: const Text('Enter data')),
          const SizedBox(height: 20),
          Text('Checkboxes:')
        ],
      )),
    );
  }
}

CodePudding user response:

You can pass the data back to the previous screen on pop as the seconds parameter like

  Navigator.pop(context, "Any data you want to pass to previous screen");

So, in your case, the _getResult() in TextScreen pages should be like

void _getResult(BuildContext context) {
  Navigator.pop(context, {"privacy": _privacy, "ToU": _termsOfUse});
}

And Accept them in the previous screen as

final result = await Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => const TextScreen()),
  );
print(result);
  • Related