机遇屋-flutter全局状态管理和MVVM

flutter全局状态管理和MVVM

作者：ych

#### 全局状态管理provider

pubspec.yaml

[provider](https://pub.dev/packages/provider/install "provider")
```
dependencies:
  provider: ^6.0.5
```

provider->count_provider.dart
编写全局文件
```
import 'package:flutter/cupertino.dart';

class CountProvider extends ChangeNotifier{
  int _count=0;

get count=>_count;

void add(){
    _count++;
    notifyListeners();
  }
}
```

widgets->provider_demo.dart
执行文件
```
import 'package:flutter/material.dart';
import 'package:jywvideos/provider/count_provider.dart';
import 'package:provider/provider.dart';

class ProviderDemo extends StatefulWidget {
  const ProviderDemo({Key? key}) : super(key: key);

@override
  State<ProviderDemo> createState() => _ProviderDemoState();
}

class _ProviderDemoState extends State<ProviderDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Provider全局状态管理"),
      ),
      body: Column(
        children:[
          Text(Provider.of<CountProvider>(context).count.toString()),
          ElevatedButton(onPressed: (){
            Navigator.pushNamed(context, "provider2");
          }, child: const Text("跳转"))
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child:const Icon(Icons.add),
        onPressed: (){
          context.read<CountProvider>().add();
        },
      ),
    );
  }
}

class ProviderDemo2 extends StatelessWidget {
  const ProviderDemo2({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Provider全局状态管理2"),
      ),
      body: Column(
        children: [
          Text(Provider.of<CountProvider>(context).count.toString()),
          ElevatedButton(onPressed: (){
            Navigator.pushNamed(context, "provider");
          }, child: const Text("跳转"))
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child:const Icon(Icons.add),
        onPressed: (){
          context.read<CountProvider>().add();
        },
      ),
    );
  }
}
```
main.dart
设置路由
```
routes: {
        "/": (context)=>const  LoginPage(),
        "layout": (context)=> BottomNavigatorBarDemo(),
        "listview":(context)=>const ListviewDemo(),
        "gridview":(context)=>const GridViewDemo(),
        "alertdialog":(context)=>const AlertDialogDemo(),
        "table":(context)=>const TableDemo(),
        "card":(context)=>const CardDemo(),
        "provider":(context)=>const ProviderDemo(),
        "provider2":(context)=>const ProviderDemo2(),

// "login": (context)=>const  LoginPage(),
        // "menu": (context)=>const  MenuPage(title: "菜单",),
      },
      initialRoute: "provider",
```

#### 网络请求dio
[dio](https://pub.dev/packages?q=dio "dio")
```
dependencies:
  dio: ^4.0.6
```
请求类型|地址
-|-
get|https://v-api.2345.com/live/api/GetLiveList?offset=1&size=6
get|https://message.bilibili.com/api/tooltip/query.list.do
post|https://console.songsongyun.com/login/index
post|http://zb.mekedoo.com/public/supplier/login/login.html
post|https://api.bilibili.com/x/internal/gaia-gateway/ExClimbWuzhi

mekedoo
```
# header
X-Requested-With: XMLHttpRequest
```

>注释：以上网络请求内容收集自互联网，如果侵犯了您的权益请看首页信息联系告知，我们会及时删除。资料仅供学习使用，如果您用来从事特殊业务或损害了他人利益或他人经验的网络业务而产生纠纷或违法事件，请自行承担责任，与本站无关。

```
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class DioDemo extends StatefulWidget {
  const DioDemo({Key? key}) : super(key: key);

@override
  State<DioDemo> createState() => _DioDemoState();
}

class _DioDemoState extends State<DioDemo> {
  Dio _dio=Dio();
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _dio.options.baseUrl="";//请求前缀
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text("Dio网络请求"),
      ),
      body: Column(
        children: [
          ElevatedButton(onPressed: _get, child: const Text("Get")),
          ElevatedButton(onPressed: _post, child: const Text("Post")),

],
      ),
    );
  }

void _get() async{
    var result=await _dio.get("https://message.bilibili.com/api/tooltip/query.list.do");
    debugPrint(result.toString());
  }
  void _post() async{
    var result=await _dio.post(
        "http://zb.mekedoo.com/public/supplier/login/login.html",
      queryParameters: {
          "name":"admin",
          "password":"123456",
      },
      options: Options(
        headers: {
          "X-Requested-With": "XMLHttpRequest",
        }
      ),

);
    debugPrint(result.toString());
  }

}
```

[dio更多](https://github.com/flutterchina/dio/blob/develop/README-ZH.md "dio更多")

为何只学post和get
[公司使用现状](https://wap.zol.com.cn/ask/2955822.html "公司使用现状")
[大家观点](https://www.zhihu.com/question/348054771 "大家观点")

#### mvvm
##### model
model/MvvmDemoModel.dart
```
import 'package:dio/dio.dart';

class MvvmDemoModel{
/*
*一个无参数的get方法
*/
  dynamic get() async{
    return await Dio().get("https://message.bilibili.com/api/tooltip/query.list.do");
  }
}
```

##### view
view/MvvmDemoView.dart
```
import 'package:flutter/material.dart';
import 'package:jywvideos/viewmodel/MvvmDemoViewModel.dart';
import 'package:provider/provider.dart';
class MvvmDemoView extends StatefulWidget {
  const MvvmDemoView({Key? key}) : super(key: key);

@override
  State<MvvmDemoView> createState() => _MvvmDemoViewState();
}

class _MvvmDemoViewState extends State<MvvmDemoView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("MvvmDemo"),
      ),
      body: ElevatedButton(
        onPressed: ()async {
          context.read<MvvmDemoViewModel>().get();
        },
        child:const Text("调用viewmodel"),
      ),
    );
  }
}
```

##### viewmodel
viewmodel/MvvmDemoViewModel.dart
```
import 'package:flutter/material.dart';
import 'package:jywvideos/model/MvvmDemoModel.dart';

class MvvmDemoViewModel extends ChangeNotifier{
  MvvmDemoModel _model=MvvmDemoModel();

void get() async{
    var result=await _model.get();
    debugPrint(result.toString());
  }
}
```

##### main
main.dart
```
void main()=>runApp(
  MultiProvider(providers: [
    ChangeNotifierProvider(create:
        (context)=>CountProvider(),
    ),
    ChangeNotifierProvider(create:
        (context)=>MvvmDemoViewModel(),
    ),
  ],
    child: const MyApp(),
  )

);

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: "Text widget",
      debugShowCheckedModeBanner: false,
      routes: {
        "/": (context)=>const  LoginPage(),
        "layout": (context)=> BottomNavigatorBarDemo(),
        "listview":(context)=>const ListviewDemo(),
        "gridview":(context)=>const GridViewDemo(),
        "alertdialog":(context)=>const AlertDialogDemo(),
        "table":(context)=>const TableDemo(),
        "card":(context)=>const CardDemo(),
        "provider":(context)=>const ProviderDemo(),
        "provider2":(context)=>const ProviderDemo2(),
        "dio":(context)=>const DioDemo(),
        "mvvmdemo":(context)=>const MvvmDemoView(),
      },
      initialRoute: "mvvmdemo",
      onGenerateRoute: (s){
        debugPrint(s.name);
        switch(s.name){
          case "menu":
            return MaterialPageRoute(builder: (context){
              return MenuPage(title: "大哥",);
            },settings: s);
            break;
          default:debugPrint(s.name);
        }
      },
    );
  }
}

```
#### mvvm追加导航
main.dart
```
final GlobalKey<NavigatorState> navigatorKey=GlobalKey<NavigatorState>();
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

@override
  Widget build(BuildContext context) {
    return  MaterialApp(
      navigatorKey: navigatorKey,
      title: "Text widget",
      debugShowCheckedModeBanner: false,
      routes: {
        "/": (context)=>const  LoginPage(),
        "layout": (context)=> BottomNavigatorBarDemo(),
        "listview":(context)=>const ListviewDemo(),
        "gridview":(context)=>const GridViewDemo(),
        "alertdialog":(context)=>const AlertDialogDemo(),
        "table":(context)=>const TableDemo(),
        "card":(context)=>const CardDemo(),
        "provider":(context)=>const ProviderDemo(),
        "provider2":(context)=>const ProviderDemo2(),
        "dio":(context)=>const DioDemo(),
        "mvvmdemo":(context)=>const MvvmDemoView(),
      },
      initialRoute: "mvvmdemo",
      onGenerateRoute: (s){
        debugPrint(s.name);
        switch(s.name){
          case "menu":
            return MaterialPageRoute(builder: (context){
              return MenuPage(title: "大哥",);
            },settings: s);
            break;
          default:debugPrint(s.name);
        }
      },
    );
  }
}
```
MvvmDemoViewModel.dart
```
import 'package:flutter/material.dart';
import 'package:jywvideos/model/MvvmDemoModel.dart';
import 'package:jywvideos/main.dart';

class MvvmDemoViewModel extends ChangeNotifier{
  MvvmDemoModel _model=MvvmDemoModel();

void get() async{
    var result=await _model.get();
    debugPrint(result.toString());
    Navigator.of(navigatorKey.currentContext!).pushNamed("dio");
  }
}
```

评论区

先去登录

flutter全局状态管理和MVVM

相关推荐

评论区