
Flutter
Flutter整理
Android_小菜菜
不断的学习
展开
-
The current Flutter SDK version is 0.0.0-unknown.
如图 刚安装好后Flutter version 获取不到为 0.0.0解决办法:命令 sudo xcode-select --switch 将xcode.app拖进来执行然后使用flutter doctor 查看原创 2021-12-10 17:34:59 · 2315 阅读 · 0 评论 -
Flutter圆角阴影边框
Container( width: 100, height: 50, margin: EdgeInsets.only(left: 10,top: 10,right: 10,bottom: 10), decoration: BoxDecoration( border: new Border.all( color: Colors.grey, //边框颜色原创 2021-07-20 15:37:48 · 640 阅读 · 0 评论 -
Flutter上传图片到七牛
依赖qiniu_flutter_sdk: ^0.3.0导入import 'package:qiniu_flutter_sdk/qiniu_flutter_sdk.dart';使用// 创建 storage 对象Storage storage = Storage();// 创建 putController 对象PutController putController = PutController();// 添加任务进度监听putController.addProgressListene原创 2021-06-25 18:18:12 · 949 阅读 · 1 评论 -
Flutter获取版本信息
依赖package_info: ^2.0.2导入import 'package:package_info/package_info.dart';使用PackageInfo.fromPlatform().then((PackageInfo packageInfo) { String appName = packageInfo.appName; String packageName = packageInfo.packageName; String version = packageI原创 2021-06-22 17:50:46 · 2418 阅读 · 1 评论 -
Flutter文件目录获取
临时目录: 可以使用 getTemporaryDirectory() 来获取临时目录; 系统可随时清除的临时目录(缓存)。在iOS上,这对应于NSTemporaryDirectory() 返回的值。在Android上,这是getCacheDir()返回的值。文档目录: 可以使用getApplicationDocumentsDirectory()来获取应用程序的文档目录,该目录用于存储只有自己可以访问的文件。只有当应用程序被卸载时,系统才会清除该目录。在iOS上,这对应于NSDocumentDir原创 2021-06-16 11:54:36 · 6795 阅读 · 0 评论 -
Flutter对话框
AlertDialogconst AlertDialog({ Key key, this.title, //标题 this.titlePadding, // 标题内边距 this.titleTextStyle, //标题样式 this.content, // 内容 this.contentPadding,//内容内边距 this.contentTextStyle,// 内容样式 this.actions, // 按钮数组 this.backgroundColor, //原创 2021-06-11 16:38:00 · 966 阅读 · 2 评论 -
Flutter异步UI更新FutureBuilder和StreamBuilder
FutureBuilderFutureBuilder会依赖一个Future,它会根据所依赖的Future的状态来动态构建自身。future:FutureBuilder依赖的Future,通常是一个异步耗时任务。initialData:初始数据,用户设置默认数据。builder:Widget构建器;该构建器会在Future执行的不同阶段被多次调用,实现一个路由,当该路由打开时我们从网上获取数据,获取数据时弹一个加载框;获取结束时,如果成功则显示获取到的数据,如果失败则显示错误。这里暂时使用模原创 2021-06-10 16:14:06 · 641 阅读 · 0 评论 -
Flutter数据共享InheritedWidget
InheritedWidget是Flutter中非常重要的一个功能型组件,它提供了一种数据在widget树中从上到下传递、共享的方式。首先,我们通过继承InheritedWidget,将当前计数器点击次数保存在ShareDataWidget的data属性中:class ShareDataWidget extends InheritedWidget{ ShareDataWidget({ required this.data, required Widget child }):sup原创 2021-06-09 18:29:15 · 301 阅读 · 9 评论 -
Flutter导航返回拦截WillPopScope
当用户在某一个时间段内点击两次时,才会认为用户是要退出(而非误触)。Flutter中可以通过WillPopScope来实现返回按钮拦截,onWillPop是一个回调函数,当用户点击返回按钮时被调用(包括导航返回按钮及Android物理返回按钮)。该回调需要返回一个Future对象,如果返回的Future最终值为false时,则当前路由不出栈(不会返回);最终值为true时,当前路由出栈退出。示例:当用户在1秒内点击两次返回按钮时,则退出;如果间隔超过1秒则不退出,并重新记时。import 'pack原创 2021-06-09 17:32:04 · 470 阅读 · 0 评论 -
Flutter滚动监听及控制 ScrollController
ScrollController常用的属性和方法:offset:可滚动组件当前的滚动位置。jumpTo(double offset)、animateTo(double offset,…):这两个方法用于跳转到指定的位置,它们不同之处在于,后者在跳转时会执行一个动画,而前者不会。ScrollController间接继承自Listenable,可以根据ScrollController来监听滚动事件ScrollPosition是用来保存可滚动组件的滚动位置的。一个ScrollController对象可原创 2021-06-09 16:02:33 · 8719 阅读 · 0 评论 -
Flutter组件CustomScrollView
CustomScrollView是可以使用Sliver来自定义滚动模型(效果)的组件。可滚动组件的Sliver版在Flutter中,Sliver通常指可滚动组件子元素,但在CustomScrollView中,需要粘起来的可滚动组件就是CustomScrollView的Sliver了为了让可滚动组件能和CustomScrollView配合使用,Flutter提供了一些可滚动组件的Sliver版,如SliverList、SliverGrid等。实际上Sliver版的可滚动组件和非Sliver版的可滚动组原创 2021-06-09 14:21:30 · 525 阅读 · 1 评论 -
Flutter组件GridView
GridView可以构建一个二维网格列表属性gridDelegate类型是SliverGridDelegate,它的作用是控制GridView子组件如何排列(layout)。SliverGridDelegate是一个抽象类,定义了GridView Layout相关接口,子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个SliverGridDelegate的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWi原创 2021-06-09 10:58:34 · 748 阅读 · 0 评论 -
Flutter组件ListView
ListView是最常用的可滚动组件之一,它可以沿一个方向线性排布所有子组件,并且它也支持基于Sliver的延迟构建模型。属性:itemExtent:该参数如果不为null,则会强制children的“长度”为itemExtent的值;这里的“长度”是指滚动方向上子组件的长度,也就是说如果滚动方向是垂直方向,则itemExtent代表子组件的高度;如果滚动方向为水平方向,则itemExtent就代表子组件的宽度。shrinkWrap:该属性表示是否根据子组件的总长度来设置ListView的长度,默原创 2021-06-08 17:37:19 · 403 阅读 · 2 评论 -
Flutter可滚动组件SingleChildScrollView
当组件内容超过当前显示视口(ViewPort)时,如果没有特殊处理,Flutter则会提示Overflow错误。因此,Flutter提供了多种可滚动组件(Scrollable Widget)用于显示列表和长布局。可滚动组件都直接或间接包含一个Scrollable组件。Scrollable({ this.axisDirection = AxisDirection.down, this.controller, this.physics,})axisDirection滚动方向。physi原创 2021-06-08 15:33:27 · 2316 阅读 · 0 评论 -
Flutter裁剪Clip
Flutter中提供了一些剪裁函数,用于对组件进行剪裁。ClipOval子组件为正方形时剪裁为内贴圆形,为矩形时,剪裁为内贴椭圆ClipRRect将子组件剪裁为圆角矩形ClipRect剪裁子组件到实际占用的矩形大小(溢出部分剪裁)例import 'package:flutter/material.dart';class StudyClip extends StatelessWidget{ @override Widget build(BuildContext context) {原创 2021-06-08 11:59:56 · 373 阅读 · 0 评论 -
Flutter组件Scaffold、TabBar、底部导航
Scaffold一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer)以及底部Tab导航菜单等。Scaffold是一个路由页的骨架,我们使用它可以很容易地拼装出一个完整的页面。实现以下界面一个导航栏导航栏右边有一个分享按钮有一个底部导航右下角有一个悬浮的动作按钮代码如下:import 'package:flutter/material.dart';class StudyScaffold extends StatefulWidget{ @override State<原创 2021-06-08 11:07:14 · 1104 阅读 · 0 评论 -
Flutter容器组件Container
Container是一个组合类容器,它本身不对应具体的RenderObject,它是DecoratedBox、ConstrainedBox、Transform、Padding、Align等组件组合的一个多功能容器,。Container({ this.alignment, this.padding, //内边距 Color color, // 背景色 Decoration decoration, // 背景装饰 Decoration foregroundDecoration, //前景装原创 2021-06-07 17:50:34 · 189 阅读 · 1 评论 -
Flutter变换Transform
Transform可以在其子组件绘制时对其应用一些矩阵变换来实现一些特效。Matrix4是一个4D矩阵,通过它我们可以实现各种矩阵操作,Container( margin: const EdgeInsets.fromLTRB(20, 100, 20, 20), color: Colors.green, child: Transform( alignment: Alignment.bottomRight, //原点 transform: Matrix4.skewY(0.5), /原创 2021-06-07 16:20:53 · 1200 阅读 · 0 评论 -
Flutter装饰容器DecoratedBox
DecoratedBox可以在其子组件绘制前(或后)绘制一些装饰(Decoration),如背景、边框、渐变等。decoration:代表将要绘制的装饰,它的类型为Decoration。Decoration是一个抽象类,它定义了一个接口 createBoxPainter(),子类的主要职责是需要通过实现它来创建一个画笔,该画笔用于绘制装饰。position:此属性决定在哪里绘制Decoration,它接收DecorationPosition的枚举类型,该枚举类有两个值:background:在子组原创 2021-06-07 15:01:32 · 205 阅读 · 0 评论 -
Flutter尺寸限制类容器 ConstrainedBox
ConstrainedBox用于对子组件添加额外的约束。如想让子组件的最小高度是100像素,用const BoxConstraints(minHeight: 100.0)作为子组件的约束实现一个最小高度为100,宽度尽可能大的红色容器。ConstrainedBox( constraints: BoxConstraints( minWidth: double.infinity, minHeight: 100, ), child: Container( height: 1原创 2021-06-07 11:33:44 · 532 阅读 · 0 评论 -
Flutter容器类组件Padding
Padding可以给其子节点添加填充(留白),和边距效果类似。属性EdgeInsetsfromLTRB(double left, double top, double right, double bottom):分别指定四个方向的填充。all(double value) :所有方向均使用相同数值的填充。only({left, top, right ,bottom }):可以设置具体某个方向的填充(可以同时指定多个方向)。symmetric({ vertical, horizontal }):原创 2021-06-07 10:49:11 · 178 阅读 · 0 评论 -
Flutterd对齐与相对定位组件Align
Align 组件可以调整子组件的位置,并且可以根据子组件的宽高来确定自身的的宽高,alignment :需要一个AlignmentGeometry类型的值,表示子组件在父组件中的起始位置。AlignmentGeometry 是一个抽象类,它有两个常用的子类:Alignment和 FractionalOffsetwidthFactor和heightFactor用于确定Align 组件本身宽高的属性;它们是两个缩放因子,会分别乘以子元素的宽、高,最终的结果就是Align 组件的宽高。如果值为null,则原创 2021-06-04 18:28:46 · 592 阅读 · 0 评论 -
Flutter层叠布局 Stack、Positioned
Flutter中使用Stack和Positioned这两个组件来配合实现绝对定位。Stack允许子组件堆叠,而Positioned用于根据Stack的四个角来确定子组件的位置。Stackalignment:此参数决定如何去对齐没有定位(没有使用Positioned)或部分定位的子组件textDirection:和Row、Wrap的textDirection功能一样,都用于确定alignment对齐的参考系fit:此参数用于确定没有定位的子组件如何去适应Stack的大小。StackFit.loo原创 2021-06-04 17:02:22 · 805 阅读 · 0 评论 -
Flutter流式布局
Row( children: <Widget>[ Text("大帅哥"*100), ], ),如果子widget超出屏幕范围,则会报溢出错误。这是因为Row默认只有一行,如果超出屏幕不会折行。我们把超出屏幕显示范围会自动折行的布局称为流式布局。Flutter中通过Wrap和Flow来支持流式布局。Wrapspacing:主轴方向子widget的间距runSpacing:纵轴方向的间距runAlignment:纵轴方向的对齐方式body: Contain原创 2021-06-04 16:12:42 · 1521 阅读 · 0 评论 -
Flutter弹性布局Flex
弹性布局允许子组件按照一定比例来分配父容器空间。FlexFlex组件可以沿着水平或垂直方向排列子组件,Flex本身功能是很强大的,也可以和Expanded组件配合实现弹性布局。Flex继承自MultiChildRenderObjectWidget,对应的RenderObject为RenderFlex,RenderFlex中实现了其布局算法。Expanded可以按比例“扩伸” Row、Column和Flex子组件所占用的空间。flex参数为弹性系数,如果为0或null,则child是没有弹性的,即原创 2021-06-04 14:53:59 · 207 阅读 · 0 评论 -
Flutter线性布局Row和Column
线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局。RowRow可以在水平方向排列其子widget。属性有textDirection:表示水平方向子组件的布局顺序(默认从左往右)mainAxisSize:表示Row在主轴(水平)方向占用的空间,默认是MainAxisSize.max,表示尽可能多的占用水平方向的空间,此时无论子widgets实际占用多少水平空间,Row的宽度始终等于水平方向的最大宽度;而MainAxisSize.min表示尽可能少的占原创 2021-06-04 14:15:01 · 398 阅读 · 0 评论 -
Flutter基础组件Checkbox,Switch,进度指示器
Checkbox 和 SwitchCheckbox的大小是固定的,无法自定义,而Switch只能定义宽度,高度也是固定的import 'package:flutter/material.dart';class StudyCheckbox extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title:原创 2021-06-03 17:31:28 · 537 阅读 · 4 评论 -
Flutter基础组件TextField和Form
TextField输入框TextField用于文本输入,它提供了很多属性。如下:controller:编辑框的控制器,通过它可以设置/获取编辑框的内容、选择编辑内容、监听编辑文本改变事件。focusNode:用于控制TextField是否占有当前键盘的输入焦点。InputDecoration:用于控制TextField的外观显示,如提示文本、背景颜色、边框等keyboardType:用于设置该输入框默认的键盘输入类型text 文本输入键盘multiline 多行文本,需和maxLi原创 2021-06-03 16:25:57 · 1339 阅读 · 1 评论 -
Flutter基础组件Image和Icon
Flutter中,我们可以通过Image组件来加载并显示图片,Image的数据源可以是asset、文件、内存以及网络。ImageProviderImageProvider 是一个抽象类,主要定义了图片数据获取的接口load(),从不同的数据源获取图片需要实现不同的ImageProvider ,如AssetImage是实现了从Asset中加载图片的ImageProvider,而NetworkImage实现了从网络加载图片的ImageProvider。ImageImage widget有一个必选的im原创 2021-06-02 17:59:05 · 301 阅读 · 0 评论 -
Flutter基础组件Button
Material组件库中的按钮Material 组件库中提供了多种按钮组件如RaisedButton、FlatButton、OutlineButton等所有Material 库中的按钮都有如下相同点:按下时都会有“水波动画”(又称“涟漪动画”,就是点击时按钮上会出现水波荡漾的动画)。有一个onPressed属性来设置点击回调,当按钮按下时会执行该回调,如果不提供该回调则按钮会处于禁用状态,禁 用状态不响应用户点击。RaisedButton默认带有阴影和灰色背景。按下后,阴影会变大FlatBut原创 2021-06-02 15:15:41 · 181 阅读 · 0 评论 -
Flutter基础组件Text
class StudyText extends StatelessWidget{ @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("文本及样式"), ), body: Container( child: Column( //测试Row对齐方式,排除Column默认居中对齐原创 2021-06-02 11:59:38 · 177 阅读 · 0 评论 -
Android Studio 下打包Flutter项目
首先创建一个 .jks文件 这里不作过多叙述在android --> app 下创建 key文件夹 将 .jks文件放入key文件夹中在app下的 build.gradle 文件中添加 signingConfigs { release { storeFile file("key/keystore.jks") storePassword '123456' keyAlias = 'key0'原创 2021-05-25 16:08:39 · 924 阅读 · 0 评论 -
创建Flutter应用
创建Flutter应用File --> New --> New Flutter Project点击Next点击Next点击Finish 即可创建成功然后连接模拟器运行原创 2021-05-25 15:49:08 · 122 阅读 · 0 评论 -
Flutter安装及Android Studio配置
windows下Flutter安装下载地址 https://flutter.dev/docs/development/tools/sdk/releases最新版本为2.2.0下载后然后解压到D盘目录打开 “D:\flutter\flutter_console.bat”配置环境变量,就可以在其他地方运行flutter命令了。JDK 和 Android Studio 安装这里就不作展开了。在 Android Studio 中安装Flutter插件File --> Settings原创 2021-05-25 15:15:06 · 350 阅读 · 1 评论