How to save checkboxListTile in flutter

Question

I have a CheckboxListTile field, after the user selects it, he moves to a new page to see some details. The problem after the user moves to the next page. The user's choice is deleted. After returning to the previous page, the option that the user previously chose is not found. How can the user's choice data be saved so that the user is able to see his choice after returning to the previous page?

Full code

import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'LawsOfNewUser.dart';


void main() {
  runApp(
    EasyLocalization(
      saveLocale: true,
      supportedLocales: [Locale('en', 'US'),
       ],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: NewMembership(),
    ),
  );
}

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

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            child: Column(
              children: [
                Card(
                  child: Column(
                    children: [
                      CheckboxListTile(
                          title: Text('Terms'.tr()),
                          value: false,
                          onChanged: (bool newValue) {
                            Navigator.push(context, new MaterialPageRoute(builder: (context) => new LawsUser()
                            ),
                            );
                          }
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

    );
  }
}

I tried to use shared_preferences but didn't know how to do this. If anyone knows the solution to this problem please help me.

Answer 1

State managment is a vast topic. The idea is that, when you do Navigator.push... you create a new widget, therefore the widget is at its original state and you don't have any state restoration. However the true power of route is that if you use Navigator.push... , you actually create a stack of widget. Therefore your old widget is still here, but "behind" the new one. To remove the new one and get back to the previous, you can use Navigator.pop .

Here is a working example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: NewMembership()));
}

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

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  bool termsAccepted = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            child: Column(
              children: [
                Card(
                  child: Column(
                    children: [
                      CheckboxListTile(
                          title: Text('Terms'),
                          value: termsAccepted,
                          onChanged: (bool newValue) {
                            termsAccepted = !termsAccepted;
                            setState(() {});
                            if (termsAccepted) {
                              Navigator.push(
                                context,
                                new MaterialPageRoute(builder: (context) => new SimplePage()),
                              );
                            }
                          }),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class SimplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.pop(
            context,
            new MaterialPageRoute(builder: (context) => new LoginScreen()),
          );
        },
      ),
    );
  }
}

Note however that while this work great in this case, it is often not enough for handling an entire application state. For this you should look at the link I gave you at the start of this answer.