Flutter:一个移动应用开发框架,它使用 Dart.C++.Skia 开发,对外提供了完全不依赖系统平台的 Widget 的能力,只通过自绘图形的方式工作,具有极其优秀的跨平台性.目前已经支持了 iOS.Android.Fuchsia. macOS 下,安卓模拟器的进程名为:sdkqemu-system-i386,可在任务管理器强行关闭. 如果提示:Please configure Android SDK,需要将 ANDROID_HOME 环境变量设置为相应的 SDK 安装目录 构建UI界面…

sqflite是一款轻量级的关系型数据库,类似SQLite. 在Flutter平台我们使用sqflite库来同时支持Android 和iOS. 使用介绍 1.首选需要在pubspec.yaml 导入库 2.dart类中导入库 3.创建-增删改查 创建:     增: 删: 改: 查: 举例: 已有项目集成到Flutter代码已经上传到我的GITHUB 知乎日报Flutter版代码已经上传到我的GITHUB 基础学习过程中的代码都放在GITHUB…

Flutter教程- Dart语言知识点整理 Dart语言简介 Dart语言介绍 ① 注释的方式 ② 变量的声明 ③ 字符串的声明和使用 ④ 集合变量的声明 ⑤ 数字的处理 ⑥ 循环的格式 ⑦ 抛异常的方式 ⑧ 函数的写法 ⑨ 函数的可变参数 ⑩ 构造函数 ⑩① Getter 和 Setter ⑩② 导包 <结语> Dart语言简介 Flutter是使用Dart语言开发的. Dart语言是基于类的纯面向对象语言. Dart 中的所有东西都是对象,包括数字.函数等,它们都继承自 Object,并…

1.Expanded组件 占满可用空间 -----可以到达类似flex布局中  第一列占用大量空间,所以它必须包装在Expanded widget中. 写死的高度改成Expanded自动撑满屏幕如果还是不能撑满试试加上flex:1的属性 Expanded expands its child to fill the available space --Using an Expanded widget makes a child of a Row, Column, or Flex expand to…

