Flutter BMI应用页面跳转后背景黑屏问题排查求助

你代码里出现跳转黑屏的核心原因是嵌套了两层MaterialApp：

• main函数中runApp已经传入了一个顶层MaterialApp，将MyApp作为首页
• 同时MyApp的build方法又返回了一个新的MaterialApp，两层独立的路由栈导致内层调用Navigator跳转时，外层无法正常渲染新页面，从而出现黑屏

附带的控制台InputConnection相关警告是因为首页没有用Scaffold包裹，输入框焦点切换、页面跳转时焦点管理异常导致。

1. 移除重复的MaterialApp，调整页面结构 #

将顶层主题配置挪到main函数的MaterialApp中，MyApp的build方法直接返回Scaffold包裹你的页面内容，修改后的核心代码如下：

main函数修改： #

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MaterialApp(
    // 把原来内层的主题配置挪到这里
    theme: ThemeData(backgroundColor: Colors.white),
    home: MyApp(),
  ));
}

MyApp的build方法修改： #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    // 原来的Center+Column直接作为Scaffold的body
    body: Center(
      child: Column(
        children: <Widget>[
          // 原来的两个输入框、按钮等所有子控件原封不动保留在这里
          SizedBox(height: 50),
          Material(
            elevation: 30.0,
            shadowColor: Colors.grey,
            child: Container(
              color: Colors.transparent,
              width: 300,
              child: SingleChildScrollView(
                child: TextField(
                  controller: heightcon,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                  ),
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: '输入身高(cm)',
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(0.0),
                      borderSide: BorderSide(
                        color: Colors.black,
                        width: 2.0,
                      ),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(0.0),
                      borderSide: BorderSide(
                        color: Colors.black54,
                        width: 2.0,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 50),
          Material(
            elevation: 30.0,
            shadowColor: Colors.grey,
            child: Container(
              width: 300,
              child: SingleChildScrollView(
                child: TextField(
                  controller: weightcon,
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                  ),
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: '输入体重(kg)',
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(0.0),
                      borderSide: BorderSide(
                        color: Colors.black,
                        width: 2.0,
                      ),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(0.0),
                      borderSide: BorderSide(
                        color: Colors.black54,
                        width: 2.0,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          SizedBox(height: 30),
          SizedBox(
            height: 57,
            width: 150,
            child: Material(
              elevation: 30,
              shadowColor: Colors.grey,
              child: ElevatedButton(
                style: ButtonStyle(
                    textStyle: MaterialStateProperty.all(TextStyle(
                      fontSize: 23,
                      color: Colors.white,
                    )),
                    backgroundColor:
                    MaterialStateProperty.all(Colors.red),
                    shape:
                    MaterialStateProperty.all<RoundedRectangleBorder>(
                        RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(0.0),
                            side: BorderSide(color: Colors.white)))),
                child: Text('计算BMI'),
                onPressed: () {
                  // 跳转前先收起输入框焦点，消除控制台警告
                  FocusScope.of(context).unfocus();
                  // 新增：计算BMI并赋值给全局变量，避免跳转后空值报错
                  double height = double.parse(heightcon.text)/100;
                  double weight = double.parse(weightcon.text);
                  globals.weightvalue = weight;
                  globals.bmi = weight/(height*height);
                  // 此处自行补充BMI等级判断逻辑赋值给globals.BmiLevel
                  print(genderindex);
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondRoute()),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

2. 补充BMI计算逻辑 #

你当前输入框的onChanged为空，也没有在跳转前计算BMI值，直接跳转到第二页读取全局变量会出现空值崩溃，上面代码已经补充了基础计算逻辑，你可以按照需求完善BMI等级判断的部分。

修改完成后重新运行，跳转黑屏和控制台警告的问题都会解决。

内容的提问来源于stack exchange，提问作者Thiroshan Suthakar