Flutter开发教程
关注
分享
扫一扫
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。Flutter的热重载可帮助您快速地进行测试、构建UI、添加功能并更快地修复错误。在iOS和Android模拟器或真机上可以在亚秒内重载，并且不会丢失状态。
沐雨07
Keep Learning!
展开
-
Flutter开发之认识Flutter（一）
内容来自：Flutter中文网Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。快速开发毫秒级的热重载，修改后，您的应用界面会立即更新。使用丰富的、完全可定制的widget在几分钟内构建原生界面。富有表现力和...原创 2019-06-11 15:20:58 · 470 阅读 · 1 评论 -
Flutter开发之认识Flutter（二）
在第一篇大概了解到Flutter是干什么的，属于跨平台开发，跟之前的RN 属于同一类。下面继续了解Flutter的起源、Flutter和其他平台的对比、Flutter开发语言Dart。1.Flutter的起源https://book.flutterchina.club2.Flutter简介https://book.flutterchina.club/chapter1/mobile_deve...原创 2019-06-11 15:46:53 · 413 阅读 · 1 评论 -
Flutter开发之搭建Flutter开发环境（三）
搭建Flutter开发环境的文档。我使用的是Mac开发，环境搭建相对简单些。https://book.flutterchina.club/chapter1/install_flutter.html入门: 在macOS上搭建Flutter开发环境https://flutterchina.club/get-started/install/...原创 2019-06-11 15:52:32 · 925 阅读 · 2 评论 -
Flutter之第一个 Flutter App（四）
在macOS上搭建Flutter开发环境目录一、安装Flutter SDK二、下载安装Android Studio三、下载安装最新的Xcode四、下载安装VS Code五、初次体验 Flutter一、安装Flutter SDK下载Flutter SDKhttps://flutter.dev/docs/get-started/install/macos#下载的flutter...原创 2019-06-15 10:24:59 · 877 阅读 · 3 评论 -
Flutter开发之爬坑集合（五）
Flutter基础篇（4）-- Flutter填坑全面总结https://www.jianshu.com/p/22675c1632dcFlutter卡在Running “flutter packages get” in XXX的解决办法PS：把你 flutter/bin/cache/lockfile 这个东西删了。重启 VS Studioexport PUB_HOSTED_URL=http...原创 2019-06-15 18:05:54 · 3976 阅读 · 1 评论 -
Flutter开发之iOS真机调试（六）
一、首先你要有个开发者账号。二、真机数据线直连Mac 电脑，并保持解锁状态。三、选择真机设备运行工程。VS Code 终端执行lxx-Mac-mini:uuuu suning$ flutter runMore than one device connected; please specify a device with the '-d <deviceId>' flag, or...原创 2019-06-17 10:42:03 · 14655 阅读 · 4 评论 -
Flutter开发之路由跳转与传参（七）
参考练习:https://book.flutterchina.club/chapter2/flutter_router.html路由(Route)在移动开发中通常指页面（Page），这跟web开发中单页应用的Route概念意义是相同的，Route在Android中通常指一个Activity，在iOS中指一个ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管...原创 2019-06-18 11:14:42 · 1753 阅读 · 1 评论 -
Flutter开发之MVC设计模式:新建文件与导入文件（八）
在前面的例子中,所有的代码和路由都是在main.dart 下写的.我们知道不管后台还是前端,不管是Android 还是iOS开发,都是基于MVC设计模式开发的.那么flutter是怎么使用MVC设计模式的尼?一切皆dart,一起皆widget.M:数据模型V:一些视图或者视图组件C:我们习惯称之为页面或者路由一般我们把这三种分别建一个对应的类文件来管理....原创 2019-06-18 16:09:44 · 2219 阅读 · 1 评论 -
Flutter开发之 VS Code的编辑器技巧
VS Code 代码格式化Windows: Shift + Alt + FMac平台: Shift + Option + F原创 2019-06-18 19:17:36 · 2531 阅读 · 1 评论 -
Flutter开发之图片加载（九）
移动开发少不了显示图片，今天就介绍 fluter中如何加载图片，图片加载一般分为本地加载和网络加载。本地加载原创 2019-06-19 17:05:29 · 882 阅读 · 1 评论 -
Flutter开发之Debug调试（十）
之前一直在VS Code 下的终端执行 flutter run -d 设备ID 来运行flutter app，但是这样是无法断点调试的。即使你打了断点，也不起作用。要想让断点调试起作用，需要在 Debug 模式下运行flutter app。如图在VS Code 打开的工程页面：选择左边的 “昆虫”加斜杠的按钮；出现图中 2 和 3；点击 2 的 Debug右边的开始按钮；...原创 2019-06-20 11:20:50 · 7546 阅读 · 5 评论 -
Flutter开发之常用插件安装与卸载（11）
和大多数 IDE 一样，VSCode 也有一个扩展和主题市场,包含了数以千计质量不同的插件。VS Code 左侧菜单栏处箭头 1 处：打开Extensions MarketPlace使用搜索功能 关键词：vscode-plugin左侧下栏是搜索结果，点击插件，右侧可以看到该插件的基本信息。卸载在已安装的插件一栏下选择插件，点击卸载即可。常用插件运行调试插件Dar...原创 2019-06-20 11:59:36 · 7728 阅读 · 1 评论 -
Flutter开发之诊断布局调试工具：inspector（12）
一、工具启动入口Android Studio工具启动入口，点击Android Studio窗口右侧的垂直按钮切换检查器的显示。二、Flutter inspectorinspector是用于可视化和浏览Flutter这些widget树的强大工具.主要用来解决：理解现有的布局诊断布局问题...原创 2019-06-21 18:02:05 · 5173 阅读 · 1 评论 -
Flutter开发之AndroidStudio在安卓模拟器运行flutterApp（13）
AndroidStudio在安卓模拟器运行flutterApp原创 2019-06-24 11:55:53 · 12973 阅读 · 1 评论 -
Flutter开发之Text的overflow属性不生效（14）
我在使用 Text 控件时，由于文字太多，需要省略显示。设置overflow: TextOverflow.ellipsis没有效果，尾部显示还多了黄色相间的胶带色块。应该是：提示Text的布局边界溢出了。解决方法：用Container 包Text 设置Container宽度的方式解决了。Container( padding: EdgeInsets.only(top: 0), ...原创 2019-06-27 20:02:34 · 11345 阅读 · 1 评论 -
Flutter开发之布局-1-Column（15）
布局对于移动开发来说，是开发页面的第一步，只有掌握了布局，才能做到心里明白，才能更好、更巧妙的布局。我iOS 一点点的从demo 实践中学习Flutter布局。避免不了从iOS 的布局角度尝试，但是发现Flutter 更iOS 区别很大，Flutter 的布局和安卓、H5的布局非常相似。我只能一点一点的琢磨学习。根据一篇写的不错的文章，加深理解。Column1、mainAxisAlignmen...转载 2019-06-27 20:28:40 · 422 阅读 · 1 评论 -
Flutter开发之布局-2-row（16）
1、mainAxisAlignment：主轴布局方式，row主轴方向是水平方向默认值：MainAxisAlignment.start：start ，沿着主轴方向(水平方向)顶部对齐；end，沿着主轴方向(水平方向)底部对齐；center，沿着主轴方向(水平方向)居中对齐；spaceBetween ，沿着主轴方向(水平方向)平分剩余空间；spaceAround，把剩...转载 2019-06-28 14:44:31 · 332 阅读 · 1 评论 -
Flutter开发之布局-3-center（17）
Center 居中的布局只能有一个chlid，但是可以用container包含好多子child，继承自Align。用于将其子项与其自身对齐，并根据子级的大小自行调整大小。如果它的尺寸受到约束且[widthFactor]和[heightFactor]为空，则此窗口小部件将尽可能大。 如果维度不受约束且相应的大小因子为null，则窗口小部件将匹配其在该维度中的子项大小（其实就是子view的宽高就...转载 2019-06-28 14:49:02 · 187 阅读 · 1 评论 -
Flutter开发之布局-4-container（18）
container 比较像iOS 的View 几乎有所有的布局属性用来放置widget的容器，有padding、margin、位置、大小等参数。具体有以下参数：alignment ：对齐方式 Alignmentpadding：内边距 EdgeInsetsmargin：外边距 EdgeInsetscolor：decoration：foregroundDecoration:width...转载 2019-06-28 15:00:37 · 505 阅读 · 1 评论 -
Flutter开发之Stack组件（层叠布局）（19）
flutter层叠布局Stack，Positioned 定位原创 2019-07-01 16:39:00 · 1318 阅读 · 1 评论 -
Flutter开发之GridView组件（20）
GridView原创 2019-07-01 19:20:51 · 703 阅读 · 1 评论 -
Flutter开发之名篇及demo收录
Flutter GridView：https://www.jianshu.com/p/fb3bf633ee12原创 2019-07-01 20:14:30 · 354 阅读 · 2 评论 -
Flutter开发之ListView组件（21）
ListView组件原创 2019-07-02 10:13:13 · 1440 阅读 · 1 评论 -
Flutter开发之Android应用打包发布（22）
Flutter的菜鸟教程二十七:Flutter应用打包发布https://blog.youkuaiyun.com/duo_shine/article/details/81382757原创 2019-07-08 10:59:14 · 262 阅读 · 1 评论 -
Flutter开发之iOS应用打包发布（23）
安卓开发者如何使用Flutter打包IOS应用https://www.jianshu.com/p/a052cbfd12fa对于iOS 开发者就比较简单了，很 iOS 原生应用打包发布一样的原创 2019-07-08 11:01:16 · 4497 阅读 · 1 评论 -
Flutter开发之WebView加载网页（24）
WebView 是一个重要的控件，它用来加载网页、HTML、文件等。它的使用也很简单。今天就学习下Flutter下的WebView如何加载网页。使用教程地址：https://pub.flutter-io.cn/packages/flutter_webview_plugin#-installing-tab-安装flutter_webview_plugin插件Add this to your ...原创 2019-07-09 10:53:48 · 1603 阅读 · 1 评论 -
Flutter开发之WebView无法加载HTTP请求（25）
I/chromium( 3847): [INFO:CONSOLE(0)] "Mixed Content: The page at 'https://www.baidu.com/' was loaded over HTTPS, but requested an insecure image 'http://127.0.0.1:59468/?data=fCMxIzsjMi8xLzUjLSMyIzsjT...原创 2019-07-10 11:19:30 · 7428 阅读 · 1 评论 -
Flutter开发之HTTP网络请求：HttpClient（26）
本文根据 在Flutter中发起HTTP网络请求 编写对于入门的同学来说，使用的是用dart io中的HttpClient发起的请求，能让我快速接入HTTP网络请求。但HttpClient本身功能较弱，很多常用功能都不支持。我们建议您使用dio 来发起网络请求，它是一个强大易用的dart http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传...原创 2019-07-10 15:59:58 · 5328 阅读 · 1 评论 -
Flutter开发之HTTP网络请求：Http库（27）
Flutter开发之HTTP网络请求：Http库原创 2019-07-10 18:03:06 · 898 阅读 · 2 评论 -
Flutter开发之HTTP网络请求:dio库（28）
Flutter开发之HTTP网络请求： dio库原创 2019-07-11 11:10:47 · 1523 阅读 · 1 评论 -
Flutter开发之JSON及序列化（29）
本文介绍了使用JSON的两个常规策略：手动序列化和反序列化通过代码生成自动序列化和反序列化不同的项目具有不同的复杂度和场景。对于较小项目，使用代码生成器可能会过度。对于具有多个JSON model的复杂应用程序，手动序列化可能会比较重复，并会很容易出错。小项目手动序列化手动JSON序列化是指使使用dart:convert中内置的JSON解码器。它将原始JSON字符串传递给JSON.de...原创 2019-07-15 19:24:17 · 590 阅读 · 1 评论 -
Flutter开发之倒计时/定时器（30）
倒计时/定时器在移动应用开发中比较常见的功能，比如启动时的广告倒计时、比如弹框倒计时、比如定时1秒后跳转、获取验证码等等。今天就认识一下Flutter中的倒计时/定时器。一般有两种场景：我只需要你在指定时间结束后回调告诉我。回调只需要一次。我需要你在指定时间结束后回调告诉我。回调可能多次。Timer 类存在于dart:async内，所以我们需要先导入import 'dart:async...原创 2019-07-17 17:32:47 · 6194 阅读 · 0 评论 -
Flutter开发之PageView指示器（31）
移动开发中圆点指示器给用户很好的用户体验，iOS 有自己的控件UIPageControl 方便快捷实现。既然想用Flutter代替，就想着如何实现UIPageControl 类似的功能。这篇文章就在前辈的基础上，实战一下PageView指示器。来实现圆点指示器的功能。（文章结尾会贴上参考的文章）先看一下效果完整代码：import 'dart:math';import 'package:...原创 2019-07-18 16:08:16 · 1234 阅读 · 1 评论 -
Flutter开发之数据存储-1-SharedPreferences（32）
前面讲了很多控件的文章，网络部分也讲了3篇了，图片部分也已经讲过。数据存储部分在移动开发中是非常重要的部分，无论是一些轻量级的数据（如用户信息、APP配置信息等）还是把需要长期存储的数据写入本地文件或者Sqlite3。都离不开数据存储。今天就练习一下数据存储-SharedPreferences的使用。SharedPreferences在Flutter中本身并没有内置SharedPreferen...原创 2019-07-18 17:02:18 · 937 阅读 · 2 评论 -
Flutter开发之数据存储-2-文件存储（33）
数据存储部分在移动开发中是非常重要的部分，无论是一些轻量级的数据（如用户信息、APP配置信息等）还是把需要长期存储的数据写入本地文件或者Sqlite3。都离不开数据存储，上一篇SharedPreferences的使用，今天就练习一下文件存储-写入本地文件。文件存储这三种存储方式Flutter本身都没有内置，不过好在官方提供了第三方库，操作文件同样我们也需要像SharedPreference...原创 2019-07-19 15:45:06 · 1362 阅读 · 1 评论 -
Flutter开发之数据存储-3-数据库存储（34）
上一篇讲了文件存储path_provider的使用，今天接着学习第三种数据存储方式：Sqlite3。在Flutter中的数据库叫Sqflite跟原生安卓的Sqlite叫法不一样。我们来看下Sqflite官方对它的解释说明：SQLite plugin for Flutter. Supports both iOS and Android. Support transactions and b...原创 2019-07-19 16:20:10 · 1607 阅读 · 5 评论 -
Flutter开发之ListView下拉刷新&上拉加载更多（35）
在Flutter开发之ListView组件（21） 文章中，我们了解了ListView组件的基本使用。但是数据比较少，没有涉及分页加载。而实际开发中，下拉刷新和分页加载几乎是所有APP的标配。在iOS 开发中我们通过MJRefresh 给UITableView添加mj_header和mj_footer刷新事件来触发下拉刷新和分页加载实现的。那么我们看一下Flutter中的下拉刷新跟上拉加载更多是如...原创 2019-07-22 20:17:27 · 2264 阅读 · 1 评论 -
Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）
在Flutter开发之ListView下拉刷新&上拉加载更多（35） 中我们实现了下拉刷新、上拉分页加载的功能。但是使用起来非常不方便，且不满一屏时难以处理。今天介绍ListView使用第三方pull_to_refresh 来实现下拉刷新、上拉分页加载。添加 pull_to_refresh 依赖官方文档：https://pub.dev/packages/pull_to_refresh...原创 2019-07-23 15:33:22 · 3291 阅读 · 6 评论 -
Flutter开发之ListView使用第三方flutter_refresh加载更多（37）
在Flutter开发之ListView使用第三方pull_to_refresh加载更多（36） 中我们实现了下拉刷新、上拉分页加载的功能。今天介绍另一个ListView使用第三方flutter_refresh 来实现下拉刷新、上拉分页加载。添加 flutter_refresh 依赖官方文档：https://pub.flutter-io.cn/packages/flutter_refresh#-...原创 2019-07-23 16:14:27 · 2571 阅读 · 1 评论 -
Flutter开发之ListView添加HeaderView和FooterView（38）
参考文章：Flutter ListView如何添加HeaderView和FooterViewflutter的ListView添加HeaderView和FooterView有两种方式：使用CustomScrollView + SliverToBoxAdapter + SliverList；参考RecyclerView的实现方式，定义不同类型的Item，如果想保持HeaderViewItem滚...原创 2019-07-23 17:32:38 · 6629 阅读 · 1 评论