![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
shengdaVolleyball
这个作者很懒,什么都没留下…
展开
-
25、Flutter - Packages和插件常用命令
开发Packages和插件常用命令Flutter三方的工具有两种。一种是插件(Plugin),一种是包(Package)。这两种差别在于Plugin不仅包含了Dart代码,还包含了iOS以及安卓的原生代码,比如常用的image_picker。那么Package就仅仅是Dart代码库。Package开发命令创建Dart包flutter create --template=package 'package_name'发布Dart包检查包flutter packages.转载 2020-07-01 20:58:28 · 455 阅读 · 0 评论 -
24、Flutter - FlutterEngine 引擎
FlutterEngine 引擎下载引擎代码工具准备Chromium提供的部署工具depot_toolsgit clone https://chromium.googlesource.com/chromium/tools/depot_tools.gitgitHub配置SSH错误提示git@github.com: Permission denied (publickey).fatal: Could not read from remote repository.Pleas转载 2020-07-01 20:53:00 · 824 阅读 · 0 评论 -
23、Flutter - Dart中的异步编程——Future、async和await
首先Dart是一门单线程的语言,那么Dart对异步操作对支持,可以使我们在编写Dart程序时可以异步的来执行耗时操作。从而可以在等待一个操作完成的同时进行别的操作以下是一些常见的异步操作: 通过网络获取数据。 写入数据库。 从文件读取数据。 要在Dart中执行异步操作,可以使用Future类和async和await关键字。#Dart的事件循环(event loop)在Dart中,实际上有两种队列: 事件队列(event queue),包含所有的外来事件:I/O、.转载 2020-07-01 20:18:52 · 2665 阅读 · 0 评论 -
22、Flutter - 混合开发(三)iOS原生调用Flutter
混合开发(三)iOS原生调用FlutterFlutter 项目 调用一些原生的功能!用的比较多的就是第三方插件,因为比较简单官方 《Flutter实战》 原生项目中部分页面使用Flutter,这种也是比较常见的。FLutter本身定位的是开发一个完整的App应用。所以要是只让其做成一个页面的话有些功能是不支持的。Flutter本身有自己的渲染引擎,如果是小项目用Flutter就不划算,只有非常大型的项目将其部分或者全部页面用Flutter来实现。详细代码参见DemoDemo地.原创 2020-07-01 15:52:43 · 2997 阅读 · 0 评论 -
21、Flutter - 混合开发(二)Flutter使用第三方插件访问相册
Flutter - 混合开发(二)Flutter使用第三方插件访问相册详细代码参见DemoDemo地址 -> wechat_demo前面文章 9、Flutter - 项目实战 - 仿微信(三)我的页面 中最后提到头像从相册或拍照来实现变更的功能没有做,今天就来把项目实战中的 wechat_demo 中的调用相册变更头像实现一下使用一个Flutter第三方插件image_picker注意:当重新导入与原生相关的第三方插件时(例如访问相册、地图定位)...原创 2020-06-28 22:42:11 · 1015 阅读 · 3 评论 -
20、Flutter - 混合开发(一)Flutter调用iOS原生相册功能选图片
混合开发详细代码参见DemoDemo地址 -> flutter_testdemo7混合开发总共两种1、Flutter 项目调用原生的某些功能2、原生项目里面包含 Flutter模块不建议Flutter 和 原生来回切换,1、性能损耗2、内存的泄露 开启了一个Flutter的页面!开辟了8M的内存空间,但是销毁的时候只销毁了2M,是很占内存的所以不要多开Flutter的页面Flutter 定义是一个单独的APP与原生的通讯交互需要通过通道 channe...原创 2020-06-27 22:24:44 · 1042 阅读 · 0 评论 -
19、Flutter - Key & 局部渲染
Key & 局部渲染详细代码参见DemoDemo地址 -> flutter_testdemo6一、补充:17、Flutter - Flutter生命周期 & Widget 的生命周期 & Inherited数据传递生命周期生命周期就是处理数据没有监听生命周期的方法就是没有生命周期方法有状态的StatefuldidChangeDependencies 改变依赖关系在 init之后会调用一次然后就是在数据共享 Inherit ...原创 2020-06-27 17:48:32 · 449 阅读 · 0 评论 -
18、Flutter - Widget 的渲染原理
Widget 的渲染原理Widget 每次setState 都会重新构建,总是在变化,是不稳定的。渲染并不是渲染的Widget树Render 树 放的是是RenderObject,并不是所有的Widget都会变成RenderObject例如:StatefulWidget 是继承Widget 的,但是并不会进入到RenderObjectRow 继承自flex flex 里面有两个声明方法并没有实现,在子类中实现用的1、通过Row分析渲染流程Row 继承子Flexclass Row e.原创 2020-06-26 22:13:30 · 385 阅读 · 1 评论 -
17、Flutter - Flutter生命周期 & Widget 的生命周期 & Inherited数据传递
Flutter生命周期 & Widget 的生命周期& Inherited数据传递详细代码参见DemoDemo地址 -> flutter_testdemo51、Flutter生命周期1、什么是生命周期生命周期本质上就是回调方法(函数)这些方法就是生命周期方法是为了让你知道我封装好的widget 他处于什么样的状态!2、有什么用监听widget 的事件初始化数据 创建数据 发送网络请求内存管理 销毁数据、销毁监听...原创 2020-06-26 18:04:32 · 390 阅读 · 0 评论 -
16、Flutter - 网络请求 dio 及其他
Flutter - 网络请求 dio详细代码参见DemoDemo地址 -> flutter_isolatedemodio 是国人开发的一个网络请求的插件,对http 进行了封装 。同时有中文的文档可以查阅,是比较方便易用的。pub.dev 地址:https://github.com/flutterchina/dio/blob/master/README-ZH.md1、导入 dio 插件2、导入头http 里面有get post 请求dio 也有get..原创 2020-06-26 12:03:44 · 2861 阅读 · 0 评论 -
15、Flutter - 多线程(二)
Flutter - 多线程(二)详细代码参见DemoDemo地址 -> flutter_isolatedemoimport 'dart:async';import 'dart:io';import 'dart:isolate';import 'package:dio/dio.dart';import 'package:flutter/foundation.dart';void main() { tesIsolateDemo();// testThenDe..原创 2020-06-25 22:55:30 · 475 阅读 · 0 评论 -
14、Flutter - 多线程(一)
Flutter - 多线程代码详细代码参见DemoDemo地址 -> flutter_testdemo4import 'dart:io';import 'dart:isolate';import 'package:flutter/foundation.dart';//多线程void main() {// test1();// test2();// test3();// test4();// test5(); test6();}void fu.原创 2020-06-25 19:11:28 · 935 阅读 · 0 评论 -
13、Flutter - Future 异步
Flutter 异步编程Dart 是单线程,就不会存在资源抢到的问题,比较方便管理资源。单线程比多线程性能要低,但是Flutter 有实现异步的方案异步是多个任务的来回切换,并不等于多线程。而且在指向任务的时候,可以将这个任务,先放到其他地方不影响正常线程的执行,在合适的时候再去执行这个任务。参考文章: Dart中的异步编程——Future、async和await代码详细代码参见DemoDemo地址 -> flutter_testdemo3import 'dart..原创 2020-06-25 17:12:21 · 313 阅读 · 0 评论 -
12、Flutter - 项目实战 - 仿微信(六)聊天页面
Flutter - 项目实战 - 仿微信(六)聊天页面接上篇:11、Flutter - 项目实战 - 仿微信(五)通讯录代码详细代码参见DemoDemo地址 -> wachat_demo其他相关联文章7、Flutter - 项目实战 - 仿微信(一)BottomNavigationBar 4个主页面显示8、Flutter - 项目实战 - 仿微信(二)发现页面9、Flutter - 项目实战 - 仿微信(三)我的页面10、Flutter - 项目实战 ...原创 2020-06-23 22:54:46 · 1306 阅读 · 0 评论 -
11、Flutter - 项目实战 - 仿微信(五)通讯录
Flutter - 项目实战 - 仿微信(五)通讯录接上篇:10、Flutter - 项目实战 - 仿微信(四)数据准备代码详细代码参见DemoDemo地址 -> wachat_demo其他相关联文章7、Flutter - 项目实战 - 仿微信(一)BottomNavigationBar 4个主页面显示8、Flutter - 项目实战 - 仿微信(二)发现页面9、Flutter - 项目实战 - 仿微信(三)我的页面10、Flutter - 项目实战 ...原创 2020-06-21 21:13:00 · 1591 阅读 · 0 评论 -
10、Flutter - 项目实战 - 仿微信(四)数据准备
Flutter - 项目实战 - 仿微信(四)数据准备接上篇:9、Flutter - 项目实战 - 仿微信(三)我的页面代码详细代码参见DemoDemo地址 -> wachat_demo其他相关联文章7、Flutter - 项目实战 - 仿微信(一)BottomNavigationBar 4个主页面显示8、Flutter - 项目实战 - 仿微信(二)发现页面9、Flutter - 项目实战 - 仿微信(三)我的页面项目实战之后会用到的例如会话列表页面...原创 2020-06-21 16:00:21 · 514 阅读 · 0 评论 -
9、Flutter - 项目实战 - 仿微信(三)我的页面
Flutter - 项目实战 - 仿微信(三)我的页面接上篇:8、Flutter - 项目实战 - 仿微信(二)发现页面代码详细代码参见DemoDemo地址 -> wachat_demo其他相关联文章7、Flutter - 项目实战 - 仿微信(一)BottomNavigationBar 4个主页面显示效果:点击右上角的照相机进行相册或拍照功能暂未实现,后面有时间的话在demo中补上。可以自行上网查阅资料实现该功能我的页面,并不是很复杂。尤其是下面...原创 2020-06-20 23:28:15 · 1638 阅读 · 0 评论 -
8、Flutter - 项目实战 - 仿微信(二)发现页面
8、Flutter - 项目实战 - 仿微信(二)发现页面接上篇:7、Flutter - 项目实战 - 仿微信(一)BottomNavigationBar 4个主页面显示代码详细代码参见DemoDemo地址 -> wachat_demo效果:创建文件夹discover把前面创建的 discover_page 放进去。如上图分析,这种在iOS中做的话应该用一个UITableView来实现,在Flutter 里面有一个列表的显示是ListView,里面可以放我...原创 2020-06-20 16:59:44 · 882 阅读 · 0 评论 -
7、Flutter - 项目实战 - 仿微信(一)BottomNavigationBar 4个主页面显示
项目实战 - 仿微信(一)BottomNavigationBar 4个主页面显示要实现的效果就是如下图的 BottomNavigationBar 能点击并切换页面代码详细代码参见Demo(目前还有点小问题,不影响本片文章所诉内容的功能。后面写文章的时候会处理掉)Demo地址 -> wachat_demo创建工程和创建文件就不在说明,同时为了后面优化和修改将 BottomNavigationBar 功能抽取到一个类中实现,其他实现方式不再讲解1、main...原创 2020-06-20 00:20:58 · 1377 阅读 · 1 评论 -
6、Flutter - 状态管理 StatelessWidget 和 StatefulWidget
状态管理 StatelessWidget 和 StatefulWidget代码详细代码参见DemoDemo地址 -> flutter_testdemo2创建一个state_mag_demo.dart 的文件import 'package:flutter/material.dart';widget 继承自 StatelessWidget 或 StatefulWidgetStatelessWidget 无状态 里面的数据是静态的,也就是创建出来之后是不能改...原创 2020-06-14 18:12:12 · 219 阅读 · 0 评论 -
5、Flutter - 控件基础(三)布局
Flutter - 控件基础(三)布局上篇补充final 是运行时赋值之后不可变 const 是常量布局代码详细代码参见DemoDemo地址 -> flutter_testdemo11、控件显示对应Demo中 base_widget.dart1.1、纯文本显示import 'package:flutter/material.dart';// ----------------- 文本 -----------------class TextDemo e..原创 2020-06-14 16:30:03 · 295 阅读 · 0 评论 -
4、Flutter - 控件基础 (二)ListView 列表展示数据、布局
ListView 列表展示数据、布局接上篇,几点注意事项与说明1、创建工程项目的时候,存放路径不要有中文,有中文会有警告,而且后面可能会有一些未知的问题。如果有中文路径,创建完工程移动工程位置的时候,用AS 直接运行编辑是没有问题的,因为AS会自动修改,但是如果直接用xcode 打开的话是有问题的。可以用AS打开运行之后再去用xcode 打开,这样配置的路径就会修改了。2、Dart 中没有析构函数,有自己的垃圾回收机制不同于OC 需要些 dealloc3、MaterialApp(.原创 2020-06-14 09:32:37 · 575 阅读 · 0 评论 -
3、Flutter - 入门 及 控件基础(一)
Flutter 入门Flutter 使用的是 Dart 语言Dart 单线程语言Flutter 都是单线程执行的1、基础知识1.1、AS 简单界面介绍1.2、命令行打卡Flutter 并选择运行设备如果是iOS真机的话需要用xcode 打开 工程,然后配置证书。(跟正常iOS的配置一样)1.3、被锁在使用iOS模拟的时候,有可能会出现闪退,如果出现闪退报错提示被锁的时候。去倒Flutter 的bin -> cache 目录下删除lockfile 文件重新运行即..原创 2020-06-13 18:22:30 · 240 阅读 · 0 评论 -
2、Flutter - Android Studio 常用的快捷方式
Android Studio 常用的快捷方式总结一下在Flutter开发中,AS(Android Studio一下简称AS)常用的快捷方式1、代码块lutter 有两种状态控件:StatelessWidget StatefulWidget对于有可变状态控件的管理,官方文档是写了有3种模式:控件自己管理状态、交给父控件管理状态以及混合管理。我个人初学对于自己管理比较好理解,对于父控件管理理解起来有点困难,所以只能多看多学。这里写一下两种状态管理的方式和代码,加深自己的印象,尤其是父控.原创 2020-06-13 11:21:42 · 408 阅读 · 0 评论 -
1、Flutter - 环境搭建ForMac
关于Flutter的介绍我这里就不多说(看官网),如果你已经了解过了,那么这篇文章正好针对iOS开发者,开启Flutter之旅。本次版本:Mac OS X 10.15.2FlutterSDK 1.12.13Xcode 11.3.1Android Studio 3.6.1Flutter的配置其实越来越简单了。尤其刚出来的时候,需要配置的东西太多,。这里使用 Android Studio 作为开发Flutter的工具,毕竟都是微软开发的的。1、安装Fluter这里...原创 2020-06-12 23:30:28 · 2298 阅读 · 0 评论