Flutter开发手机应用
文章平均质量分 89
一步一步,由浅入深,让你掌握Flutter开发手机应用
李元静
专注移动开发10年,对Android、鸿蒙、Python以及Flutter均有涉猎。最近更新Python爬虫与鸿蒙专栏,著有《Flutter App开发从入门到实战》一书,感兴趣的读者加微极客学编程,实时掌握博主的更新动态。
展开
-
《Flutter开发从入门到实战》:为什么要学Flutter?
目录为什么要学习Flutter?《Flutter开发从入门到实战》有哪些优点混合开发偏向移动开发国际化零基础也可读二维码展示动图实战所学知识在早期的前端开发中,我们一般都需要准备2套代码分别运行在Android与iOS平台,这种耗时耗力不便于维护的重复劳动,不仅浪费公司的人力资源,同时也存在多端体验不一致的问题。为什么要学习Flutter?为此,大前端概念应运而生。相信现在“大前端”这个名词,对于前端开发者已经家喻户晓。其实大前端的主要核心就是跨平台技术,它能通过一套代码,运行多个平台。而目前原创 2021-10-08 13:17:15 · 2378 阅读 · 2 评论 -
Flutter(三十)——文件存储
本文目录前言path_provider获取临时目录获取应用文档目录获取外部存储目录实战备忘录前言前面博主介绍讲解了key-value形式的SharedPreferences的存储方式和sqflite的数据库插件的使用方式,对于手机端来说,我们还需要对文件形式的存储有一定了解。在Flutter中已经实现了文件操作相关的API。Flutter中使用File获取手机中的存储目录,它根据不同的路径...原创 2020-03-29 19:51:19 · 8092 阅读 · 2 评论 -
Flutter(二十九)——封装SQLHelpers
本文目录前言封装SQLHelpers前言在实际的项目中,如果碰到一个数据库操作,就使用一条SQL语句对数据库操作,那么不仅仅代码非常杂乱,而且弄不好可能造成内存溢出,所以我们常常需要封装SQL操作,封装成SQLHelpers来进行操作。有过后端开发经验的程序员来说,都或多或少使用过SQLHelpers的帮助类,下面,博主通过一个例子详解SQLHelpers如何封装。封装SQLHelpers...原创 2020-03-28 19:14:28 · 8548 阅读 · 1 评论 -
Flutter(二十八)——SQLite数据库
虽有智慧,不如乘势;虽有镃基,不如待时。本文目录前言sqflite依赖库sqflite基本用法获取和删除database创建数据库与数据表插入数据修改数据查询数据删除数据计算总记录数关闭数据库前言做过手机端应用开发的人,都应该知道SQLite数据库,它是手机端上最老牌,最流行的数据库。使用起来比shared_preferences稍微复杂一点。前面一篇博文介绍的shared_prefe...原创 2020-03-25 18:02:34 · 11340 阅读 · 0 评论 -
Flutter(二十七)——shared_preferences本地存储
如耻之,莫如为仁。仁者如射,射者正己而后发;发而不中,不怨胜己者,反求诸己而已矣。本文目录前言shared_preferences本地存储前言从这篇博文开始,博主将为大家介绍Flutter的持久化方式。相信,对于有过Android开发经验的人来说,应该或多或少都接触过。比如,在Android里面的SharedPreferences,数据库Sqlite,文件读写,以及在服务器上的存储HTM...原创 2020-03-24 19:19:31 · 11844 阅读 · 0 评论 -
Flutter(二十六)——自定义路由
本文目录PageRouteBuilder属性讲解自定义路由转场效果PageRouteBuilder前面我们介绍的所有路由都是MaterialPageRoute。但这并不能满足项目中的实际需求,有时候我们也需要修改路由默认的转场效果,这个时候就需要自定义路由,要用到另一个类,它就是PageRouteBuilder,首先我们来看看它的源码:PageRouteBuilder({ Route...原创 2020-03-22 18:57:34 · 14381 阅读 · 0 评论 -
Flutter(二十五)——路由栈
本文目录前言路由栈的详解pushReplancementNamed方法popAndPushNamed方法pushNamedAndRemoveUntil方法popUntil方法前言在前面,我们介绍了动态路由,静态路由以及路由的传参,博主也提到过“路由栈”的基本概念。但在实际项目中,路由的控制方法并不仅仅只有这些,这是因为实际情况更加的复杂多变,所以这一篇博主,博主将深入地讲解路由栈的知识路由栈...原创 2020-03-21 18:59:56 · 18505 阅读 · 0 评论 -
Flutter(二十四)——参数回传
本文目录前言主页面跳转界面前言上一篇通过静态路由以及动态路由了解了,在Flutter开发中界面的跳转,但在实际的项目中,并不仅仅只有跳转这么一种需求,还有回传参数。(下图为本文实现最终效果图)比如在某些悬浮窗口中选择城市,然后返回地址等等,都具有回传参数的需求,那么在Flutter开发中,要怎么实现这么一种需求呢?不妨我们来做一个城市参数回传的例子。主页面首先,就是我们App的主页面设...原创 2020-03-08 17:59:35 · 19549 阅读 · 0 评论 -
Flutter(二十三)——静态路由与动态路由
本文目录前言静态路由动态路由前言前面讲解过一些Flutter路由知识,比如讲解Hero动画的时候,就提到过路由的相关知识。其实路由是专业名词,就是界面切换,而跳转界面解释路由跳转。(下图为动态路由实现效果)我们提到过,在Flutter开发中,路由的管理是通过堆栈的方式进行管理的,也就是说基本的用法就是push与pop方式,而在实际的项目中可没有那么简单,页面之间的跳转情况比较多,这就涉及到...原创 2020-03-07 19:15:37 · 22058 阅读 · 0 评论 -
Flutter(二十二)——异步编程
本文目录前言isolateevent loop前言说到网络,就一定会提到异步编程。对于涉及网络的操作,在客户端的开发中都是通过异步实现的。在Flutter里,异步是用Future来修饰的,并且运行在event loop里。Flutter的异步特性和Android的Looper以及前端的event loop有点像,都是不断地从事件队列里获取事件然后运行,并通过异步操作有效防止一些耗时任务对主U...原创 2020-02-26 17:35:22 · 26548 阅读 · 0 评论 -
Flutter(二十一)——dio库
本文目录前言基本用法dio单例dio拦截器拦截器链dio适配器前言前面介绍了dart语言自带的网络请求库httpClient,以及官方推荐的网络请求库http,但我们的网络请求其实千变万化,并不仅仅只是请求一个网页获取某种数据这一种需求。有时候,我们也需要在网络请求之前以及之后做些准备工作,这就涉及到如果监听我们的网络请求过程,这个时候前面的网络请求方式显然不能满足我们的需求,所以我们需要借...原创 2020-02-25 18:27:02 · 26388 阅读 · 0 评论 -
Flutter(二十)——JSON解析
本文目录前言JSON转换成Dart对象实践根据JSON用工具生成实体类前言前一篇博文已经详细介绍了Flutter开发中的网络请求,但其实大多数项目中,返回HTML内容是不够的,因为移动端使用的最多的请求是JSON数据,所以我们需要掌握Flutter开发中,JSON解析的知识。(JSON(javaScript Object Notation,JS对象简谱)是一种轻量级的数据交换格式)JSON转...原创 2020-02-10 17:43:00 · 27823 阅读 · 0 评论 -
Flutter(十九)——网络编程:HttpClient与http库
本文目录Dialog加载框实现对话框Dialog加载框做过Java开发Android程序的程序员,应该知道Android对话框的样式与效果,其实在Flutter开发中,实现对话框与Android开发中的思路是一样的,都是用Dialog封装加载的文字以及其他的一些内容,下面是本博文最后实现的对话框动画效果。实现对话框思路我们有了,我们首先肯定是要先实现对话框的内容,话不多说,我们直接先来看看...原创 2020-02-09 17:32:10 · 32293 阅读 · 0 评论 -
Flutter(十八)——支付宝咻一咻动画实践
本文目录咻一咻设计代码实现咻一咻三个动画的实现构建圆透明效果咻一咻设计对于支付宝咻一咻功能,是在2016年的时候上线到支付宝的,那个时候好像是专门为了集五福而设计的功能,现在肯定已经不在了,不过这也是一个动画功能,对于实践Flutter动画在合适不过了。(下图是我们最后实现的效果)首先,我们来看看上图,具体有那些设计,比如它有三个圆圈匀速放大的动画,其次,中间有一个按钮,用户点击之后,就会...原创 2020-02-08 17:36:26 · 31549 阅读 · 0 评论 -
Flutter(十七)——组合动画
本文目录Staggered Animations组合动画的代码实现Staggered AnimationsStaggered Animations就是交错动画,也可以称之为组合动画。在实际的动画使用过程中,动画可能并不是由一个单一方式呈现的。渐变,位移,缩放等都是基础的动画,而我们有时候需要把这些基础的动画组合起来,使其成为一个组合动画,即交错动画。(下图为本文最终实现效果)在Androi...原创 2020-02-07 18:54:32 · 28375 阅读 · 0 评论 -
Flutter(十六)——Hero动画
本文目录前言基本用法实现原理前言在前面实践组件的开发中,我们做了一个登录的界面,里面有一个组件Hero,不知道大家是否记得?当时没有展开来说,是因为它属于动画的内容,本文就要终点讲解Hero动画。做过Java开发Android的程序员应该都清楚,Shared Element Transition可以让Activity或Fragment做出流畅的动画,同样,在Flutter开发中,Hero动画...原创 2020-02-06 17:42:20 · 31023 阅读 · 0 评论 -
Flutter(十五)——动画的封装与简化
本文目录前言AnimatedWidgetAnimatedBuilder前言在上一篇的动画内容中,我们学习了基本的概念,以及动画的基本使用规则,但是,上一篇的代码真的实际项目中应用很多吗?其实不是,上一篇之所以那么介绍,只是为了让大家更了解Flutter动画的原理,其实还有更简单封装与简化的使用方式,这一篇就开始学习这些内容。AnimatedWidget前面动画之中,我们都是通过addLis...原创 2020-02-05 17:49:51 · 25255 阅读 · 0 评论 -
Flutter(十四)——动画的原理以及Tween与Curve的使用
本文目录前言监听ListView状态前言Notification是“通知”的意思,这和Android中不一样。在Flutter里,Notification会沿着当前的context节点从下往上传递,所有父节点都可以通过NotificationListener来监听通知,这种由子向父的传递方式,我们成为“通知冒泡”,并继承至Notification,而父Widget使用NotificationL...原创 2020-02-04 19:19:40 · 26693 阅读 · 0 评论 -
Flutter(十三)——事件处理:手势识别与事件通知
本文目录前言GestureDetector基本用法常用事件监听事件实现缩放监听事件实现拖拽前言在Flutter开发App的过程中,我们除了需要灵活的使用各种组件之外,还需要掌握手势的识别,比如我们常常需要在操作App的时候使用到缩放,双击,放大,缩小等操作,这些Flutter都给我们提供了监听的组件GestureDetector。这篇博文将详细介绍GestureDetector手势识别的使用规...原创 2020-02-03 19:13:47 · 27380 阅读 · 0 评论 -
Flutter(十二)——广告轮播效果与换肤设计
本文目录轮播图效果轮播子图片代码PageView代码Scaffold全局主题设置轮播图效果在各种主流的App当中,比如说淘宝,京东等,打开首页基本能看到顶部都有一个轮播的商品广告图片,这种轮播图的效果,基本每个App都有在用,而在Flutter开发中,它也给我们提供了这样一种控件:PageView。使用起来也是非常的简单,每张图片就是它的子元素,右多少个图片子元素,就右多少个轮播图,而且不...原创 2020-02-02 19:10:36 · 24096 阅读 · 0 评论 -
Flutter(十)——登录界面实现
本文目录登录界面登录界面在手机App的开发过程中,基本没有App都会有登录界面,所以我们今天将使用Flutter来实现登录界面的效果。首先,我们需要掌握登录界面有那些元素,比如用户名,密码提示以及输入框,其次可能还有上面的logo,下面的登录按钮,以及忘记密码等显示。前面博主讲解组件的时候,已经讲过,在Flutter开发中,一切皆组件,也就是说,你可以把界面直接赋值给一个变量,比如前面的操...原创 2020-01-31 19:07:23 · 27348 阅读 · 0 评论 -
Flutter(九)——Drawer侧滑菜单与包管理
本文目录包管理实现侧滑效果包管理一个完整的应用或多或少会使用一些第三方包来开发,这样可以避免重复造轮子,就像Java开发Android引入的Xutils,Glide以及奶油刀等。其中,我们都知道Android中对包的管理是gradle,IOS用Cocoapods对包进行管理。(侧滑菜单实现效果图)而在Flutter中,则通过pubspec.yaml配置文件对包进行管理,就像博主前面讲解Im...原创 2020-01-30 19:05:52 · 21842 阅读 · 0 评论 -
Flutter(八)——状态管理
本文目录前言WidgetContextStatelessWidgetStatefulWidgetStatefulWidget的组成StateState生命周期生命周期重要方法解释Widget的唯一身份标识:keyInheritedWidget前言在学习完Flutter的常用组件之后,我们对这些组件的使用都有了一定的了解。但是,只是了解还是不够的,因为我们的数据是动态的,具备交互性,界面上的展示...原创 2020-01-29 14:52:50 · 19985 阅读 · 0 评论 -
Flutter(七)——多子元素组件:GridView,CustomScrollView,Flex,Wrap
本文目录前言GridViewCustomScrollViewFlexWrap前言上一篇介绍了多元素组件:ListView,Scaffold,AppBar,Row,Column,这一节将接着上一篇博文,介绍GridView,CustomScrollView,Flex,以及Wrap多元素组件(下图为CustomScrollView实现效果)GridView首先,就是GridView,它和Li...原创 2020-01-28 18:48:26 · 20305 阅读 · 0 评论 -
Flutter(六)——多子元素组件:ListView,Scaffold,AppBar,Row,Column
本文目录前言ScaffoldAppBarRow和ColumnListView前言在Flutter开发中,多子元素组件包括:Scaffold,AppBar,Row,Column,Stack,IndexedStack,ListView,GridView,Flow,Table,Flex,Wrap,CustomScrollView,CustomMultiChildLayout等,下面博主将一一介绍其使...原创 2020-01-28 14:12:05 · 20517 阅读 · 0 评论 -
Flutter(五)——单一子元素组件
本文目录前言ContainerContainer的约束Container实战SingleChildScrollViewFittedBoxFractionallySizedBoxConstrainedBoxBaselineIntrinsicWidth和IntrinsicHeight前言前面已经介绍了基本的组件使用,这篇博主主要介绍单一子元素组件(Single-child)。单一子元素组件包括Co...原创 2020-01-23 19:38:54 · 16214 阅读 · 2 评论 -
Flutter(四)——基础组件
本文目录前言基础组件Text前言你如果做过Android开发,那一定熟悉里面各种官方提供的布局,比如LinearLayout,RelativeLayout等,你也一定和博主一样写过很多自定义控件,如果你学过Kotlin,并且用XML的DSL框架Anko声明Android组件,你会发现这与Flutter那种嵌套布局写法极为相似,下面是整个Flutter布局图:我们将通过几篇博文讲述一些Flut...原创 2020-01-23 14:27:53 · 14753 阅读 · 0 评论 -
Flutter(三)——一篇文章掌握Dart语言的用法
本文目录Hello World变量与常量变量常量内置类型Number(数值型)String(字符串)Boolean(布尔型)List与数组Hello World作为重新认识新语言的常规套路,每个程序员都不可避免的需要经历Hello World的历练,今天学习Dart语言也不例外,所以我们先来用Dart语言,输出Hello World:void main(){ print("Hello Wo...原创 2019-12-29 18:36:48 · 18157 阅读 · 1 评论 -
Flutter(二)——解析main.dart源码
本文目录解析Flutter项目main.dart源码MyApp解析MyHomePage 解析_MyHomePageState 解析解析Flutter项目main.dart源码经过本专栏的第一篇博文之后,相信大家对于Flutter的易开发性以及部署开发环境都有了一定的了解,那么今天我们主要接着上一篇的博文讲解,为什么main.dart的代码显示了上篇博文的界面,所以我们先来一步一步分析main....原创 2019-12-26 19:47:02 · 19178 阅读 · 0 评论 -
Flutter(一)——认识Flutter以及搭建开发环境
本文目录什么是FlutterFlutter开发优势对比其他技术Android Studio搭建Flutter开发环境VSCode搭建Flutter开发环境什么是FlutterFlutter是谷歌新推出的一套跨平台的,开源UI框架,同时支持Android与IOS开发,对于以前需要用两种语言分别开发IOS,Android程序与来说,无疑简单了许多。而且Flutter是未来新操作系统Fuchsia的...原创 2019-12-02 13:13:35 · 19065 阅读 · 0 评论