https://www.jianshu.com/p/cab2c1c2523f

Provide是Google官方推出的状态管理模式。官方地址为：https://github.com/google/flutter-provide

现在Flutter的状态管理方案很多，redux、bloc、state、Provide。

Scoped Model : 最早的状态管理方案，我刚学Flutter的时候就使用的这个，虽然还有公司在用，但是大部分已经选用其它方案了。

Redux：现在国内用的最多，因为咸鱼团队一直在用，还出了自己fish redux。阿里宣布开源Flutter应用框架Fish Redux！

bloc：比Redux简单，而且好用，特别是一个页面里的状态管理。

state：缺点是耦合太强，如果是大型应用，管理起来非常混乱。

Provide：是在Google的Github下的一个项目，刚出现不久，所以可以推测他是Google的亲儿子。

要实现一个页面状态改变之后，另一个页面状态也随之改变。效果图如下：

效果图

1、添加依赖

dependencies:

 provide: ^1.0.2

2、创建Provide

这个类似于创建一个state，但是为了跟State区分，我们叫创建Provide。新建一个provide文件夹，然后再里边新建一个counter.dart 文件.代码如下:

import 'package:flutter/material.dart';

class Counter with ChangeNotifier {

 int value = 0;

 increment() {

    value++;

    notifyListeners();

 }

}

3、将状态放入顶层

