简体   繁体   中英

Updating my State after Pop from A modal bottom sheet

I am using a Modal bottom sheet as my dropdown list, but I can't figure out how to update my state once I return from the bottom sheet via Navigator.pop(). Apparently the Modal class does not support setState. I would Gladly accept any help anyone can give for this problem. Everything besides the text of the selectedlang updating works. The actually lang the app is set to does change just the text is not updating to show that to the user.

import 'package:flutter/material.dart';
import 'splash.dart' show lang;
import 'package:shared_preferences/shared_preferences.dart';

String selectedlang;

class LangSelect extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _LangSelectState();
}

class _LangSelectState extends State<LangSelect> {
  void setLangDefault() {
    selectedlang = "English";
    lang = 'en';
  }

  void initState() {
    super.initState();
    setLangDefault();
  }

  Modal modal = Modal();

  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: WillPopScope(
          onWillPop: () async {
            Future.value(false);
          },
          child: Column(
            children: <Widget>[
              Image.asset('assets/splash_logo.jpg'),
              Center(
                  child: Column(
                mainAxisSize: MainAxisSize.max,
                children: <Widget>[
                  Text('Welcome',
                      style:
                          TextStyle(fontSize: 40, fontWeight: FontWeight.bold)),
                  Text(''),
                  Text(''),
                  Text(
                    "Select a language.",
                    style: TextStyle(fontStyle: FontStyle.italic),
                  ),
                  Text(''),
                  Container(
                      width: 120,
                      height: 30,
                      decoration: BoxDecoration(
                          color: Colors.grey[300],
                          border: Border.all(
                              color: Colors.black,
                              width: 1,
                              style: BorderStyle.solid),
                          borderRadius: BorderRadius.all(Radius.circular(20))),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text(selectedlang),
                          IconButton(
                            padding: EdgeInsets.fromLTRB(25, 2, 2, 2),
                            icon: Icon(Icons.arrow_drop_down),
                            onPressed: () => modal.mainBottomSheet(context),
                          )
                        ],
                      ))
                ],
              )),
            ],
          ),
        ));
  }
}

class Modal {
  mainBottomSheet(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              _createTile(context, 'English', _action1),
              _createTile(context, 'Español', _action2),
            ],
          );
        });
  }

  ListTile _createTile(BuildContext context, String name, Function action) {
    return ListTile(
      title: Text(
        name,
        textAlign: TextAlign.center,
      ),
      onTap: () {
        Navigator.pop(context);
        action();
      },
    );
  }

  _action1() {
    lang = 'en';
    selectedlang = "English";
    print(lang);
  }

  _action2() {
    lang = 'sp';
    selectedlang = "Español";
    print(lang);
  }
}

I solved this question by simply removing the mainBottomSheet out of the Modal class called it just like a onPressed ()=> void. Then I was able to put my setState in my actions.

Stumbled across the same issue and fixed it by calling a method that sets the state via .then

Example:

showModalBottomSheet(
              context: context,
              builder: (context) => _Your_Bottom_Sheet_Widget(),
            ).then((value) => rebuild());

The method rebuild() is called which simply looks like this:

void rebuild() {
setState(() {});
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM