![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
当走的路甚远
这个作者很懒,什么都没留下…
展开
-
Flutter UI基础 - 时间选择器
引入flutter_datetime_picker插件pubspec.yaml文件中引入:dependencies: flutter_datetime_picker: 1.2.6作用及使用选择时间组件参考网址:flutter_datetime_picker 使用方式: 选择日期import 'package:flutter_datetime_picker/flutter_datetime_picker.dart'; FlatButton( onPressed转载 2020-07-31 17:06:13 · 2019 阅读 · 0 评论 -
Flutter UI基础 - webview 使用和交互
在Flutter中使用webview,在pub.dev中查看,有几个组件都可以使用webview本文使用的是webview_flutter,它是Flutter团队开发的,目前还不是正式版,但已经可以使用。在iOS中底层调用的是WKWebView,在Android中底层调用的是WebView。webview_flutter 使用添加组件添加webview_flutter 主要代码 针对iOS,需要在ios-Runner-info.plist中添加WebView( in...转载 2020-07-31 11:51:36 · 1776 阅读 · 0 评论 -
Flutter UI基础 — ListView入门
一、ListTileFlutter提供的ListTile很好用了,提供了许多常见的列表 item 样式,如左图标、右图标、标题、副标题等,具体如下:const ListTile({ Key key, this.leading, this.title, this.subtitle, this.trailing, this.isThreeLine = false, this.dense, this.contentPadding,原创 2020-07-31 11:44:21 · 540 阅读 · 0 评论 -
Flutter UI基础 - Container详解
1. 简介A convenience widget that combines common painting, positioning, and sizing widgets.Container在Flutter中太常见了。官方给出的简介,是一个结合了绘制(painting)、定位(positioning)以及尺寸(sizing)widget的widget。可以得出几个信息,它是一个组合的widget,内部有绘制widget、定位widget、尺寸widget。后续看到的不少widget,都是转载 2020-07-31 11:38:05 · 284 阅读 · 0 评论 -
Flutter UI基础 - 层叠布局Stack的使用
一张原型图片上添加一行带背景的文字。使用Row Widget或者Column Widget是实现不了的,这时就需要使用Stack Widget,也就是层叠布局来实现了。直接上代码:import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext cont...转载 2020-07-31 11:29:48 · 657 阅读 · 0 评论 -
Flutter UI基础 - 布局之Row/Column/Stack
移动开发中常常会对各个Widget进行布局,本文主要介绍了Flutter中最基本的三种布局方式:Row、Column、Stack。从字面意思,我们也可以理解到,Row对应Android中的LinearLayout,orientation为Horizontal。Column对应于Android中的LinearLayout,orientation为Vertical。Stack对应于Android中的RelativeLayout,可以通过添加相应子控件,设置目标控件在父控件的布局规则。下面我们通过几个简单的例子介转载 2020-07-31 11:25:34 · 547 阅读 · 0 评论 -
Flutter UI基础 - 添加背景图片
Flutter 中添加背景图片可以使用给Container添加decoration的方式。如下代码:body: Container( decoration: BoxDecoration( image: DecorationImage( image: AssetImage("images/main_bg_with_blank.png"), fit: BoxFit.cover, ), ), child: Column(),)原创 2020-07-31 11:20:40 · 1148 阅读 · 0 评论 -
Flutter UI基础 - Row、Column详解
1. RowA widget that displays its children in a horizontal array.1.1 简介在Flutter中非常常见的一个多子节点控件,将children排列成一行。估计是借鉴了Web中Flex布局,所以很多属性和表现,都跟其相似。但是注意一点,自身不带滚动属性,如果超出了一行,在debug下面则会显示溢出的提示。1.2 布局行为Row的布局有六个步骤,这种布局表现来自Flex(Row和Column的父类):首先按照不受限制的主轴(m转载 2020-07-31 11:19:00 · 556 阅读 · 0 评论 -
Flutter UI基础 - Image.asset 图片铺满布局
使用BoxFit属性:Image.asset( 'assets/icon.png', fit: BoxFit.fill,)下面是属性值参考:原创 2020-07-31 10:19:28 · 2406 阅读 · 0 评论 -
Flutter UI基础 - DecoratedBox组件
DecoratedBox可以给child增加显示效果,如颜色,阴影,边框等const DecoratedBox({ Key key, @required this.decoration,//具体添加的效果 this.position = DecorationPosition.background,//效果是放在背景还是前景,前景会覆盖child Widget child, }) BoxDecoration 具体装饰const BoxDecoration原创 2020-07-30 15:01:07 · 872 阅读 · 0 评论 -
Flutter UI基础 - 分割线效果实现
Flutter中的分割线效果实现第一种:Divider(Double:height,Double:indent,color:color) 第二种:DecoratedBox(decoration:BoxDecoration(Border:border)) 第三种:用Widget 阴影达到分割线的效果,一个Widget 效果不明显,当两个都有阴影的Widget 相邻的时候就达到的分割线的效果第一种:Divider(Double:height,Double:indent,color:color)1.原创 2020-07-30 14:58:51 · 772 阅读 · 0 评论 -
Flutter UI基础 - GridView
GridViewGridView可以构建一个二维网格列表,其默认构造函数定义如下:GridView({ Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap = false, EdgeInsetsGeometry padding, @req原创 2020-07-30 11:26:06 · 395 阅读 · 0 评论 -
Flutter UI - 打造一个圆形滑块(Slider)
原文地址:How to build a circular slider in Flutter原文作者:David Anaya译文出自:掘金翻译计划本文永久链接:github.com/xitu/gold-m…译者:DevMcryYu校对者:MollyAredtana,JasonLinkinBright转载 2020-07-30 11:25:45 · 1453 阅读 · 0 评论 -
Flutter UI基础 - 点击展开和关闭
import 'package:flutter/material.dart';import 'expansion_tile_demo.dart';main(){ runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', ...原创 2020-07-28 11:14:48 · 911 阅读 · 0 评论 -
Flutter UI基础 - Drawer 抽屉视图与自定义header
移动开发中,drawerLayout抽屉视图是比较常用的一种控件。一般将用户的头像,用户名等信息在抽屉视图中呈现。drawer中也可以提供一些选项,比如跳转去设置页,跳转去用户资料页面等等。Flutter提供了Drawer组件;结合ListView等组件,开发者可以快速地制作出抽屉视图。使用material中的UserAccountsDrawerHeader使用material中的UserAccountsDrawerHeader,设置accountName和currentAccountPictu原创 2020-07-28 10:49:21 · 1055 阅读 · 0 评论 -
Flutter UI基础 - AppBar中标题文字如何居中
ios下AppBar中的标题默认是居中对齐,而在安卓下AppBar中的标题默认是左对齐。如果想统一居中对齐,参考以下示例代码:AppBar( centerTitle: true, // 标题居中 ...)原创 2020-07-28 10:22:03 · 10587 阅读 · 0 评论 -
Flutter UI基础 - 侧拉抽屉菜单
在移动开发中,我们可以通过底部导航栏、标签页或是侧边抽屉菜单来实现导航。这是在小屏幕上可以充分利用空间。我们设计不仅要实用而且要有趣,这样才算得上好的 UI 设计。这件我们在 Scaffold 通常是上下结构,头部是标题栏下面主界面。@overrideWidget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar(title: Text(title),),.转载 2020-07-28 10:08:46 · 679 阅读 · 0 评论 -
Flutter 插件笔记 | 屏幕适配 flutter_screenutil
本节将介绍一下屏幕适配flutter_screenutil。 packages链接:flutter_screenutil导入项目中使用flutter_screenutil,需要在项目目录中的pubspec.yaml文件中的dependencies里导入package。dependencies: # 最新的版本,版本会迭代,需保持最新的 flutter_screenutil: ^0.5.1导入后,运行flutter packages get获取刚才添加好的flutter_sc.转载 2020-07-27 19:51:31 · 3016 阅读 · 0 评论 -
Flutter 日期插件date_format 中文 国际化 及flutter_cupertino_date_picker
Flutter中的日期和时间戳//日期时间戳转换var _nowTime = DateTime.now();//获取当前时间print(_nowTime);print(_nowDate.millisecondsSinceEpoch); //13位时间戳 1575389234667print(DateTime.fromMillisecondsSinceEpoch(1575389234667)); //时间戳转为日期2019-12-03 16:07:14.667展示一个时间,会有多种形式,比如转载 2020-07-27 16:51:55 · 3493 阅读 · 0 评论 -
Flutter 路由跳转fluro
文章目录 添加依赖 新建相关文件 初始化配置 使用路由 路由执行startActivityForResult相似操作 添加依赖#路由跳转 fluro: ^1.4.0新建相关文件 新建application.dart文件,用于跳转时获取router import 'package:fluro/fluro.dart';class Application{ static Router router;}2. 新建route_handlers.da转载 2020-07-27 16:42:40 · 1265 阅读 · 0 评论 -
Flutter Dart 和 Flutter json转实体类(插件自动生成)
Json数据转成实体类的好处将Json数据转成实体类可以方便我们开发的时候使用数据,手动输入字段名称的话很容易出错,并且接口多的话很不好维护。Flutter中是否有Gson、FastJson这样的库在Android原生开发中,我们有很好用的Gson、FastJson等第三方库来帮助我们将json转成实体类。但是,在Flutter中可能不会有这样的第三方库供我们使用了,详细原因请看JSON and serializationFlutter 中如何处理JsonFlutter给我们提供了d..转载 2020-07-27 11:55:36 · 3574 阅读 · 0 评论 -
Flutter Dio引入和简单的Get/Post请求
先在pubspec.yaml中引入Dio包如图所示认识Dio库:dio是一个dart的 http请求通用库,目前也是大陆使用最广泛的库,国人开发,完全开源。 flutter的插件包管理:学了引入dio包,并简单的学习了pubspec.yaml的结构和编写注意事项。 get请求的编写:我们以一个充满正能量的小Demo讲述了get请求的实现,并成功的返回了结果。Get请求和POST请求都是在工作中最重要的两种请求。一般GET请求用于获取数据,POST请求用于提交数据。在dart文件中写入代码:原创 2020-07-27 11:28:25 · 1452 阅读 · 0 评论 -
Flutter UI基础 - Widgets 之 InkWell 和 Ink
InkWellInkWell组件在用户点击时出现“水波纹”效果,InkWell简单用法:InkWell( onTap: (){}, child: Text('这是InkWell点击效果'),)onTap是点击事件回调,如果不设置无法出现“水波纹”效果,效果如下:设置水波纹颜色:InkWell( onTap: () {}, splashColor: Colors.red, ...)效果如下:设置高亮颜...原创 2020-07-23 10:48:09 · 1768 阅读 · 2 评论 -
Flutter UI基础 - 路由之Navigator详解
含义:Navigator 继承自 StatefulWidget,它也是小组件,它有很多相关静态函数,可以帮我们达到页面跳转和数据交互的功能:push 将设置的router信息推送到Navigator上,实现页面跳转。of 主要是获取 Navigator最近实例的好状态。pop 导航到新页面,或者返回到上个页面。canPop 判断是否可以导航到新页面maybePop 可能会导航到新页面popAndPushNamed 指定一个路由路径,并导航到新页面。popUntil 反复执行pop 直到该转载 2020-07-22 18:20:23 · 2235 阅读 · 0 评论 -
Flutter 网络请求之基于dio的简单封装
dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等。本文是基于dio库的简单二次封装,以适应我们平常开发中常用的get请求和post请求。添加依赖dependencies: dio: ^2.1.0dio封装首先,对dio进行初始化。这里使用工厂构造函数创建DioUtil,在Dart中,当实现一个使用 factory 关键词修饰的构造函数时,这个构造函数不必创建类的新实.转载 2020-07-22 14:24:25 · 2171 阅读 · 0 评论 -
Flutter UI基础 - FadeTransition实现透明度渐变动画
flutter 动画状态监听器AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象,在屏幕刷新的每一帧,就会生成一个新的值, // 默认情况下,AnimationController在给定的时间段内会线性的生成从0.0到1.0的数字 //用来控制动画的开始与结束以及设置动画的监听 //vsync参数,存在vs转载 2020-07-21 18:43:33 · 844 阅读 · 0 评论 -
Flutter UI基础 - setState更新原理和流程
推荐学习项目Flutter版本微信 (目前已修复Flutter版本兼容问题) nav_router (flutter最简单/轻量/便捷的路由管理方案) FlutterCandies全家桶 (各种优秀的轮子)本文最新版地址:http://book.flutterj.com/chapter2/setstate.html调用 setState()必须是没有调用过 dispose()方法,不然出错,可通过mounted属性来判断调用此方法是否合法。if (mounted) { se.转载 2020-07-21 18:18:37 · 719 阅读 · 0 评论 -
Flutter UI基础 - Stack
StackStack 这个是Flutter中布局用到的组件,跟Android中FrameLayout很像,都是可以叠加的现实View,具体的使用细节还是有些不同的.构造函数Stack({ Key key, this.alignment = AlignmentDirectional.topStart, this.textDirection, this.fit = StackFit.loose, this.overflow = Overflow.clip, List<转载 2020-07-21 17:19:50 · 873 阅读 · 0 评论 -
Flutter UI基础 - Opacity和AnimatedOpacity
Flutter中移除一个控件非常容易,只需要在重新创建中移除即可,如果想要移除控件同时它的位置依然保留,类似于Android中View的invisible,比如Row中有3个颜色块,分别为1、2、3,代码如下:Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( height: 80, width: 80, color: Color原创 2020-07-21 16:54:01 · 290 阅读 · 0 评论 -
Flutter UI基础 - Color
4种定义Color的方式:Color c = const Color(0xFF42A5F5);//16进制的ARGBColor c = const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);Color c = const Color.fromARGB(255, 66, 165, 245);Color c = const Color.fromRGBO(66, 165, 245, 1.0);//opacity:不透明度或者直接使用Colors ,Colors原创 2020-07-21 16:49:21 · 208 阅读 · 0 评论 -
Flutter UI基础 - Opacity
使子Widget部分透明的小部件。此类将其子级绘制到中间缓冲区中,然后将子级混合回到部分透明的场景中。对于除0.0和1.0以外的不透明度值,此类相对昂贵,因为它需要将子级绘制到中间缓冲区中。对于值0.0,根本不会绘制该子项。对于值1.0,将立即绘制该子级,而无需中间缓冲区。0.0: 全透明1.0:不透明例子:Opacity( opacity: _visible ? 1.0 : 0.0, child: const Text('Now you see ...原创 2020-07-21 16:47:29 · 170 阅读 · 0 评论 -
Flutter UI基础 - Widgets之Expanded
Expanded概述Expanded是用于展开Row,Column或Flex的子child的Widget。 使用Expanded可以使[Row],[Column]或[Flex]的子项扩展以填充主轴中的可用空间(例如,水平用[Row]或垂直用[Column])。 如果扩展了多个子节点,则根据[flex]因子将可用空间划分为多个子节点。[Expanded]小部件必须是[Row],[Column]或[Flex]的后代,并且从[Expanded]小部件到其封闭的[Row],[Column]或[Flex]的路径原创 2020-07-21 13:52:58 · 128 阅读 · 0 评论 -
Flutter UI基础 - ClipRRect
通过UI部分了解一下 Flutter中切割圆形,角度边缘等问题。通过下面代码可以实现,下图效果效果如下如果修改 borderRadius:const BorderRadius.all(const Radius.circular(90.0)) 的 90.0 的不同值会得到不同的圆角效果,这里读者自行验证。这里的borderRadius:const BorderRadius.all(const Radius.circular(90.0)),还可以修改成borderRadi...原创 2020-07-20 17:00:58 · 1491 阅读 · 0 评论 -
Flutter sdk降级、回退、升级降级到指定的版本方法
很多朋友刚开始安装了最新版本的sdk1.12,新版本sdk修复了大量的bug, 但是老项目大多使用的老版本的sdk1.9, 许多插件报了一大堆错误,不得不回退回去老版本,对git版本控制不太熟悉,就查了一下;先去Flutter github查看一下你想回退版本提交记录需要回退的版本提交记录一长串 复制下来,cd进入到存放flutter sdk目录,执行回退git reset --hard 7a4c33425ddd78c54aba07d86f3f9a4a0051769b重新执行fl.原创 2020-07-16 11:02:02 · 4155 阅读 · 0 评论 -
Flutter 报错:Could not resolve io.flutter:flutter_embedding_debug:1.0.0-ee76268252c22f5c11e82a7b87423c
报错信息:解决方法:打开build.gradle文件buildscript { ext.kotlin_version = '1.3.50' repositories { google() jcenter() maven { url "http://download.flutter.io" } } dependencies { classpath 'com.android.tools...原创 2020-07-14 15:56:39 · 2156 阅读 · 1 评论 -
Flutter 报错:Could not determine the dependencies of task ‘:app:compileDebugJavaWithJavac‘.
报错信息:AILURE: Build failed with an exception. * What went wrong:Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.> Could not create service of type AnnotationProcessorDetector using JavaGradleScopeServices.createAnnot.原创 2020-07-14 15:50:43 · 4145 阅读 · 0 评论 -
Flutter 报错:Waiting for another flutter command to release the startup lock
问题引入通过命令行执行flutter pub get或其他flutter命令时,报错如下:Waiting for another flutter command to release the startup lock...解决方案关闭Android Studio 打开flutter安装目录/bin/cache 删除lockfile文件 此时可在命令行再执行flutter相关命令,完美解决...原创 2020-07-14 11:39:51 · 198 阅读 · 0 评论 -
Flutter Mac下终端不识别flutter指令
很多朋友在学习flutter的时候,发现已经配置了环境变量,那为什么终端还是不识别flutter指令呢。遇到这种情况的,可以将环境变量迁移到~/.zshrc输入以下环境变量export GRADLE_HOME=/Users/mac/.gradle/wrapper/dists/gradle-4.6-all/bcst21l2brirad8k2ben1letg/gradle-4.6export PATH=$PATH:$GRADLE_HOME/binexport PUB_HOSTED_..原创 2020-07-14 11:36:20 · 1262 阅读 · 0 评论 -
Flutter mac下开发环境搭建
1.在Dart中有链接进入,下载Flutter SDKhttps://www.dartcn.com/tools/2.安装Flutterhttps://flutter.dev/docs/get-started/install/macos下载镜像特别慢,我直接在githup下载了git clone https://github.com/flutter/flutter.git -b stable3.配置环境变量打开.bash_profile文件vim ~/.bash_profil原创 2020-07-10 11:02:47 · 264 阅读 · 0 评论