首页 > 解决方案 > 使用 ChangeNotifier 开发应用程序的 Flutter MVVM 设计模式

问题描述

我是新来的颤振。我想使用 MVVM 设计模式在颤振中创建一个应用程序。我有 3 个屏幕,还需要 3 个 ViewModel。

屏幕 1 用于登录,其 ViewModel 是 LoginViewModel。屏幕 2 用于列出所有数据,屏幕 3 用于添加数据。

main.dart

  class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
    
      home: MultiProvider(
        providers: [
          ChangeNotifierProvider<LoginViewModel>(create: (_) => LoginViewModel()),
           ChangeNotifierProvider<DataViewModel>(create: (_) => DataViewModel()),
          ChangeNotifierProvider<AddViewModel>(create: (_) => AddViewModel()),
        ],
        child: SplashScreenOne(),
      )
    );
  }
}

登录.dart

    class LoginScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _LoginScreenState();
  }

}

class _LoginScreenState extends State<LoginScreen>{


  TextEditingController _usernameController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  Size size; // calculate screen size

  @override
  Widget build(BuildContext context) {

     final vm = Provider.of<LoginViewModel>(context);

    size = MediaQuery.of(context).size;

    return _loginScreen();
  }

当我运行我的应用程序时,它显示以下错误:

在此处输入图像描述

如何根据 ViewModel 为不同的屏幕添加 ChangeNotifier?

标签: flutterdartmvvm

解决方案


推荐阅读