![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter:从入门到实践
学完即用,跨平台框架的高效上手方案
优惠券已抵扣
余额抵扣
还需支付
¥49.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
持续学习的工程师
Android/Java工程师,硕士研究生毕业。目前主要的研究内容是Java、数据算法、架构相关等。希望能够认识更多热爱技术的同学。《MtAndroid开发手册》和《MtJava开发手册》作者,某些开源库作者。
展开
-
开篇:迎合未来主流趋势,把握新技术主动权
移动开发的前方突破口在哪里?小团队如何面向未来做技术选型?想要独立开发一个产品,能不能做到省心省力?我用两个关键词来回答这些问题:跨平台、Flutter。背景最近,Flutter 在前端和移动开发圈里引起了不小的热度,阮一峰老师也专门发表了一篇博文。因为,谷歌官方正式宣布 Flutter 全面支持多平台,包括移动平台 Android/iOS、Web( 新发布 )、桌面 PC 平台(内...原创 2020-09-22 12:23:03 · 807 阅读 · 0 评论 -
第 1-1 课:为什么要掌握 Flutter?
移动开发技术手段从原始的原生应用开发,到 Google 和 Apple 各自推出新的语言 Kotiln、Swift,然后又发展到各种跨平台Hybrid App 开发,如 React Native、Weex、小程序等等。不过这些方案或多或少都有一些局限性和缺点,于是 Google 推出了新的跨平台移动应用开发技术:Flutter。为什么说 Flutter 将是未来的主流跨平台开发框架?Googl...原创 2020-09-22 12:23:01 · 753 阅读 · 0 评论 -
第 1-2 课:Dart 语言基础
学习一门编程语言,首页要了解它的历史和特点。Dart 是 Google 公司推出的编程语言,于 2011 年就已经亮相了。Dart 也是一门面向对象的语言,语法和 Java、C、JavaScript 很像。所以会 Java 语言,学习 Dart 一般会快一些。Dart 里所有的类都可以看成是对象,是单继承,动态类语言。可以进行多平台开发,我们的主角 Flutter 就是基于 Dart 语言编写的...原创 2020-09-22 12:22:59 · 652 阅读 · 0 评论 -
第 1-3 课:高效开发环境的搭建
Flutter 开发工具很多,有很多支持 Flutter 开发的 IDE,比如 Android Studio、Visual Studio Code、InteIIiJ IDEA、Atom、Komodo 等。本课将使用 Visual Studio Code 作为主要开发工具,因为 Visual Studio Code 占用内存和 CPU 比较低,非常流畅,体验也比较好。模拟器的话,这里推荐使用 And...原创 2020-09-22 12:22:58 · 395 阅读 · 0 评论 -
第 1-4 课:Flutter 项目结构及配置文件详解
对于一门新语言或新技术的学习来说,在新建了项目之后,了解其项目结构及含义、配置文件的编写,这些对后续的开发和深入学习起到很重要的作用。俗话说磨刀不误砍柴工,Flutter 的学习也同理,我们在新建了 Flutter 项目后,需要进一步了解和学习 Flutter 的项目结构、文件的配置。而 Flutter 由于是跨平台应用,所以一般都会包括 Android 和 iOS 两个项目的目录以及 Flutt...原创 2020-09-22 12:22:56 · 1081 阅读 · 0 评论 -
第 1-5 课:Flutter 开发规范
想学习好一门编程语言,想标准高效地学习一门编程语言,首先你需要了解它的开发规范。标准的开发规范可以让我们事半功倍,也可以让别人更好地理解和使用你的代码、算法。学习 Flutter 同样建议大家先了解掌握其开发规范,大致包括:项目结构规范、命名规范、缩进格式规范、注释规范、代码规范、其他规范。良好的开发规范不但能提升自己的编程水平及能力,有利于提升自己的开发效率,也能够让其他人更好地理解你的代码,方...原创 2020-09-22 12:22:54 · 813 阅读 · 0 评论 -
第 1-6 课:Flutter Widget 结构概览
Flutter 的面向对象的编程方式,吸取了 React 的编程组件化思维。Flutter 的所有类都可以看做是 Widget,大部分的类都是继承自 Widget 类。所有学习和了解 Flutter 有哪些 Widget、怎么分类的,对我们后续快速学习非常有用,也可以对 Flutter 的结构层级有一个大致的了解。本文将主要介绍: Flutter 的整体结构层级 Flutter 的...原创 2020-09-22 12:22:53 · 415 阅读 · 0 评论 -
第 1-7 课:编写第一个 Flutter 应用
经过前面几节理论课程对 Flutter 的介绍,相信大家对 Flutter 有基础了解,也希望对 Flutter 的编程和应用开发产生了更加浓厚的兴趣。理论过后,估计大家正期待进入 Flutter 应用的编写实践。那么这节课就带领大家先尝试编写一个 Flutter 应用,感受一下 Flutter 开发的语法特点和运行效率。Flutter 应用运行起来比 RN 流畅、编译快、热加载快,所以开发和调...原创 2020-09-22 12:22:51 · 352 阅读 · 0 评论 -
第 1-8 课:基础组件详解(Text、Image、Button)
前面已经讲解了大量的 Flutter 相关基础知识,从这节课开始,我们将进行 Flutter 的系列 Widget、布局的学习。那么这节课就带领大家对 Flutter 的基础 Widget 中的几个典型,结合案例来讲解用法。本文将主要介绍: Text Widget 用法详解 Image Widget 用法详解 Button Widget 用法详解 1 Text Wid...原创 2020-09-22 12:22:50 · 529 阅读 · 0 评论 -
第 1-9 课:基础布局详解(Scaffold、Container、Center)
前面讲解了 Flutter 的几个基础组件,这节课将讲解跟布局相关的 Widget。每个平台的应用都有其自己的布局方式,例如 Android 有线性布局、相对布局、绝对布局、帧布局、表格布局等等,HTML 前端也有自己的布局方式。Flutter 当然也不例外。那么这节课就带领大家对 Flutter 的基础布局 Widget 中的几个典型的布局Widget进行详细分析,并结合案例进行详细的用法讲解...原创 2020-09-22 12:22:48 · 971 阅读 · 0 评论 -
第 1-10 课:基础组件详解(AppBar、AlertDialog、Icon)
前面讲解了 Flutter 的几个基础组件,这节课将继续讲解 Flutter 的基础组件——AppBar、AlertDialog 和 Icon,这些基础组件都不是很难,但是算是比较常用的,分别对应到界面的就是标题栏、弹窗对话框、图标。那么就开始吧!本文将主要介绍: AppBar Widget 用法详解 AlertDialog Widget 用法详解 Icon Widget 用...原创 2020-09-22 12:22:47 · 330 阅读 · 0 评论 -
第 1-11 课:基础组件详解(TextField、Form 表单)
这节课将继续讲解 Flutter 的常用基础组件的最后两个——TextField 和 Form 表单。通过基础组件的学习,大家可以尝试绘制一些基础页面,实现一些基础功能,例如注册页面、登录页面、简单的信息展示页面等。TextField 相当于 Android 里的 EditText,HTML 的输入框等,不过 Flutter 的 TextField 可配置的功能要多一些,功能要强大一些,Form...原创 2020-09-22 12:22:45 · 545 阅读 · 0 评论 -
第 1-12 课:基础布局详解(Row、Column、Flex、Expanded、Stack、IndexedStack)
这节课将继续讲解 Flutter 的常用基础布局组件,前面已经给大家介绍了几种常用的布局 Widget 及其特点与用法。这节课要讲解的布局 Widget 看起来很多,不过其中几个都具有相似的特点,用法类似。如 Row 和 Column 用于线性布局(横向或者纵向排列子元素);Flex 和 Expanded 用于弹性布局(按照比例分配子元素所占大小空间);Stack 和 IndexedStack 用...原创 2020-09-22 12:22:43 · 406 阅读 · 0 评论 -
练习篇:仿写 Instagram 列表
前面已经讲解了一些常用的布局方式、常用 Widget 组件以及 Dart 语法。那么这节课我们就来一个小总结,通过一个实例小页面来复习巩固我们之前学过的知识,理论结合实践。本课练习篇主要是完成一个完整的页面的编写,将会涉及到前面学习过的布局 Widget 和组件 Widget ,一起来学习吧,很简单!知识整理在进行案例编写前,我们先整理下我们前几节学习的 Flutter 相关 Widget:...原创 2020-09-22 12:22:42 · 499 阅读 · 0 评论 -
第 2-1 课:列表滚动组件详解(CustomScrollView、ListView、ScrollView、ExpansionPanel)...
这节课将继续讲解 Flutter 的常用组件中的列表滚动组件。在实际开发中,会经常涉及到列表滚动。在 Flutter 中可以滚动的组件容器有很多,如 ScrollView、ListView、GridView、CustomScrollView 等等。那么这节课就带领大家对 Flutter 的常用组件中的列表滚动组件进行详细分析讲解,并结合案例进行详细的用法讲解。本文将主要介绍: Cu...原创 2020-09-22 12:22:40 · 1455 阅读 · 0 评论 -
第 2-2 课:导航组件详解(TabBar、NavigationBar、PageView 相关)
这节课将继续讲解 Flutter 的常用组件,前面已经给大家介绍了 Flutter 系列 Widget,今天讲解导航相关的组件。在 Android 的 Material Design 中,一般是底部使用 TabBar 实现底部导航或者顶部使用 TabBar、TabLayout 结合 ViewPager 来实现导航,那么在 Flutter 里我们如何实现这种效果呢?这节课我们就给大家分析相关组件,并...原创 2020-09-22 12:22:38 · 618 阅读 · 0 评论 -
第 2-3 课:流式布局组件详解(Flow、Wrap)
这节课将继续讲解 Flutter 的常用组件中的布局使用的组件,本节课主要讲解 Flutter 里的流式布局(或者瀑布)组件的用法。在 Flutter 中主要通过 Flow 和 Wrap 组件来实现流式、瀑布式布局。那么这节课就对流式布局组件进行详细分析,并结合案例进行详细的用法讲解。本文将主要介绍: Flow 布局 Widget 用法详解 Wrap 布局 Widget 用法详解...原创 2020-09-22 12:22:37 · 1237 阅读 · 0 评论 -
第 2-4 课:表格组件详解(Table 和 Data Tables)
这节课将是 Flutter 常用组件的最后一节课程,相信通过前面这些课程的讲解和学习,大家已经掌握了 Flutter 的组件学习的方法和特点,适应了学习节奏。本节课主要讲解 Flutter 里的表格绘制组件的用法。在 Flutter 中主要通过 Table 和 DataTable 组件来实现表格的绘制。本文将主要介绍: Table Widget 用法详解 DataTable Wi...原创 2020-09-22 12:22:35 · 1061 阅读 · 0 评论 -
第 2-5 课:路由详解
从这节课开始,我们将开始讲解 Flutter 中一些常用的技术要点。这些技术点在 Flutter 实际开发中将会用到,本节课主要讲解 Flutter 中路由的概念及使用方法。在 Flutter 中路由负责页面的跳转和数据传递,类似于 Web 中的路由、Android 中的 Intent 页面跳转等。本文将主要介绍: Flutter 路由基础 Navigator 和 Route 基...原创 2020-09-22 12:22:33 · 234 阅读 · 0 评论 -
第 2-6 课:生命周期及按键监听
Flutter 中的页面也有生命周期的概念,类似于 Android 中 Activity 的生命周期,不过也有很大的不同。这节课我们将讲解 Flutter 中生命周期及按键监听相关内容。在 Flutter 中生命周期主要体现在State 的回调函数上。那么这节课就带大家学习 Flutter 的生命周期及按键监听,本文将主要介绍: Flutter 生命周期 Flutter 按键监听...原创 2020-09-22 12:22:32 · 193 阅读 · 0 评论 -
第 2-7 课:HTTP 网络请求详解
HTTP 网络请求是开发语言里比较常用和重要的功能,主要用于资源访问、接口数据请求和提交、上传下载文件等等操作,HTTP 请求方式主要有:GET、POST、HEAD、PUT、DELETE、TRACE、CONNECT、OPTIONS。本文主要讲 GET 和 POST 这两种常用请求在 Flutter 中的用法,其中对 POST 将进行着重讲解。Flutter 的 HTTP 网络请求的实现主要分为三种...原创 2020-09-22 12:22:30 · 202 阅读 · 0 评论 -
第 2-8 课:JSON 编解码的使用
在实际开发中,经常使用到数据交换格式,如:JSON 或 XML。Flutter 里也同样可以处理 JSON 格式的解析、编码操作,我们可以实现将一个 JSON 字符串转为实体类或将一个实体对象转为JSON 格式字符串。本节课主要讲解 Flutter 里的 JSON 编解码的具体用法,并结合案例进行详细的用法讲解。本文将主要介绍: JSON 编解码用法详解 JSON 编解码优化 ...原创 2020-09-22 12:22:29 · 265 阅读 · 0 评论 -
第 2-9 课:WebSocket 的使用
WebSocket 在我们平时开发推送、聊天、数据传输时经常使用,无论是 Web 端还是移动端。那么这节课我们将介绍 Flutter 中 WebSocket 的基本使用:连接、发送消息、接收消息、断开连接。Flutter 自身 SDK 带 WebSocket 功能,或者通过第三方插件库也可以实现这些功能,这两种实现方式都非常简单,本节课会给大家讲解。本文将主要介绍: WebSocket...原创 2020-09-22 12:22:27 · 301 阅读 · 0 评论 -
第 2-10 课:文件和图片读写操作详解
在实际开发中,经常离不开文件和图片的读写操作,例如缓存数据、创建删除文件/文件夹、读取文本/图片/音视频等数据、读取显示图片等等。Flutter 也提供了相关的操作 API。那么这节课我们就开始学习 Flutter 中与文件和图片读写操作相关的内容,并结合案例进行用法讲解。本文将主要介绍: Flutter 文件操作 Flutter 图片操作 1 Flutter 文件操作常...原创 2020-09-22 12:22:26 · 1603 阅读 · 0 评论 -
第 2-11 课:手势和数据库缓存详解
在移动应用开发中,经常会使用到手势操作,这也是移动平台应用独有的一个功能特性。我们可以使用手势进行密码设置、通过手势操作进行定义一系列有含义的操作等等。Flutter 也支持手势操作的使用。这节课除了手势功能的用法外还会给大家讲解下 Flutter 中本地数据库的操作用法, Android 平台本地数据库一般是使用 SQLite,Flutter 通过插件的方式提供了本地数据库的相关操作方法。本节...原创 2020-09-22 12:22:24 · 262 阅读 · 0 评论 -
第 2-12 课:动画的使用
动画部分在每个平台可以说都是一个常用的部分。如果想让自己的应用或产品的用户体验变得更好,那么动画效果是一个很重要的部分。Flutter 也提供了大部分的动画效果支持,如常用的渐变动画、位移动画、旋转动画等;特有的一个动画叫 Hero 动画,用来做页面跳转切换到动画效果的。那么这节课我们将介绍 Flutter 中动画的基本使用详解。Flutter 的基础动画和 Hero 动画都会给大家讲解,并配...原创 2020-09-22 12:22:23 · 150 阅读 · 0 评论 -
第 2-13 课:应用国际化处理
国际化就是让我们的应用支持多种语言,例如运行在国内的使用中文简体、在港澳台的使用繁体字、美国的使用英文、日本的用户显示的是日文等等类似场景,也可以把国际化称为本地化处理。Flutter 本身的 API 是支持国际化处理的,当然也可以用官方提供的插件库来实现。那么这节课我们将介绍 Flutter 中应用国际化处理的基本使用详解,并配合一些案例。本文将主要介绍: 实现应用国际化 使用...原创 2020-09-22 12:22:21 · 201 阅读 · 0 评论 -
第 2-14 课:Flutter 主题
主题这个概念可以大家都不陌生,我们在使用移动应用或者网页时候,都有夜间模式主题、护眼模式主题等等。在 Flutter 中主题的作用基本一致,可以设置全局或者局部的主题样式、字体样式,使得应用具有整体的样式风格。那么这节课我们将介绍 Flutter 中的主题内容,并配合一些案例。本文将主要介绍: 创建全局主题 局部主题 扩展或修改全局主题 创建全局主题Flutter 支...原创 2020-09-22 12:22:19 · 241 阅读 · 0 评论 -
练习篇:实现一个类似淘宝的商品展示列表页面
经过前面两大部分的详细讲解,相信大家对大部分的布局方式、组件的使用、逻辑业务编写都有了很深入的了解,那么接下来我们就用前面学习的一些知识来进行一个实践:实现一个淘宝风格的商品展示列表,通过这个实例我们可以复习巩固我们之前学过的知识,也算是一个总结与检验。本课练习篇主要是将通过一些组件、自定义组件、常用布局等知识点来完成一个淘宝风格的商品展示列表,一起来学习吧,很简单!知识整理在进行案例编写前,...原创 2020-09-22 12:22:18 · 5043 阅读 · 0 评论 -
第 3-1 课:自定义 Widget 及方法封装
在使用 Flutter 开发的过程中,有时候现有的 Widget 不能满足需求,所以需要自定义 Widget,有点像 Android 和 iOS 平台的自定义 View,来实现我们的各种效果。Flutter 也是支持自定义 Widget 组件的,原理和方法类似于其他平台。这节课我们将介绍 Flutter 中自定义 Widget 的几种实现方式并配合例子,同时也会讲解一下 Flutter 方法的封装...原创 2020-09-22 12:22:16 · 399 阅读 · 0 评论 -
第 3-2 课:原生和 Flutter 的交互
在使用 Flutter 开发的过程中,可能有各种各样的 UI、需求、技术方案,有些无法通过现有的 Flutter Widget 来实现,那么这个时候我们就需要写插件(实际上就是调用原生的 API),想实现与原生的 API 交互、跳转、混合编写,就涉及到了 Flutter 与原生的交互。Flutter 是支持和原生 API 进行交互的,这节课我们将介绍 Flutter 中实现与原生交互的方法,本文...原创 2020-09-22 12:22:15 · 480 阅读 · 0 评论 -
第 3-3 课:数据共享与传递
在使用 Flutter 开发的过程中,我们可能需要进行数据的页面之间的传递、共享或者全局的一个事件、状态管理和监听。那么这节课我们将介绍 Flutter 中实现数据共享与传递的方法,并配合实例进行详细讲解。本节将主要介绍: InheritedWidget 实现数据共享与传递 ScopedModel 实现数据共享与传递 Redux 实现数据共享与传递 EventBus 实现数...原创 2020-09-22 12:22:13 · 308 阅读 · 0 评论 -
第 3-4 课:Dart Pub 使用及 Flutter 插件库的开发
在使用 Flutter 开发时,可能某些功能的实现比较麻烦或者无法实现,这时我们首先应该想到的就是要搜索 Dart Pub:https://pub.dev/flutter。这是 Flutter 官方的一个针对 Flutter、Web、Dart 的插件库开源仓库,里面有很多官方和其他开发者开源的插件库。那么这节课我们将介绍 Flutter 中 Dart Pub 的使用,以及我们自己实现开发一款 F...原创 2020-09-22 12:22:12 · 726 阅读 · 0 评论 -
第 3-5 课:Flutter 调试及 Android 和 iOS 打包
在使用不同的开发语言进行开发时,一般都会用到调试、断点调试功能。例如 Web、Android 等等都是支持调试和断点调试的,Flutter 也不例外,支持调试和单元测试功能,还有性能、布局分析器等等。那么这节课就给大家讲解下 Flutter 的调试和测试等功能的使用,配合一些实例进行讲解。同时也会为大家讲解下 Flutter 开发后的最后一个部分:应用的打包(Android 和 iOS 打包)。本...原创 2020-09-22 12:22:10 · 632 阅读 · 0 评论 -
第 3-6 课:延伸——Dart2 的 Web 开发
Dart 除了可以使用 Flutter 进行移动应用开发外,还可以进行 Web 开发,Dart 主要是替换了 JavaScript,用 Dart 来做 JavaScript 这部分工作,也可以说 Dart 替代了 JavaScript 和 JQuery 框架。我们用 Dart 来写 Web 后,编译器会自动将 Dart 文件编译为 JavaScript 文件进行运行,只不过我们写的语法规范是 Da...原创 2020-09-22 12:22:09 · 501 阅读 · 0 评论 -
练习篇:完整实践——实现一个简易日记本应用
经过前面三大部分内容知识点的讲解,相信大家对大部分的布局方式、组件的使用、逻辑业务编写都有了一定的了解了。到这里,我们基本上关于 Flutter 的开发课程的内容就说的差不多了。那么接下来我们就用前面学习的一些知识来进行一个完整的实践:实现一个简易日记本应用。通过这个实例我们可以复习巩固我们之前学过的知识,也算是一个总结与检验。本节作为练习篇,主要用到组件、自定义组件、常用布局、插件等知识点来完成...原创 2020-09-22 12:22:07 · 711 阅读 · 0 评论 -
第 4-1 课:实现一个简易的音视频播放器
前面我们已经学习了很多基础知识,这节课我们继续进行一个扩展实践。我们不应该仅仅局限于常规应用的开发,也应该扩展到其他一些方面的领域,如音视频播放、Android TV 开发等。那么这节课的内容就是做一个简易的音视频播放器,实现音视频的播放功能。通过这个实例我们可以复习巩固我们之前学过的知识,也算是一个总结与检验。本课练习篇主要是将通过一些官方插件库和第三方插件库等来完成一个简易的音视频播放器,一起...原创 2020-09-22 12:22:06 · 576 阅读 · 0 评论 -
结语:Flutter 和 Dart 的总结与展望
恭喜大家,终于完成了整个 Flutter 课程的学习!希望大家经过这个课程的学习,可以独立地进行应用开发了。不论是个人开发还是实际的公司项目研发,希望大家后续多多探索,继续加油。这个课程是我精心规划、很认真编写的课程,课程内容的编写、结构设计、案例的编写都是独立完成的,我付出了很多,当然也收获了很多。我很高兴和大家一起成长和进步,并且对 Flutter 的未来发展充满信心,相信 Web、PC 和...原创 2020-09-22 12:22:04 · 3832 阅读 · 0 评论 -
第 4-2 课:开发一个 Flutter TV 应用
之前一直在讲 Flutter 在移动端的应用尝试,今天这节内容,我们将拓展到 TV 应用的开发上来。我们知道目前的智能电视和机顶盒都是基于 Android 系统的,所以一般的 TV 应用开发都是采用 Android 原生进行开发,Google 对 Android TV 的开发也进行了一些规范和库的制定。当然也有的是采用的 B/S 架构进行设计的。这里我们将尝试 Flutter 开发 TV 应用。...原创 2020-09-22 12:22:03 · 2244 阅读 · 0 评论 -
第 3-7 课:延伸——Flutter Android Studio 开发环境的搭建
Flutter 开发工具很多,有很多支持 Flutter 开发的 IDE。比如 Android Studio、Visual Studio Code、InteIIiJ IDEA、Atom、Komodo 等。这里我们介绍一下 Android Studio 下的 Flutter 开发环境的搭建。模拟器的话,这里推荐使用 Android 官方的模拟器,也就是 Android Studio SDK 里带的模...原创 2020-09-22 12:22:01 · 203 阅读 · 0 评论