本项目包含启动页，引导页，主题色，国际化，Bloc，RxDart。拥有较好的项目结构，比较规范的代码。 App拥有精致的UI界面，统一的交互，侧滑退出，列表和Web界面均提供快速滚动至顶部功能。
由于在国内访问Flutter有时可能会受到限制，clone项目后，请勿直接packages get，建议运行如下目录行：
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
flutter packages get
1、主页新增Github Trending，新版本如未显示，请下拉刷新。
2、新增热门Tab，掘金热门文章！
3、重构HomePage。
APK:点击下载 v0.1.6
- |--lib
- |-- blocs (bloc相关)
- |-- common (常用类，例如常量Constant)
- |-- data (网络数据层)
- |-- db (数据库)
- |-- event (事件类)
- |-- models (实体类)
- |-- res (资源文件，string，colors，dimens，styles)
- |-- ui (界面相关page，dialog，widgets)
- |-- utils (工具类)
- |--data
- |-- api (url字段)
- |-- net (单例DioUtil)
- |-- protocol (请求与返回实体类)
- |-- repository (接口请求&解析)
class WanAndroidApi {
/// 首页banner http://www.wanandroid.com/banner/json
static const String BANNER = "banner";
static const String USER_REGISTER = "user/register"; //注册
static const String USER_LOGIN = "user/login"; //登录
static const String USER_LOGOUT = "user/logout"; //退出
// 拼接url
static String getPath({String path: '', int page, String resType: 'json'}) {
StringBuffer sb = new StringBuffer(path);
if (page != null) {
sb.write('/$page');
}
if (resType != null && resType.isNotEmpty) {
sb.write('/$resType');
}
return sb.toString();
}
}
class LoginReq {
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,
};
@override
String toString() {
StringBuffer sb = new StringBuffer('{');
sb.write("\"username\":\"$username\"");
sb.write(",\"password\":$password");
sb.write('}');
return sb.toString();
}
}
class WanRepository {
Future<List<BannerModel>> getBanner() async {
BaseResp<List> baseResp = await DioUtil().request<List>(
Method.get, WanAndroidApi.getPath(path: WanAndroidApi.BANNER));
List<BannerModel> bannerList;
if (baseResp.code != Constant.STATUS_SUCCESS) {
return new Future.error(baseResp.msg);
}
if (baseResp.data != null) {
bannerList = baseResp.data.map((value) {
return BannerModel.fromJson(value);
}).toList();
}
return bannerList;
}
}
- |--res
- |-- colors.dart
- |-- dimens.dart
- |-- strings.dart
- |-- styles.dart
class Colours {
static const Color app_main = Color(0xFF666666);
static const Color text_dark = Color(0xFF333333);
static const Color text_normal = Color(0xFF666666);
static const Color text_gray = Color(0xFF999999);
}
class Dimens {
static const double font_sp12 = 12;
static const double font_sp14 = 14;
static const double font_sp16 = 16;
static const double gap_dp5 = 5;
static const double gap_dp10 = 10;
}
class Ids {
static const String 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: '主頁',
}
}
};
class TextStyles {
static TextStyle listTitle = TextStyle(
fontSize: Dimens.font_sp16,
color: Colours.text_dark,
fontWeight: FontWeight.bold,
);
static TextStyle listContent = TextStyle(
fontSize: Dimens.font_sp14,
color: Colours.text_normal,
);
static TextStyle listExtra = TextStyle(
fontSize: Dimens.font_sp12,
color: Colours.text_gray,
);
}
// 间隔
class Gaps {
// 水平间隔
static Widget hGap5 = new SizedBox(width: Dimens.gap_dp5);
static Widget hGap10 = new SizedBox(width: Dimens.gap_dp10);
// 垂直间隔
static Widget vGap5 = new SizedBox(height: Dimens.gap_dp5);
static Widget vGap10 = new SizedBox(height: Dimens.gap_dp10);
}
fluintl 是一个为应用提供国际化的库，可快速集成实现应用多语言。该库封装了一个国际化支持类，通过提供统一方法getString(id)获取字符串。
// 在MyApp initState配置多语言资源
setLocalizedValues(localizedValues); //配置多语言资源
// 在MaterialApp指定localizationsDelegates和supportedLocales
MaterialApp(
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.0
setDesignWHD(_designW,_designH,_designD);
步骤 2
// 在MainPageState build 调用MediaQuery.of(context)
class MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
// 在 MainPageState build 调用 MediaQuery.of(context)
MediaQuery.of(context);
return new Scaffold(
appBar: new AppBar(),
);
}
}
步骤 3
ScreenUtil.getInstance().screenWidth
ScreenUtil.getInstance().screenHeight
//屏幕适配相关
ScreenUtil.getInstance().getWidth(size); //返回根据屏幕宽适配后尺寸（单位 dp or pt）
ScreenUtil.getInstance().getHeight(size); //返回根据屏幕高适配后尺寸 （单位 dp or pt）
ScreenUtil.getInstance().getWidthPx(sizePx); //sizePx 单位px
ScreenUtil.getInstance().getHeightPx(sizePx); //sizePx 单位px
ScreenUtil.getInstance().getSp(fontSize); //返回根据屏幕宽适配后字体尺寸
方案二、依赖context
//如果设计稿尺寸默认配置一致，无需该设置。 配置设计稿尺寸 默认 360.0 / 640.0 / 3.0
setDesignWHD(_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实体对象
SplashModel model = new SplashModel();
SpHelper.putObject(Constant.KEY_SPLASH_MODEL, model);
// 获取SplashModel实体对象
SplashModel model = SpHelper.getSplashModel();
class SpHelper {
// 存储Obj，T 用于区分存储类型
static void putObject<T>(String key, Object value) {
switch (T) {
case int:
SpUtil.putInt(key, value);
break;
case double:
SpUtil.putDouble(key, value);
break;
case bool:
SpUtil.putBool(key, value);
break;
case String:
SpUtil.putString(key, value);
break;
case List:
SpUtil.putStringList(key, value);
break;
default:
SpUtil.putString(key, value == null ? "" : json.encode(value));
break;
}
}
static SplashModel getSplashModel() {
String _splashModel = SpUtil.getString(Constant.KEY_SPLASH_MODEL);
if (ObjectUtil.isNotEmpty(_splashModel)) {
Map userMap = json.decode(_splashModel);
return SplashModel.fromJson(userMap);
}
return null;
}
}
① 感谢鸿洋大佬提供的开源api
② 界面参考gitme
③ Github Trending Api
- Dart常用工具类库common_utils
该库包含TimerUtil（倒计时，定时任务），TimelineUtil（时间轴），DateUtil（日期格式化），RegexUtil（正则验证手机号，身份证，邮箱等等），RegexUtil（正则验证手机号，身份证，邮箱等等），NumUtil（保留x位小数, 精确加、减、乘、除, 防止精度丢失），MoneyUtil（元转分，分转元），ObjectUtil（判空），LogUtil（简单封装打印日志）。
如果你有不错的纯dart工具类或对已有对工具类有更好的优化建议，欢迎PR，大家一起维护～ - Flutter常用工具类库flustars
该库包含SpUtil（单例"同步" SharedPreferences 工具类），ScreenUtil（屏幕适配），WidgetUtil（Widget渲染监听，获取Widget宽高，在屏幕上的坐标）。
如果你有不错的Flutter工具类或对已有对工具类有更好的优化建议，欢迎PR，大家一起维护～ - 汉字转拼音库lpinyin
- 国际化/多语言库fluintl
- UI组件库flukit
- 网络请求dio
- 图片加载cached_network_image
- 上拉加载和下拉刷新pull_to_refresh
- url_launcher
- 点赞效果LikeButton
- 安卓webview增加滚动监听webview_flutter
- 城市列表azlistview
Q1：Flutter国际化系统切换iOS不生效问题？
A1：在Xcode项目Localizations下添加支持语言即可，原文。