flutter
文章平均质量分 83
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费、开源的。
__卓原
程序员~
展开
-
【无标题】
可以直接复制到 https://dartpad.dev/ 中浏览效果。Flutter翻转动画。原创 2023-11-01 15:22:26 · 179 阅读 · 0 评论 -
flutter : 一篇文章入门go_router
go_router是Flutter官方开发的一个Flutter的声明式路由包。go_router 包的目的是使用声明式路由来降低复杂性,无论您的目标平台是什么(移动、Web、桌面),处理来自 Android、iOS 和网络的深度和动态链接,以及其他一些导航相关的场景,同时希望提供易于使用的开发人员体验。原创 2022-10-13 19:36:12 · 5388 阅读 · 1 评论 -
Flutter Key的原理和使用(五) 需要key的实例:可拖动改变顺序的Listview
Flutter Key的原理和使用(一) 没有Key会发生什么Flutter Key的原理和使用(二) Widget 和 Element 的对应关系Flutter Key的原理和使用(三) LocalKey的三种类型Flutter Key的原理和使用(四) GlobalKey 的用法之前呢,我们介绍了flutter中的几种key,它们相应的原理和使用方式, 这次就来复习一下,看看一个需要用到key的实例.ReorderableListView你可能使用过ListView组件,它可以调整,显示和滚原创 2021-09-07 14:04:34 · 1663 阅读 · 0 评论 -
Flutter Key的原理和使用(四) GlobalKey 的用法
Flutter Key的原理和使用(一) 没有Key会发生什么Flutter Key的原理和使用 (二) Widget 和 Element 的对应关系Flutter Key的原理和使用(三) LocalKey的三种类型上一章,因为标题的原因哈,没有介绍到关于GlobalKey的内容,今天来讲一讲GlobalKey.GlobalKey是在整个应用程序中唯一的键。我们之前讲到,LocalKey是局部键,所以出现层级改变的时候:Column( children: [ Box(Color原创 2021-09-06 18:20:48 · 5403 阅读 · 0 评论 -
Flutter Key的原理和使用(三) LocalKey的三种类型
我们在上一章说到,同一级中相同类型的Widget不给它传Key的话,Flutter有时候就会出现分不清它们之间的对应关系,尤其是Widget之间的顺序发生改变的时候. 此时,我们就需要传个key给它.Key的种类Key有两个子类:LocalKey 局部键,在同一级中要唯一,可以理解为同级唯一性GlobalKey 全局键 , 在整个App中必须是唯一的.从性能上来讲,如果不需要用到GlobalKey的话,尽量不用,LocalKey因为只对比同一级别,因此会快很多.上一章也说过,在父级或者子级是不原创 2021-09-03 15:30:30 · 1353 阅读 · 0 评论 -
Flutter Key的原理和使用 (二) Widget 和 Element 的对应关系
Flutter Key的原理和使用(一) 没有Key会发生什么上一篇文章中,我们遇到了一个问题 , widget换位置的时候,出现了一些意外,并没有按照我们所想去调换位置, 这时候我们就很困惑, 那是在我们看来,写了一个widget,那这个widget就该按照我们设定的那样展示, 但实际上, widget并不是最终出现在屏幕上的东西.Widget Tree可能有人听说过Widget Tree , 就是嵌套着widget的东西.比如现在这段代码:Column( children: [ B原创 2021-09-02 11:04:50 · 1022 阅读 · 0 评论 -
Flutter Key的原理和使用(一) 没有Key会发生什么
在flutter中,几乎每个widget都有一个Key,但是我们使用的时候一般不会传Key , 那么这个Key,它到底是干什么用的呢? 几乎每个widget都有,但我们又很少用到它. 那到底什么时候才需要用呢?接下来,我们看一下,在需要Key的时候不用key,会发生什么情况.先举个常见的例子:Column( children: [ Container(width: 100, height: 100,color: Colors.red), Container(width: 100,原创 2021-09-01 10:27:30 · 1434 阅读 · 0 评论 -
Flutter空安全相关操作符
健全的空安全已在 Dart 2.12 和 Flutter 2 中可用需知当你选择使用空安全时,代码中的类型将默认是非空的,意味着 除非你声明它们可空,它们的值都不能为空。有了空安全,原本处于你的 运行时 的空值引用错误将变为 编辑时 的分析错误。? 允许变量为nullint a = null;一般来说,int类型的变量无法赋值为null , 在加入空安全后,编译器会报错。若你想让变量可以为 null,只需要在类型声明后加上 ?。int? aNullableInt = null;String原创 2021-07-12 14:12:40 · 2414 阅读 · 2 评论 -
Flutter Provider Selector
Selector 源码:class Selector<A, S> extends Selector0<S> { /// {@macro provider.selector} Selector({ Key? key, required ValueWidgetBuilder<S> builder, required S Function(BuildContext, A) selector, ShouldRebuild<S>原创 2021-06-24 00:40:47 · 1246 阅读 · 0 评论 -
flutter_bloc使用及部分源码分析
flutter_bloc 是一个bloc第三方库,这个库很方便的让你集成bloc模式,这个库结合了RXDart。目前我们项目中就有用到rxdart。bloc模式BLoC是一种利用reactive programming方式构建应用的方法,这是一个由流构成的完全异步的世界。常用的概念简介reactive programming: 响应式编程 , 一种基于事件模式的模型。Stream:流是一系列异步的数据.。Observable实现并扩展了Stream。它将常用的stream和strea原创 2021-01-19 15:45:41 · 981 阅读 · 1 评论 -
解决flutter 引入的package国际化无效的问题
解决flutter intl 引入的库内国际化失效的问题问题发生场景你引入了几个module,这几个module分别做了国际化,例如以下4个module ABCD,最后发现只有A的国际化效果可以使用,其他module无效:localizationsDelegates: const [ moduleA.S.delegate, moduleB.S.delegate, moduleC.S.delegate, moduleD.S.原创 2020-12-14 16:30:03 · 3011 阅读 · 0 评论 -
Flutter Firebase - FlutterFire基础配置
Flutter集成FirebaseFlutterFire是一套Flutter插件,可将Flutter应用程序连接到Firebase。首先要创建一个Firebase项目这一步跟这Firebase的流程走就可以Android安装在Android上使用FlutterFire之前,必须首先使用Android应用程序连接到Firebase项目。生成Firebase项目配置文件在Firebase控制台上,为您的Firebase项目添加一个新的Android应用程序或选择一个现有的Android应用程序。原创 2020-12-08 17:44:33 · 2059 阅读 · 0 评论 -
Flutter FCM - Flutter集成Firebase Cloud Messaging(FCM)
Firebase Cloud MessagingFirebase Cloud Messaging(FCM)是一种跨平台的消息传递解决方案,可让您可靠地免费发送消息。使用FCM,您可以通知客户端应用程序可以同步新电子邮件或其他数据。您可以发送通知消息来推动用户的重新参与和保留。对于即时消息之类的用例,一条消息可以将最多4 KB的有效负载传输到客户端应用程序。以下内容基于flutter 1.22.4版本安装1.添加依赖项dependencies: flutter: sdk: flutte原创 2020-12-08 15:38:43 · 3480 阅读 · 5 评论 -
flutter 1.22版本@required被替换成了required
解决方法:将pubspec.yaml中的environment改为以下内容:environment: sdk: ">=2.10.1 <3.0.0"并重启ide即可。原因这个是最近空安全的修改。现在,required是dart 2.10中的关键字。如果flutter版本升级到1.22,dart版本会随之升级上来,所以正常运行没有错误,但是编译器会报错。...原创 2020-11-04 11:19:08 · 5171 阅读 · 1 评论 -
Flutter 代码混淆 混淆Dart代码
代码混淆Flutter的代码混淆flutter的代码混淆就是混淆dart代码。代码混淆是修改应用程序二进制文件的过程,以使人们更难以理解。混淆将函数名和类名隐藏在已编译的Dart代码中,从而使攻击者很难对您的专有应用程序进行反向工程。Flutter代码混淆的做法Flutter版本小于1.16Android将以下行添加到<ProjectRoot> /android/gradle.properties:extra-gen-snapshot-options=--obfuscate有原创 2020-10-23 15:39:02 · 5645 阅读 · 1 评论 -
flutter 分享到whatsapp
android无需额外配置ios:<key>LSApplicationQueriesSchemes</key><array> <string>whatsapp</string></array>flutter :需要 url_launcher_launchWhatsapp() async {const url = "https://wa.me/?text=Your Message here";var encod原创 2020-09-29 22:26:30 · 1145 阅读 · 0 评论 -
FractionallySizedBox 按比例设置Widget的尺寸
FractionallySizedBox 按比例设置Widget的尺寸有时候,应用的设计是按比例给出的,例如这样 : 按钮应该占应用宽度的70%这时可以使用FractionallySizedBox来实现.构造方法const FractionallySizedBox({ Key key, this.alignment = Alignment.center, this.widthFactor, this.heightFactor, Widget child,}) 我们先看一下原创 2020-08-22 15:53:52 · 1458 阅读 · 0 评论 -
Flutter国际化 多语言 使用Flutter intl插件实现多语言
准备工作搜索插件 : Flutter Intl项目配置添加依赖:dev_dependencies:... //add this flutter_localizations: sdk: flutter在菜单栏的Tool下找到Flutter Intl 并选择Initalize for the project, 配置结束后效果如下:会在 pubspec.yaml中增加以下字段flutter_intl: enabled: true会在lib目录下增加 g原创 2020-08-20 00:24:35 · 13092 阅读 · 10 评论 -
Flutte接入firebase messaging(FCM)
flutter接入firebase messaging其实文档说的还算比较详细,但有些东西没有更新,照着文档无法正常集成。pub地址使用添加依赖 # firebase firebase_messaging: ^6.0.16Android配置在firebase后台添加应用使用Firebase控制台将Android应用添加到您的项目中:跟随助手,下载生成的google-services.json文件,并将其放置在android / app中。dependencies {原创 2020-08-14 14:23:41 · 4365 阅读 · 6 评论 -
flutter textField设定高度后,文字无法居中
今天遇到了一个关于TextField的问题:如果给textField设定的布局高度小于它的默认高度,那么它的居中就会有问题.修改后的效果:代码:Container( color: Colors.black12, constraints: BoxConstraints(maxHeight: 30), child: TextField( textAlignVertical: TextAl原创 2020-08-08 00:59:02 · 7741 阅读 · 0 评论 -
Flutter key
Flutter Key当widget在widget tree中移动时,key可以保留它的状态.key可用于保留用户的滚动位置,或在修改集合时保持状态.什么时候需要Key如果你还没有用过key,说明你可能还不需要使用key.事实也正是如此,大多数时候,我们不需要使用key.但是如果你发现自己需要添加,删除或重新排序处于某种状态的相同类型的widget的集合的时候,可能就是需要用到key的时候了.我们先用一个官方的例子来看一下key的作用 , 交换两个只有颜色不同的widgetclass Ke原创 2020-06-22 17:41:24 · 1487 阅读 · 0 评论 -
Flutter 复习总结
WidgetWidget是不可变的.Widget 是 描述 Element的配置 , 告诉 Element 这个实例如何去渲染。Widget 和 Element 之间是一对多的关系 .每当Widget插入到树中,就会生成一个对应的Element.Widget 可能被复用到树的多个部分,对应产生多个 Element 对象。RenderObject RenderObject是渲染树中的对象,所以它才是实际的渲染对象RenderObject 涉及到布局、计算原创 2020-06-18 11:27:37 · 885 阅读 · 0 评论 -
集成FlutterBoost
在Flutter发布了1.12版本之后 , 在原生程序中集成flutter的方式也有了改变 , 于是重新走一遍流程.本次操作基于以下版本:Flutter 1.12.13+hotfix.5 • channel stableAndroid Studio 3.5.2Android集成Flutter的意义有时一次全部在Flutter中重写整个应用程序是不切实际的。在这种情况下,Flutter...原创 2020-01-03 14:29:58 · 2756 阅读 · 0 评论 -
flutter 支持64位
最近谷歌商店有了一个新的通知:谷歌应用商店的具体要求为:从2019年8月1日开始,除了一直存在的32位版以外,新应用和应用更新都必须提交64位的版本,不过已经上架的Unity 5.6或更早版本引擎制作的游戏除外,他们可以只提供32位版本直到两年后的2021年8月。而截止发文时间,flutter打包出的apk还不支持64位, 于是记录一下自己的过程.1. 向libs添加32位和64位的flut...原创 2019-06-28 13:53:32 · 5734 阅读 · 11 评论 -
Flutter 状态管理之MobX
MobX一直是主要用于JS的主要的状态管理技术。flutter 现在关于状态管理的方案有 Scoped Model,Inherited Widget,Redux for Flutter,甚至是BLoC 。之前写React的时候就有用过mobx,很是喜欢 , 现在发现提供了dart版本,于是来学习一下. 也许会成为最好用的状态管理工具呢介绍MobX只是一个状态管理库,可以很容易地将应用程序的被...原创 2019-05-17 12:24:21 · 5528 阅读 · 5 评论 -
Android混入Flutter以及Android与Flutter通信
从零开始首先,创建一个新的项目文件夹用来存放Android项目和flutter的项目.原生的Android项目我给它命名为AndroidWithFlutterProject.然后创建一个flutter 的 module项目,我命名为flutter_with_android1 :看提示也知道,这个Module就是为了混合进原生的.创建好之后,我们的项目文件夹就变成了这个样子:二者在同...原创 2019-03-27 13:17:22 · 1710 阅读 · 0 评论 -
Dart 数据类型
Dart的所有东西都是对象。它们都继承自Object,默认是都是null。Dart中支持以下数据类型:Number 数值型String 字符串Boolean 布尔型List 数组Map 键值对Runes ([String]的符文(整数Unicode代码点))数值型 numDart中提供了两种数值类型, 分别是整型int和浮点型double.void main() { ...原创 2019-03-15 19:32:49 · 3948 阅读 · 0 评论 -
flutter 持久化存储-----数据库sqflite
Flutter中持久化存储数据有多种方案, 一般常用的有 shared_preferences 和 sqfiteshared_preferences: 包含NSUserDefaults(在iOS上)和SharedPreferences(在Android上),为简单数据提供持久存储。数据以异步方式持久保存到磁盘。sqflite: 是一款轻量级的关系型数据库,类似SQLite. 支持iOS...原创 2019-03-13 16:28:54 · 12022 阅读 · 9 评论 -
flutter 修改后台地址并自动打包脚本
脚本内容:@echo off setlocal enabledelayedexpansion set file=D:\Project\sale_aggregator_app\lib\common\constants.dartset "file=%file:"=%" for %%i in ("%file%") do set file=%%~fi echo. set replaced=t...原创 2019-03-04 12:04:07 · 1955 阅读 · 0 评论 -
flutter 分享插件 : flutter_share_me
已经开始用flutter做项目了 , 最近项目里有个需求 , 分享应用和商品(没错,电商类app) 到facebook,twitter,以及whatsapp.在pub上找了一圈,有俩插件有分享功能, 但不符合要求,于是自己花点时间写了一个.目前只支持Android(我并没有Mac).非常欢迎大家提交pull request和反馈. 一起完善代码!支持分享到facebook , twitter...原创 2018-12-13 15:29:33 · 9005 阅读 · 9 评论 -
flutter自定义View(CustomPainter) 之 canvas的方法总结
画布canvas画布是一个矩形区域,我们可以控制其每一像素来绘制我们想要的内容canvas 拥有多种绘制点、线、路径、矩形、圆形、以及添加图像的方法,结合这些方法我们可以绘制出千变万化的画面。虽然,画布可以画这些东西,但是决定这些图形颜色、粗细表现的还是画笔。画笔PaintPaint非常好理解,就是我们用来画图形的工具,我们可以设置画笔的颜色、粗细、是否抗锯齿、笔触形状以及作画风格。通...原创 2018-11-08 13:28:47 · 26314 阅读 · 3 评论 -
flutter 打包apk
前言完成项目时,我们需要将项目打包成一个apk,方便测试以及发布版本.并且发布版本还需要签名,今天把这一系列操作记录下来.App签名创建 keystore如果您有现有keystore,请跳至下一步。如果没有,请通过在运行以下命令来创建一个:keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validit...原创 2018-11-07 17:11:38 · 11305 阅读 · 9 评论 -
用flutter写一个精美的登录页面
先看效果图;源代码已上传到githubloading…原创 2018-10-14 00:41:10 · 37268 阅读 · 5 评论 -
Flutter中的自定义View的基本流程和相关知识
前言我们都知道官方有很多的Widget供我们使用,但它提供的再多,也无法满足产品和UI的需求,当然,谷歌官方也肯定想到了这一点,所以在flutter中,也是支持自定义View的。在Flutter中与绘制相关的是在Painting层次,具体见下图:这张Flutter架构图我相信大家肯定在不同的文章中见过很多次了。和Flutter自带的Wdiget一样,自定义的Widget也会经过Skia...原创 2018-10-18 15:15:11 · 3495 阅读 · 0 评论 -
flutter FutureBuilder的使用以及防止FutureBuilder不必要重绘的两种方法
前言:我们经常有这样的一个开发场景:一个页面进入之后先进行网络请求,此时显示一个圆圈(等待动画),等网络数据返回时显示一个展示网络数据的布局。例如下图:我们通常的做法是if(data==null){ return CircularProgressIndicator();}else{ return ListView(...);}大致就是数据返回之前我们加载一个组件,等数据返回值后...原创 2018-10-11 13:23:39 · 55318 阅读 · 22 评论 -
flutter概念介绍之 Widget - State- BuildContext - InheritedWidget
本文介绍了Flutter应用程序中Widget,State,BuildContext和InheritedWidget的重要概念。特别注意InheritedWidget,它是最重要且记录较少的小部件之一。难度:初学者前言Flutter中Widget,State和BuildContext的概念是每个Flutter开发人员需要完全理解的最重要概念之一。但是,文档很庞大,并不总是清楚地解释这个概...翻译 2018-10-11 18:09:02 · 7746 阅读 · 1 评论 -
flutter Container的decoration
decoration可以设置边框、背景色、背景图片、圆角等属性,非常实用。对于transform这个属性,一般有过其他平台开发经验的,都大致了解,这种变换,一般不是变换的实际位置,而是变换的绘制效果,也就是说它的点击以及尺寸、间距等都是按照未变换前的。 example:new Container( constraints: new BoxConstraints.expand( ...原创 2018-09-04 17:20:07 · 22708 阅读 · 1 评论 -
Flutter 滑动列表组件 ListView&&GridView
前言: 今天就来介绍下Flutter中的列表组件ListView和网格组件GirdView,嗯,果然是Google家的亲儿子,连名字都和Android里的一模一样。 好的吧,我们还是来看下这两个Widget的用法吧ListViewListView就是我们常见的列表组件,在平时的应用开发中十分的常见,无论你做的是什么类型的应用都会多多少少会用到ListView,所以要好好看下这篇文章...原创 2018-09-05 18:07:49 · 10675 阅读 · 2 评论 -
Flutter TabBar
Tab关键元素TabController 这是Tab页的控制器,用于定义Tab标签和内容页的坐标,还可配置标签页的切换动画效果等。TabController一般放入有状态控件中使用,以适应标签页数量和内容有动态变化的场景,如果标签页在APP中是静态固定的格局,则可以在无状态控件中加入简易版的DefaultTabController以提高运行效率,毕竟无状态控件要比有状态控件更省资源,运行...原创 2018-09-05 22:37:37 · 9680 阅读 · 0 评论 -
flutter Platform介绍
Platform在dart:io中,提供与Platform类的API奇偶校验,但使用实例属性而不是静态属性。这种差异允许在测试中使用这些API,您可以在其中提供模拟实现。看一下构造方法:class Platform { static int get numberOfProcessors =&amp;amp;gt; _numberOfProcessors; static String ge...原创 2018-09-06 21:13:58 · 5115 阅读 · 0 评论