flutter 学习整理
flutter
推荐使用 vscode 进行开发 ,下载一下插件,很好用
flutter 的状态管理 有很多:开源的代表有:flutter_redux, google的BLoc,scoped_model等,及闲鱼的fish-redux,但是我们现在都没用 暂时只用自带的setState来更新数据
flutter学习资源列表:
http://www.devio.org/2018/09/09/awesome-flutter/https://pub.dev/ 这是插件地址,需要用到哪些功能的插件可以在这上面找, 基本都开源的 可以直接看源码
编译打包:
1
2编译打包安卓工程:命令行运行 flutter build apk
编译打包ios工程:命令行运行 flutter build ios --release,然后进入ios工程进行archive遇到的一些问题:
1
2
3
4Container 中color属性不能和 decoration同时存在 会报错
padding和margin的值不能为负
listview 暂时没找到直接滚动到某个cell的方法
有些组件必须要在Material组件中才能使用(如果使用CupertinoPageScaffold要注意,Scaffold不会有问题)常用的一些Widget :
- iOS风格 Widget
import 'package:flutter/cupertino.dart';
- SafeArea 安全区域:比如iphone X 会有一个安全区域,SafeArea,让内容显示在安全的可见区域,可以避免一些屏幕有刘海或者凹槽的问题
- Container:相当于一个空白的view,可以设置padding和margin布局,可以设置阴影、圆角、边框、样式(decoration)等等,可以在里面放child
- Row/Column(Flexible、Expanded),Stack,ListView,GridView,GestureDetector(手势),Align,Text,Image,TextField(输入框),FlatButton(还有其他样式的button),Offstage(该Widget可根据条件来控制是否显示),BottomNavigationBar,ClipOval,SizedBox,IgnorePointer,ConstrainedBox等
- 获取设备屏幕相关的一些信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30// 设备方向 (portrait, landscape)
Orientation getDeviceOrientation(BuildContext context) {
MediaQueryData mediaQuery = MediaQuery.of(context);
return mediaQuery.orientation;
}
// 屏幕宽度
double screenWidth(BuildContext context) {
return MediaQuery.of(context).size.width;
}
// 屏幕高度
double screenHeight(BuildContext context) {
return MediaQuery.of(context).size.height;
}
// 状态栏高度
double statusBarHeight(BuildContext context) {
return MediaQuery.of(context).padding.top;
}
// 导航栏高度
double navBarHeight() {
return 44.0;
}
// 状态栏+导航栏高度
double statusAndNavBarHeight(BuildContext context) {
return statusBarHeight(context) + navBarHeight();
}
- 这是我们现在这个工程用到的一些插件:(安卓编译的时候要注意AndroidX的问题 ,如果项目不支持需要做处理:1.android项目升级到AndroidX 2.将用到的插件做降级处理(我们现在是这么处理的),现在我们用到的这些插件版本没注释的,都是可以正常编译的,注释掉的有些不行)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124# iOS 风格的图标
cupertino_icons: ^0.1.2
# 提示
fluttertoast: ^3.0.1
# web socket
web_socket_channel: ^1.0.9
# 网络相关
http: ^0.12.0+1
dio: ^2.1.0
connectivity: ^0.4.2
# 存储相关
shared_preferences: ^0.5.1+1
sqflite: ^1.1.3
# 图片/相册相关
image_picker: ^0.4.12+1
image_picker_saver: ^0.1.0
image_cropper: ^0.0.9
photo_manager: ^0.2.0
# 图片压缩
flutter_image_compress: ^0.3.1
# 网络图片缓存
cached_network_image: ^0.7.0
transparent_image: ^1.0.0
# 路径相关
path_provider: ^0.5.0+1
# 路由导航相关
fluro: ^1.4.0
# webview插件
flutter_webview_plugin: ^0.2.1+2
# 轮播图
flutter_swiper: ^1.1.6
# 选择器
flutter_picker: ^1.0.9
city_pickers: ^0.1.14
# 通知
event_bus: ^1.1.0
# 二维码生成和扫描
barcode_scan: ^0.0.8
qr_flutter: ^2.0.0+51
# cell侧滑
flutter_slidable: ^0.4.9
# 汉字转拼音
lpinyin: ^1.0.7
# 索引列表
azlistview: ^0.1.1
# 长按菜单
menu: ^0.1.3
# 请求权限 1.0.1
permission_handler: ^1.0.1
# 缓存管理
flutter_cache_manager: ^0.3.2
# 极光推送插件
jpush_flutter: ^0.0.11
# 双向进度条
flutter_range_slider: ^1.1.0
# 图表相关
circle_wheel_scroll: ^0.0.1+1
charts_flutter: ^0.6.0
# 录音
flutter_sound: ^1.4.0
# 其他
tuple: ^1.0.1
# 未使用
# intl: ^0.15.0
# flutter_localizations:
# sdk: flutter
# flutter_i18n: ^0.6.2
# flutter_section_table_view: ^1.0.3
# url_launcher: ^5.0.2
# 获取设备信息
# device_info: ^0.4.0+1
# 日历相关
# flutter_calendar: ^0.0.8
# flutter_umeng_analytics_fork: ^0.0.3
# flutter_wechat: ^0.1.5
# flutter_alipay: ^0.1.0
# flutter_cupertino_date_picker: ^0.3.0
# flutter_local_notifications: ^0.5.2
# qrcode_reader: ^0.4.4
# photo: ^0.2.0
# photo_view: ^0.2.2
# bottom_tab_bar:
# git: https://github.com/LiuC520/flutter_bottom_tab_bar.git
# firebase_database: ^2.0.2
# 相机
# camera: ^0.4.3+2
# 图片下载
# image_downloader 0.14.1
# bloc
# flutter_bloc: ^0.10.1
# waveprogressbar_flutter: "^0.1.1"
# flutter_circular_chart: ^0.1.0
# 地图
# flutter_map: ^0.5.0+1
# amap_base: ^0.3.5
# amap_base:
# git:
# url: https://github.com/yohom/amap_base_flutter.git
# ref: android-support-library
# path: base
# amap_base_location:
# git:
# url: https://github.com/yohom/amap_base_flutter.git
# ref: android-support-library
# path: location
# 定位
amap_location: ^0.2.0
# location: ^2.0.0
# amap_base_search:
# git:
# url: https://github.com/yohom/amap_base_flutter.git
# ref: android-support-library
# path: search
# wifi 信息获取
# wifi: ^0.1.5
# get_ip: ^0.3.0
# ios_network_info: ^0.1.2
# wifi_ip: ^0.0.1
# wifi_ip:
# git:
# url: https://github.com/luanvotrongdev/get_wifi_info.git
# flutter_circular_chart: ^0.1.0
# 折线图
# flutter_sparkline: ^0.1.0