Flutter的Widget采用的是现代化的React风格,该风格的设计灵感来源于React这么语言.最核心的理念是你可以使用Widget设计界面.Widget通过当前的state和注册信息来描述view应该长成什么样子的.当当前的状态发生了变化后,Widget会重新构建. 一.Hello World void main() { runApp( new Center( child: new Text( 'Hello, world!', textDirection: TextDirection.l…

背景 前面我们讲了很多 Flutter 相关的知识点,但是我们并没有介绍怎样实现 Flutter 与原生的通信. 比如我在 Flutter UI 上面点击了一个按钮,我希望原生做一些处理,那么原生怎么知道? 比如我在原生有些变化需要告知 Flutter,Flutter 又如何获知? 本篇我们先解决第一个问题.即 Flutter-> 原生的通信. 路由回顾 之前我们一直在讲 Flutter 相关的知识点,而且基本上都是在 main.dart 文件上面折腾,为了避免很多小伙伴觉得我们跨度过大. 因此…

从零学习Fluter(八):Flutter的四种运行模式--Debug.Release.Profile和test以及命名规范 好几天没有跟新我的这个系列文章,一是因为这两天我又在之前的基础上,重新认识flutter,觉得flutter这个东西越来越有意思.并且水很深 今天简单分享一下开发学习中的小知识点 Flutter有四种运行模式:Debug.Release.Profile和test,这四种模式在build的时候是完全独立的 Debug   Debug模式可以在真机和模拟器上同时运行:会打开所…

本文主要介绍了Flutter布局相关的内容,对相关知识点进行了梳理,并从实际例子触发,进一步讲解该如何去进行布局. 1. 简介 在介绍Flutter布局之前,我们得先了解Flutter中的一些布局相关的特性. 1.1 边界约束(box constraints) box constraints有人也翻译为盒约束.箱约束,我个人还是觉得边界约束可能更直观一些. Flutter中的边界约束,是指widget可以按照指定限定条件,来决定自身如何占用布局空间.Flutter借鉴了很多React相关的东西,…

本文要介绍的知识点 用路由推出一个新页面 打开新页面时,传入参数 参数的回传 路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路…

先来看看准备界面: image.png 目标是修改图中红色实线框中的喜欢和不喜欢的五角星的修改,以及数字的修改. 在修改之前,有必要先了解一些相关的信息. 知识点 前面简单的提到过,有些Widget是Statful(有状态的),而其他的一些是Stateless(无状态的).比如继承自StatefulWidget的有Checkbox.Radio.Slider.Form等,这些Widget用户都是可以做一些交互的,同样的继承自StatelessWidget的Widget有Text.Icon等.有状态…

博客地址: https://jspang.com/post/flutterDemo.html#toc-bb9 视频地址: https://www.bilibili.com/video/av39709290/?p=8 创建项目demo05 keepAliveDemo是一个自定义组件 keepAliveDemo这个组件必须是个动态组件,因为他来回的切换还要变换里面的效果 sfu快捷键快速生成 第一个知识点就是with. 这里我们继承自State,如果我们还要继承其他的类呢?这里就用到了with.表示…

前言 Flutter最近比较热门,但是Flutter成体系的文章并不多,前期避免不了踩坑:我这篇文章主要介绍如何使用Flutter实现一个比较复杂的手势交互,顺便分享一下我在使用Flutter过程中遇到的一些小坑,减少大家入坑: 作者:HitenDev链接:https://www.jianshu.com/p/4d1e81ab3f54 image 先睹为快 本项目支持ios&android运行,效果如下 image image image image 对了,顺便分享一下生成gif的小窍门,建议用手…

欢迎参加“决胜Flutter” 实训课程,这里是你此次实训之旅的起点. 本章将带您快速了解移动开发的现状,然后向您介绍Flutter的发展历史以及优势特点,最后一起动手,搭建高效的开发环境. 由于Flutter 跨平台(同时支持Android.iOS.Web以及PC)的特性,本书将以Mac OS作为操作系统环境,版本号为10.14.如果读者使用的是Windows或者Linux,请结合Flutter官方网站的配置指导进行操作.需要指出的是,Windows和Linux是无法编译生成iOS版本App的…

前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 Flutter 正式版于 2018 年 12 月 5 日正式发布. 而我所在的团队刚好想在项目新功能里面尝试 Flutter 的引入,利用 Flutter 的跨平台特性希望可以提高开发效率,因此本人作为 Android 端开发很荣幸的投入到 Flutter 学习和使用上面,并且于 2019 年 2 月…

其实转换成model类是有好处的,转换后可以减少上线后APP崩溃和出现异常,所以我们从这节课开始,要制作model类模型,然后用model的形式编辑UI界面. 类别json的分析 比如现在从后台得到了一串JSON数据: { "code": "0", "message": "success", "data": [{ "mallCategoryId": "4", &quo…

Flutter本身提供了路由机制,作个人的小型项目,完全足够了.但是如果你要作企业级开发,可能就会把入口文件变得臃肿不堪.而再Flutter问世之初,就已经了企业级路由方案fluro. flutter_fluro简介 fluro简化了Flutter的路由开发,也是目前Flutter生态中最成熟的路由框架. GitHub地址:https://github.com/theyakka/fluro 它出现的比较早啊,是目前用户最多的Flutter路由解决方案,目前Github上有将近1000Star,可…

现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBuilder这个类里的transitionsBuilder方法. 不过这个方法还是有很多写法的,通过写法的不同,产生的动画效果也有所不同. 1.渐隐渐现的动画效果 先编写一个主入口方法,还是最简单的格式,只不过home属性,使用的RouterFirst的组件是我们自定义的,需要我们再次编写.入口文件的…

先在pubspec.yaml中引入Dio包如图所示 认识Dio库:dio是一个dart的 http请求通用库,目前也是大陆使用最广泛的库,国人开发,完全开源. flutter的插件包管理:学了引入dio包,并简单的学习了pubspec.yaml的结构和编写注意事项. get请求的编写:我们以一个充满正能量的小Demo讲述了get请求的实现,并成功的返回了结果. Get请求和POST请求都是在工作中最重要的两种请求.一般GET请求用于获取数据,POST请求用于提交数据. 在dart文件中写入代码:…

这节学习一下POST请求的使用,其实POST和Get请求都是在工作中最重要的两种请求.比如我们要传递一组表单数据过去,这时候用Get请求就是不太合适的,使用POST比较好. SingleChildScrollView Widget 在学习新内容之前,先来填一个昨天的坑,其实昨天的代码在最后演示是,是由一个异常的,异常内容如下: I/flutter ( 6889): verticalDirection: down I/flutter ( 6889): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢…

上篇文章中,我们只看到了 dio 的使用方式,但并未跟应用关联起来,所以这一篇将 dio 网络请求与应用界面结合起来,当然这也是为以后的实战作基础准备,基础打牢,我们才能飞速前进. 1.案例说明 我们还是作去“大保健”选择服务对象这个例子,不过这次我们使用按钮和动态组件来实现.具体业务逻辑是这样的: 我们制作一个文本框,用于输入需要什么样的美女为我们服务 然后点击按钮,相当于去后端请求数据 后端返回数据后,根据你的需要美女就会走进房间 一图顶千言 2.生成动态组件 可以使用stful的快捷方式,…

这篇开始我们学习Dart第三方Http请求库dio,这是国人开源的一个项目,也是国内用的最广泛的Dart Http请求库. 1.dio介绍和引入 dio是一个强大的Dart Http请求库,支持Restful API. FormData.拦截器.请求取消.Cookie管理.文件上传/下载.超时和自定义适配器等. 我相信很多人都已经接触或者了解dio了,但是还是需要把它拿出来单独讲解一下,因为在Flutter编程工作中,每天都需要和它打交道,本套教程也会大量的使用dio库来进行接口的调用和数据交换…

关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四个dart文件. home_page.dart :商城首页UI页面,首页相关的UI我们都会放到这个文件里. category_page.dart: 商城分类UI页面,这个页面会有复杂的动态组件切换. cart_page.dart:商城购物车UI页面,这个页面会包括购物车的全套功能. member_p…

1.项目相关截图 2.项目知识点梳理图 Dio2.0: Dio是一个强大的 Dart Http 请求库,支持 Restful API.FormData.拦截器.请求取消等操作. Swiper: Swiper 滑动插件的使用,使用 Swiper 插件图片的切换效果. 路由Fluro:Flutter 的路由机制很繁琐,如果是小型应用还勉强,但是真实开发我们都会使用企业级的路由机制,让路由清晰可用.视频中也会使用 Fluro 进行路由配置,Fluro 也是目前最好的企业级Flutter路由. 屏幕适配…

写一个TODO App学习Flutter本地存储工具Moor Flutter的数据库存储, 官方文档: https://flutter.dev/docs/cookbook/persistence/sqlite 中写的是直接操纵SQLite数据库的方法. 有没有什么package可以像Android的Room一样, 帮助开发者更加方便地做数据库存储呢? Moor就是这种目的: https://pub.dev/packages/moor. 它的名字是把Room反过来. 它是一个第三方的package…

路由跳转 1. 模板方式:<ANY  routerLink='/ucenter'></ANY> 2. 脚本方式:  constructor(private router:Router){ } this.router.navigateByUrl('/ucenter') 路由参数: 1.{path:'product/detail/:lid',component: ...} 2.<ANY   routerLink="/product/detail/"> 3…

Flutter 开发从 0 到 1 明天开始又要上班了,你的假期任务完成如何啊?由于平时加班太多了,实在挤不出更多时间,从开始想用 Flutter <Flutter 开发从 0 到 1(一)需求与准备>写一个完整的 APP 已经过去三个月了,但是我没有忘记,这个国庆时间我终于完成了.Flutter 确实强大,不止跨平台,还支持桌面应用,包括 Window.macOS.Linux,以及 Web 应用,真正一套代码,全平台支持,野心可见一斑. 以上我尝试过了,打包成了 APK.macOS 桌面应用…

老孟导读:关于生命周期的文章共有2篇,第一篇是介绍 Flutter 中Stateful 组件的生命周期. 博客地址:http://laomengit.com/blog/20201227/Stateful%E7%BB%84%E4%BB%B6%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F.html 第二篇是 Flutter 中与平台相关的生命周期, 博客地址:http://laomengit.com/blog/20201227/%E7%9B%B8%E5%85%B3%E5%B…

跟Java等很多语言不同的是,Dart没有public protected private等关键字,如果某个变量以下划线 _ 开头,代表这个变量在库中是私有的.Dart中变量可以以字母或下划线开头,后面跟着任意组合的字符或数字 变量 变量定义 以下代码是Dart中定义变量的方法: main() {  var a = 1;   int b = 10;  String s = "hello";   dynamic c = 0.5; } 复制代码 你可以明确指定某个变量的类型,如int bo…

前言 阅读此文的彦祖,亦菲们,附送一枚Provider模板代码生成插件! 我为啥要写这个插件呢? 此事说来话短,我这不准备写解析Provider源码的文章,肯定要写这框架的使用样例啊,然后再哔哔源码呀!在写demo样例的时候,新建那俩三个文件.文件夹和必写的模板代码,这让我感到很方啊,这不耽误我时间嘛!然后就撸了这个插件,相对而言,多花了几百倍的时间... 希望这个插件,能减轻使用Provider小伙们的一点工作量:插件里面的模板代码是经过我深思熟虑过的,如果各位靓仔有更好的模板代码,请在评论里…

前言 "小步快跑.快速迭代"的开发大环境下,"一套代码.多端运行"是很多开发团队的梦想,美团也一样.他们做了很多跨平台开发框架的尝试:React Native.Weex.PWA 等等.但都没有得到很好的解决,直至遇到Flutter. Flutter 提供了一整套从底层渲染逻辑到上层开发语言的完整方案,有跨平台.高保真.高性能等优点.因此从发布开始,热度一路攀升,受到开发者们的热切青睐,也有了 阿里闲鱼.今日头条.腾讯 Now 等在内的一众知名商业案例. 我曾跟很多前…