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
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
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
},
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
接口请求&解析 repository
classWanRepository{Future>getBanner()async{BaseResp
baseResp=awaitDioUtil().request
(Method.get,WanAndroidApi.getPath(path:WanAndroidApi.BANNER));List
资源文件 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
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
方案二、依赖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
主界面
启动页
侧滑Back
快速滚动到顶部
分类页面
国际化
主题色
我的 : Flutter开源库集合
GitHub : flutter_wanandroid
APK :点击下载 v0.1.3
Android扫码下载APK:
flutter_wanandroid
最后,如果您觉得不错的话,来个Star吧!大家对该项目有好的意见或建议,欢迎反馈。反馈-->