Flutter CupertinoDatePicker在执行日期选择器小部件之前打印颤振的结果

在CupertinodePicker之后写入的代码在它之前执行

我正在使用

cupertinodepicker

，并且面临这个问题。下面的代码是我创建的一个示例，用于向颤振专家提问并找到解决方案。如有任何帮助，我们将不胜感激

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

DateTime selectedDate = DateTime.now();

void main() => runApp(MyApp()); // Run class MyApp

// Context is where the widget is located in the app
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertinio Datepicker'),
        actions: <Widget>[
          IconButton(
            icon: Icon(CupertinoIcons.add),
            tooltip: 'Add Date',
            onPressed: () {
              print('1. Date Before : ${selectedDate} ');
              setState(() {
                _showModalBottomSheet(context);
              });
              print('3. Date After : ${selectedDate} ');
              // Problem: I have to call another page here with the changed date but date remains same and SecondPage is called before _showModalBottomSheet
              //navigateToSecondPage(context, selectedDate);


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

Widget _showModalBottomSheet(context){
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context){
        return Container(
          height: MediaQuery.of(context).copyWith().size.height / 3,
          child: _showCuperTinoDatePicker(),
        );
      }
  );
}


Widget _showCuperTinoDatePicker() {
  return CupertinoDatePicker(
    initialDateTime: selectedDate,
    onDateTimeChanged: (DateTime newdate) {
      selectedDate = newdate;
      print('2. onDateTimeChanged : ${selectedDate}' );
    },
    minimumYear: 2010,
    maximumYear: 2050,
    mode: CupertinoDatePickerMode.date,
  );
}

实际结果：这是print语句的输出

1. Date Before : 2019-08-29  [output of print statement]
3. Date After : 2019-08-29 [output of print statement]
// goes to next page, After closing the page, it comes back to first page and displays date picker
2. print 'on Date Time Changed' : 2019-08-30 00:00:00.000
2. print  'on Date Time Changed' : 2019-08-31 00:00:00.000

---

问题源于

\u showModalBottomSheet（）

，因为在它内部使用

showModalBottomSheet（）

，它返回一个

未来

，而flatter找到一个异步函数，它将继续执行其他函数，并在可用时显示结果

解决问题的一个方法是使用

按钮

移动到下一个屏幕，因为

CupertinodePicker

没有处理选择的功能，只有

onDateTimeChanged

：

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

DateTime selectedDate = DateTime.now();

void main() => runApp(MyApp()); // Run class MyApp

// Context is where the widget is located in the app
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertinio Datepicker'),
        actions: <Widget>[
          IconButton(
            icon: Icon(CupertinoIcons.add),
            tooltip: 'Add Date',
            onPressed: () {
              print('1. Date Before : $selectedDate ');
              setState(() {
                _showModalBottomSheet(context);
              });
            },
          ),
        ],
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Second Page'),
            onPressed: (){
              //navigateToSecondPage(context, selectedDate);
            }
        ),
      ),
    );
  }
}

Widget _showModalBottomSheet(context){
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context){
        return Container(
          height: MediaQuery.of(context).copyWith().size.height / 3,
          child: _showCupertinoDatePicker(),
        );
      }
  );
}


Widget _showCupertinoDatePicker() {
  return CupertinoDatePicker(
    initialDateTime: selectedDate,
    onDateTimeChanged: (DateTime newDate) {
      selectedDate = newDate;
      print('2. onDateTimeChanged : $selectedDate' );
    },
    minimumYear: 2010,
    maximumYear: 2050,
    mode: CupertinoDatePickerMode.date,
  );
}

import'包装：flift/cupertino.dart'；
进口“包装：颤振/材料.省道”；
DateTime selectedDate=DateTime.now（）；
void main（）=>runApp（MyApp（））；//运行类MyApp
//上下文是小部件在应用程序中的位置
类MyApp扩展了无状态小部件{
//此小部件是应用程序的根。
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“材料”，
主题：主题数据(
主样本：颜色。蓝色，
),
debugShowCheckedModeBanner:false，
主页：主页（），
);
}
}
类主页扩展了StatefulWidget{
@凌驾
_HomePageState createState（）=>\u HomePageState（）；
}
类_HomePageState扩展状态{
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（'Cupertinio Datepicker'），
行动：[
图标按钮(
图标：图标（CupertinoIcons.add），
工具提示：“添加日期”，
已按下：（）{
打印（'1.日期之前：$selectedDate'）；
设置状态（）{
_showModalBottomSheet（上下文）；
});
},
),
],
),
正文：中(
孩子：升起按钮(
子项：文本（“第二页”），
已按下：（）{
//导航至第二页（上下文，所选日期）；
}
),
),
);
}
}
小部件_showModalBottomSheet（上下文）{
showModalBottomSheet(
上下文：上下文，
生成器：（BuildContext上下文）{
返回容器(
高度：MediaQuery.of（context.copyWith（）.size.height/3，
子项：_showCupertinoDatePicker（），
);
}
);
}
小部件_showCupertinoDatePicker（）{
回程滚筒式摘穗器(
initialDateTime:selectedDate，
onDateTimeChanged:（日期时间newDate）{
selectedDate=新日期；
打印（'2.onDateTimeChanged:$selectedDate'）；
},
最低年份：2010年，
最长年份：2050年，
模式：CupertinodeTatePickerMode.date，
);
}

欢迎来到SO。请直接在问题中复制您的代码，而不是外部链接。谢谢。将_showModalBottomSheet和_showCupertinoDatePicker移动到第二页成功。这个问题在android emulator和iPhone emulator上得到了解决，但我们在iPhone TestFlight应用程序上遇到了另一个问题。调用第二页的语法：selectDate=await Navigator.push（上下文，CupertinoPageRoute（builder:（上下文）=>GetDatePage（上下文，selectDate，），），）；我们发布了iPhone-TestFlight的代码。只要我们单击调用GetDatePage的按钮，iPhone应用程序就会以错误“RangeError:值不在范围内：20”终止。原因可能是什么？

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

DateTime selectedDate = DateTime.now();

void main() => runApp(MyApp()); // Run class MyApp

// Context is where the widget is located in the app
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cupertinio Datepicker'),
        actions: <Widget>[
          IconButton(
            icon: Icon(CupertinoIcons.add),
            tooltip: 'Add Date',
            onPressed: () {
              print('1. Date Before : $selectedDate ');
              setState(() {
                _showModalBottomSheet(context);
              });
            },
          ),
        ],
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Second Page'),
            onPressed: (){
              //navigateToSecondPage(context, selectedDate);
            }
        ),
      ),
    );
  }
}

Widget _showModalBottomSheet(context){
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context){
        return Container(
          height: MediaQuery.of(context).copyWith().size.height / 3,
          child: _showCupertinoDatePicker(),
        );
      }
  );
}


Widget _showCupertinoDatePicker() {
  return CupertinoDatePicker(
    initialDateTime: selectedDate,
    onDateTimeChanged: (DateTime newDate) {
      selectedDate = newDate;
      print('2. onDateTimeChanged : $selectedDate' );
    },
    minimumYear: 2010,
    maximumYear: 2050,
    mode: CupertinoDatePickerMode.date,
  );
}