Flutter学习指南App, 一起来玩Flutter吧~

太过爱你忘了你带给我的痛 2023-07-03 06:27 4阅读 0赞

> Flutter是谷歌的移动UI框架，可以快速在iOS、Android、Web和PC上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。同时它也是构建未来的Google Fuchsia应用的主要方式。

从事移动开发这么多年, 各种跨平台技术层出不穷.从最初的基于web的phonegap/cordova到后来的原生组件渲染react-native/weex,再到现在的flutter通过自己开发了一套原生控件渲染,可以说用户体验已经和原生开发相差无几了.

## 如何入门Flutter ##

*  1.了解Android/IOS基础知识.包括平台特性、项目结构等.
 *  2.了解Dart基础语法知识.可点击[Dart中文网][Dart]进行学习.
 *  3.学习Flutter基础知识.包括组件使用、包管理、原生交互等.可点击[Flutter中文网][Flutter]进行学习.

## Flutter学习指南 ##

> 为了能够方便大家快速学习Flutter, 我简单写了一个Flutter学习指南App,包含众多组件和插件的使用, 是学习和体验flutter组件的小Demo. [项目地址: https://github.com/xuexiangjys/FlutterSample/tree/master/flutter\_learn][https_github.com_xuexiangjys_FlutterSample_tree_master_flutter_learn]

#### 组件 ####

[Animation(动画)][Animation]、[AppBar(标题)][AppBar]、[BottomNavigationBar(底部导航栏)][BottomNavigationBar]、 [Button(按钮)][Button]、 [CardView(卡片)][CardView]、[Containter(容器)][Containter]、 [Control(控制开关)][Control]、 [CustomWidget(自定义组件)][CustomWidget]、[Dialog(对话框)][Dialog]、[Drag(拖拽)][Drag]、[Drawer(侧滑菜单)][Drawer]、 [Form(表单)][Form]、[Gesture(手势)][Gesture]、[Image(图片)][Image]、[Input(输入框)][Input]、[Layout(布局)][Layout]、 [Notification(冒泡通知)][Notification]、[Progress(进度条)][Progress]、[ScrollView(列表滚动)][ScrollView]、[Tab(选项卡)][Tab]、[Text(文字)][Text]

#### 工具 ####

[DeviceInfo(设备信息)][DeviceInfo]、[EventBus(事件总线)][EventBus]、[JPush(极光推送)][JPush]、[JsonSerialize(序列化)][JsonSerialize]、[MMKV(键值对保存)][MMKV]、[Navigator(导航路由)][Navigator]、[Net(网络请求)][Net]、[Provider(数据共享)][Provider]、[SharedPreferences(持久化)][SharedPreferences]、[Sqlite(数据库)][Sqlite]、[Toast(吐司提示)][Toast]

#### 第三方插件 ####

[DatePicker(时间选择)][DatePicker]、[EasyRefresh(下拉加载上拉刷新)][EasyRefresh]、[IconFont(字体图标)][IconFont]、 [ImagePicker(单图片选择)][ImagePicker]、[MultiImagePicker(多图片选择)][MultiImagePicker]、[Spinkit(loading动画)][Spinkit_loading]、 [Swiper(轮播图)][Swiper]、[Web(网页加载)][Web]

--------------------

## 演示 ##

![在这里插入图片描述][20200203192513615.gif]

## 应用下载 ##

> 蒲公英下载的密码: xuexiangjys

![在这里插入图片描述][20200203193050765.png]

## 应用截图 ##

![在这里插入图片描述][2020020319260295.png] ![在这里插入图片描述][20200203192613481.png] ![在这里插入图片描述][20200203192626261.png] ![在这里插入图片描述][20200203192627192.png] ![在这里插入图片描述][20200203192656381.png] ![在这里插入图片描述][20200203192722127.png] ![在这里插入图片描述][20200203192733652.png] ![在这里插入图片描述][20200203192735347.png] ![在这里插入图片描述][20200203192753273.png]

## 依赖库说明 ##

*  [dio (非常好用的网络请求库)][dio]
 *  [FlutterToast][]
 *  [mmkv\_flutter][mmkv_flutter]
 *  [shared\_preferences][shared_preferences]
 *  [url\_launcher][url_launcher]
 *  [image\_picker (图片选择)][image_picker]
 *  [sqflite (sqlite数据库)][sqflite _sqlite]
 *  [fluro (页面路由神器)][fluro]
 *  [flutter\_webview\_plugin (网页加载)][flutter_webview_plugin]
 *  [flutter\_spinkit (loading加载动画)][flutter_spinkit _loading]
 *  [event\_bus (事件工具)][event_bus]
 *  [flutter\_swiper (轮播图组件)][flutter_swiper]
 *  [flutter\_easyrefresh (刷新组件)][flutter_easyrefresh]
 *  [provider (非常好用的数据共享工具)][provider]
 *  [flutter\_datetime\_picker (时间选择器)][flutter_datetime_picker]
 *  [multi\_image\_picker (多图片选择)][multi_image_picker]
 *  [jpush\_flutter (极光推送)][jpush_flutter]
 *  [flutter\_bugly (bugly统计)][flutter_bugly _bugly]
 *  [device\_info (设备信息)][device_info]

## 非常感谢 ##

*  [阿里巴巴的入门级项目 flutter-go][flutter-go]
 *  [flutter实战][flutter]
 *  [flutter插件平台][flutter 1]

## 联系方式 ##

![在这里插入图片描述][20200203194020248.jpg]

## 微信公众号 ##

![在这里插入图片描述][20200203194032437.jpg]

[Dart]: https://www.dartcn.com/
[Flutter]: https://flutterchina.club/
[https_github.com_xuexiangjys_FlutterSample_tree_master_flutter_learn]: https://github.com/xuexiangjys/FlutterSample/tree/master/flutter_learn
[Animation]: https://github.com/xuexiangjys/FlutterSample/tree/master/flutter_learn/lib/page/widget/anim
[AppBar]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/appbar.dart
[BottomNavigationBar]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/bottom_navigation_bar.dart
[Button]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/button.dart
[CardView]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/cardview.dart
[Containter]: https://github.com/xuexiangjys/FlutterSample/tree/master/flutter_learn/lib/page/widget/contain
[Control]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/control.dart
[CustomWidget]: https://github.com/xuexiangjys/FlutterSample/tree/master/flutter_learn/lib/page/widget/custom
[Dialog]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/dialog.dart
[Drag]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/drag.dart
[Drawer]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/drawer.dart
[Form]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/form.dart
[Gesture]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/gesture.dart
[Image]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/image.dart
[Input]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/input.dart
[Layout]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/layout
[Notification]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/notification.dart
[Progress]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/progress.dart
[ScrollView]: https://github.com/xuexiangjys/FlutterSample/tree/master/flutter_learn/lib/page/widget/scrollview
[Tab]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/tab.dart
[Text]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/widget/text.dart
[DeviceInfo]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/device_info.dart
[EventBus]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/event_bus.dart
[JPush]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/jpush.dart
[JsonSerialize]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/json_serialize.dart
[MMKV]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/mmkv.dart
[Navigator]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/navigator.dart
[Net]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/net.dart
[Provider]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/provider.dart
[SharedPreferences]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/shared_preferences.dart
[Sqlite]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/sqlite.dart
[Toast]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/utils/toast.dart
[DatePicker]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/date_picker.dart
[EasyRefresh]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/easy_refresh.dart
[IconFont]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/iconfont.dart
[ImagePicker]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/image_picker.dart
[MultiImagePicker]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/multi_image_picker.dart
[Spinkit_loading]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/spinkit.dart
[Swiper]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/swiper.dart
[Web]: https://github.com/xuexiangjys/FlutterSample/blob/master/flutter_learn/lib/page/expand/web.dart
[20200203192513615.gif]: https://img-blog.csdnimg.cn/20200203192513615.gif
[20200203193050765.png]: https://img-blog.csdnimg.cn/20200203193050765.png
[2020020319260295.png]: https://img-blog.csdnimg.cn/2020020319260295.png
[20200203192613481.png]: https://img-blog.csdnimg.cn/20200203192613481.png
[20200203192626261.png]: https://img-blog.csdnimg.cn/20200203192626261.png
[20200203192627192.png]: https://img-blog.csdnimg.cn/20200203192627192.png
[20200203192656381.png]: https://img-blog.csdnimg.cn/20200203192656381.png
[20200203192722127.png]: https://img-blog.csdnimg.cn/20200203192722127.png
[20200203192733652.png]: https://img-blog.csdnimg.cn/20200203192733652.png
[20200203192735347.png]: https://img-blog.csdnimg.cn/20200203192735347.png
[20200203192753273.png]: https://img-blog.csdnimg.cn/20200203192753273.png
[dio]: https://pub.dev/packages/dio
[FlutterToast]: https://pub.dev/packages/fluttertoast
[mmkv_flutter]: https://pub.dev/packages/mmkv_flutter
[shared_preferences]: https://pub.dev/packages/shared_preferences
[url_launcher]: https://pub.dev/packages/url_launcher
[image_picker]: https://pub.dev/packages/image_picker
[sqflite _sqlite]: https://pub.dev/packages/sqflite
[fluro]: https://pub.dev/packages/fluro
[flutter_webview_plugin]: https://pub.dev/packages/flutter_webview_plugin
[flutter_spinkit _loading]: https://pub.dev/packages/flutter_spinkit
[event_bus]: https://pub.dev/packages/event_bus
[flutter_swiper]: https://pub.dev/packages/flutter_swiper
[flutter_easyrefresh]: https://pub.dev/packages/flutter_easyrefresh
[provider]: https://pub.dev/packages/provider
[flutter_datetime_picker]: https://pub.dev/packages/flutter_datetime_picker
[multi_image_picker]: https://pub.dev/packages/multi_image_picker
[jpush_flutter]: https://pub.dev/packages/jpush_flutter
[flutter_bugly _bugly]: https://pub.dev/packages/flutter_bugly
[device_info]: https://pub.dev/packages/device_info
[flutter-go]: https://github.com/alibaba/flutter-go
[flutter]: https://book.flutterchina.club/
[flutter 1]: https://pub.dev/flutter/packages
[20200203194020248.jpg]: https://img-blog.csdnimg.cn/20200203194020248.jpg
[20200203194032437.jpg]: https://img-blog.csdnimg.cn/20200203194032437.jpg