You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter练习provider包的应用运行后显示空白画布,求问题成因

问题原因
  • 核心错误是你没有调用Flutter应用必须的入口渲染方法runApp()。你当前的main函数写法void main() => const MyApp(); 仅生成了MyApp组件实例,没有告知Flutter框架要将该组件挂载到屏幕渲染,这是屏幕完全空白的直接原因。
  • 你贴出的代码还缺失三个必要的自定义类实现,即使修复了main函数,运行时还会抛出未定义类的报错:
    • 继承自ChangeNotifier的Data类(你在ChangeNotifierProvider中注册了该类的实例)
    • 自定义组件MyText(在AppBar的title属性中被引用)
    • 自定义组件MyTextField(在Level2的Column子组件中被引用)
修复方案

首先将main函数修改为正确写法:

void main() => runApp(const MyApp());

之后补全缺失的自定义类即可正常运行,示例补全代码参考:

// 补全Data类
class Data extends ChangeNotifier {
  String data = '默认内容';
  // 你可以根据需求新增修改data后调用notifyListeners的方法实现状态更新
}

// 补全MyText组件
class MyText extends StatelessWidget {
  const MyText({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Provider练习');
  }
}

// 补全MyTextField组件
class MyTextField extends StatelessWidget {
  const MyTextField({super.key});

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(16),
      child: TextField(
        decoration: InputDecoration(hintText: '请输入内容'),
      ),
    );
  }
}

内容的提问来源于stack exchange,提问作者Ahmar Hafeez

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.29 17:06:08