Flutter BottomNavigationBar 等待异步函数答案

【问题标题】：Flutter BottomNavigationBar await async functionFlutter BottomNavigationBar 等待异步函数
【发布时间】：2020-07-14 14:51:21
【问题描述】：

我在 StatefulWidget 中有一个底部导航栏，以及一个包含 3 个选项的对话框，可打开相机、图库或取消。

这是我的代码： 导航栏

Widget build(BuildContext context) {
    return new Scaffold(
      body: PageView(
        children: [
          Container(
            color: Colors.white,child: HomePage(),),
          Container(
            color: Colors.white,child: AddPost(),),
        ],
        controller: pageController,
        physics: NeverScrollableScrollPhysics(),
        onPageChanged: onPageChanged,
      ),
      bottomNavigationBar: CupertinoTabBar(
        backgroundColor: Colors.white,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
              icon: Icon(Icons.home,
              title: Container(height: 0.0),
              backgroundColor: Colors.white),
          BottomNavigationBarItem(
              icon: Icon(Icons.add_circle,
              title: Container(height: 0.0),
          )
        ],
        onTap: navigationTapped,
        currentIndex: _page,
      ),
    );
  }

对话框

  File file;
  _selectImage( ) async {
    return showDialog<Null>(
      context: context,
      barrierDismissible: false, // user must tap button!
      builder: (BuildContext context) {
        return SimpleDialog(
          title: const Text('Create a Post'),
          children: <Widget>[
            SimpleDialogOption(
                child: const Text('Take a photo'),
                onPressed: () async {
                  Navigator.pop(context);
                  File imageFile =
                      await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
                  setState(() {
                    file = imageFile;
                  });
                }),
            SimpleDialogOption(
                child: const Text('Choose from Gallery'),
                onPressed: () async {
                  Navigator.of(context).pop();
                  File imageFile =
                      await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
                  setState(() {
                    file = imageFile;
                  });
                }),
            SimpleDialogOption(
              child: const Text("Cancel"),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        );
      },
    );
  }

我想做这样的事情，我可以打开对话框，但它没有等到选项被选中

void navigationTapped(int page) async{
    if(page != 1){
      pageController.jumpToPage(page);
    }else{
      await _selectImage(); //opens dialog
    }
    //Handle button tap
  }

我该如何等待，直到用户点击导航栏选择选项？

提前致谢！

【问题讨论】：

标签： flutter async-await dialog navigation-drawer

【解决方案1】：

在您的_selectImage 函数中，您可以等待对话框关闭以执行如下代码：

await showDialog(
  context: context,
  barrierDismissible: false, // user must tap button!
  builder: (BuildContext context) {
    return SimpleDialog(
      title: const Text('Create a Post'),
      children: <Widget>[
        SimpleDialogOption(
          child: const Text('Take a photo'),
          onPressed: () async {
            Navigator.pop(context);
            File imageFile = await ImagePicker.pickImage(source: ImageSource.camera, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
            setState(() {
              file = imageFile;
            });
          }),
        SimpleDialogOption(
          child: const Text('Choose from Gallery'),
          onPressed: () async {
            Navigator.of(context).pop();
            File imageFile = await ImagePicker.pickImage(source: ImageSource.gallery, maxWidth: 1920, maxHeight: 1200, imageQuality: 80);
            setState(() {
              file = imageFile;
            });
          }),
        SimpleDialogOption(
          child: const Text("Cancel"),
          onPressed: () {
            Navigator.pop(context);
          },
        )
      ],
    );
  },
).then((onValue) {
  if (onValue != null) {
    /// Code you want to do
  }
});

onValue可以使用这个函数来设置：

Navigator.pop(context, valueYouWantToReturn);

如果你想在onValue为空（Navigator.pop(context)）的情况下做一些代码，删除条件

【讨论】：