void main() {

 var counter =Counter();

 var providers = Providers();

  providers..provide(Provider<Counter>.value(counter));

 runApp(

    ProviderNode(

      child: MyApp(),

      providers: providers,

    )

 );

4、获取状态

class Number extends StatelessWidget {

 @override

  Widgetbuild(BuildContext context) {

    return Container(

      margin: EdgeInsets.only(top: 200.0),

      child: Provide<Counter>(

        builder: (context, child,counter) {

          return Text('${counter.value}',style: TextStyle(fontSize: 30.0),);

        },

      )

    );

 }

}

builder方法接收三个参数

第一个参数context：代表上下文。

第二个参数child：假如这个小部件足够复杂，内部有一些小部件是不会改变的，那么我们可以将这部分小部件写在Provide的child属性中，让builder不再重复创建这些小部件，以提升性能。

第三个参数counter：这个参数代表了我们获取的顶层providers中的状态。

5、修改状态

Widget build(BuildContext context) {

    return Container(

      child: Container(

        child: RaisedButton(

          onPressed: () {

            Provide.value<Counter>(context).increment();

          },

          child: Text('增加'),

        ),

      ),

    );

 }

项目地址

作者：zda123000

链接：https://www.jianshu.com/p/cab2c1c2523f

来源：简书

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

bloc：Flutter 基于BLoC完整Flutter App项目

https://www.jianshu.com/p/be0107298bc5

2019.01.11 00:22:32字数 501阅读 15,656

本项目包含启动页，引导页，主题色，国际化，Bloc，RxDart。拥有较好的项目结构，比较规范的代码。App拥有精致的UI界面，统一的交互，侧滑退出，列表和Web界面均提供快速滚动至顶部功能。

作者初衷是为大家提供一个比较规范的Flutter项目示例。

有关项目最新动态，可以关注App内第一条Hot Item信息。

App目录结构

|--lib

|-- blocs (bloc相关)

|-- common (常用类，例如常量Constant)

|-- data (网络数据层)

|-- db (数据库)

|-- event (事件类)

|-- models (实体类)

|-- res (资源文件，string，colors，dimens，styles)

|-- ui (界面相关page，dialog，widgets)

|-- utils (工具类)

data网络数据层

|--data

|-- api (url字段)

|-- net (单例DioUtil)

|-- protocol (请求与返回实体类)

|-- repository (接口请求&解析)

api

classWanAndroidApi{/// 首页banner http://www.wanandroid.com/banner/jsonstaticconstString BANNER="banner";staticconstString USER_REGISTER="user/register";//注册staticconstString USER_LOGIN="user/login";//登录staticconstString USER_LOGOUT="user/logout";//退出// 拼接urlstaticStringgetPath({String path:'',int page,String resType:'json'}){StringBuffer sb=newStringBuffer(path);if(page!=null){sb.write('/$page');}if(resType!=null&&resType.isNotEmpty){sb.write('/$resType');}returnsb.toString();}}

请求与返回实体类 protocol

classLoginReq{String username;String password;LoginReq(this.username,this.password);LoginReq.fromJson(Map<String,dynamic>json):username=json['username'],password=json['password'];Map<String,dynamic>toJson()=>{'username':username,'password':password,};@overrideStringtoString(){StringBuffer sb=newStringBuffer('{');sb.write("\"username\":\"$username\"");sb.write(",\"password\":$password");sb.write('}');returnsb.toString();}}

接口请求&解析 repository

classWanRepository{Future<List<BannerModel>>getBanner()async{BaseResp<List>baseResp=awaitDioUtil().request<List>(Method.get,WanAndroidApi.getPath(path:WanAndroidApi.BANNER));List<BannerModel>bannerList;if(baseResp.code!=Constant.STATUS_SUCCESS){returnnewFuture.error(baseResp.msg);}if(baseResp.data!=null){bannerList=baseResp.data.map((value){returnBannerModel.fromJson(value);}).toList();}returnbannerList;}}

资源文件 res

|--res

|-- colors.dart

|-- dimens.dart

|-- strings.dart

|-- styles.dart

colors.dart

classColours{staticconstColor app_main=Color(0xFF666666);staticconstColor text_dark=Color(0xFF333333);staticconstColor text_normal=Color(0xFF666666);staticconstColor text_gray=Color(0xFF999999);}

dimens.dart

classDimens{staticconstdoublefont_sp12=12;staticconstdoublefont_sp14=14;staticconstdoublefont_sp16=16;staticconstdoublegap_dp5=5;staticconstdoublegap_dp10=10;}

strings.dart

classIds{staticconstString titleHome='title_home';}Map<String,Map<String,Map<String,String>>>localizedValues={'en':{'US':{Ids.titleHome:'Home',}},'zh':{'CN':{Ids.titleHome:'主页',},'HK':{Ids.titleHome:'主頁',},'TW':{Ids.titleHome:'主頁',}}};

styles.dart

classTextStyles{staticTextStyle listTitle=TextStyle(fontSize:Dimens.font_sp16,color:Colours.text_dark,fontWeight:FontWeight.bold,);staticTextStyle listContent=TextStyle(fontSize:Dimens.font_sp14,color:Colours.text_normal,);staticTextStyle listExtra=TextStyle(fontSize:Dimens.font_sp12,color:Colours.text_gray,);}//  间隔classGaps{// 水平间隔staticWidget hGap5=newSizedBox(width:Dimens.gap_dp5);staticWidget hGap10=newSizedBox(width:Dimens.gap_dp10);// 垂直间隔staticWidget vGap5=newSizedBox(height:Dimens.gap_dp5);staticWidget vGap10=newSizedBox(height:Dimens.gap_dp10);}

Flutter 国际化相关

fluintl 是一个为应用提供国际化的库，可快速集成实现应用多语言。该库封装了一个国际化支持类，通过提供统一方法getString(id)获取字符串。

// 在MyApp initState配置多语言资源setLocalizedValues(localizedValues);//配置多语言资源// 在MaterialApp指定localizationsDelegates和supportedLocalesMaterialApp(home:MyHomePage(),localizationsDelegates:[GlobalMaterialLocalizations.delegate,GlobalWidgetsLocalizations.delegate,CustomLocalizations.delegate//设置本地化代理    ],supportedLocales:CustomLocalizations.supportedLocales,//设置支持本地化语言集合    );// 字符串获取IntlUtil.getString(context,Ids.titleHome);CustomLocalizations.of(context).getString(StringIds.titleHome);

Flutter 屏幕适配 ScreenUtil

方案一、不依赖context

步骤1//如果设计稿尺寸默认配置一致，无需该设置。  配置设计稿尺寸 默认 360.0 / 640.0 / 3.0setDesignWHD(_designW,_designH,_designD);步骤2// 在MainPageState build 调用MediaQuery.of(context)classMainPageStateextendsState<MainPage>{@overrideWidgetbuild(BuildContextcontext){// 在 MainPageState build 调用 MediaQuery.of(context)MediaQuery.of(context);returnnewScaffold(appBar:newAppBar(),);}}步骤3ScreenUtil.getInstance().screenWidthScreenUtil.getInstance().screenHeight//屏幕适配相关  ScreenUtil.getInstance().getWidth(size);//返回根据屏幕宽适配后尺寸（单位 dp or pt）ScreenUtil.getInstance().getHeight(size);//返回根据屏幕高适配后尺寸 （单位 dp or pt）ScreenUtil.getInstance().getWidthPx(sizePx);//sizePx 单位pxScreenUtil.getInstance().getHeightPx(sizePx);//sizePx 单位pxScreenUtil.getInstance().getSp(fontSize);//返回根据屏幕宽适配后字体尺寸

方案二、依赖context

//如果设计稿尺寸默认配置一致，无需该设置。  配置设计稿尺寸 默认 360.0 / 640.0 / 3.0setDesignWHD(_designW,_designH,_designD);ScreenUtil.getScreenW(context);//屏幕 宽ScreenUtil.getScreenH(context);//屏幕 高//屏幕适配相关  ScreenUtil.getScaleW(context,size);//返回根据屏幕宽适配后尺寸（单位 dp or pt）ScreenUtil.getScaleH(context,size);//返回根据屏幕高适配后尺寸 （单位 dp or pt）ScreenUtil.getScaleSp(context,size);//返回根据屏幕宽适配后字体尺寸

Flutter 数据存储  SpUtil

SpUtil : 单例"同步" SharedPreferences 工具类。

项目中为大家提供SpHelper，方便存取实体对象类。

// 存储SplashModel实体对象SplashModelmodel=newSplashModel();SpHelper.putObject(Constant.KEY_SPLASH_MODEL,model);// 获取SplashModel实体对象SplashModelmodel=SpHelper.getSplashModel();classSpHelper{// 存储Obj，T 用于区分存储类型staticvoidputObject<T>(Stringkey,Objectvalue){switch(T){caseint:SpUtil.putInt(key,value);break;casedouble:SpUtil.putDouble(key,value);break;casebool:SpUtil.putBool(key,value);break;caseString:SpUtil.putString(key,value);break;caseList:SpUtil.putStringList(key,value);break;default:SpUtil.putString(key,value==null?"":json.encode(value));break;}}staticSplashModelgetSplashModel(){String_splashModel=SpUtil.getString(Constant.KEY_SPLASH_MODEL);if(ObjectUtil.isNotEmpty(_splashModel)){MapuserMap=json.decode(_splashModel);returnSplashModel.fromJson(userMap);}returnnull;}}

主界面

启动页

侧滑Back

快速滚动到顶部

分类页面

国际化

主题色

我的       : Flutter开源库集合

GitHub : flutter_wanandroid

APK        :点击下载 v0.1.3

Android扫码下载APK:

flutter_wanandroid

最后，如果您觉得不错的话，来个Star吧！大家对该项目有好的意见或建议，欢迎反馈。反馈-->