flutter开发
逐流间隔年
没什么尺寸
展开
-
Flutter 环境配置
Flutter 环境配置原创 2022-03-21 16:26:07 · 2805 阅读 · 0 评论 -
flutter 集成高德地图map
在flutter 中如何集成地图呢?效果: #高德地图 flutter_2d_amap: git: url: https://github.com/simplezhli/flutter_2d_amap.git这个地图主要包含功能:处理地图所需权限申请定位并自动移动地图至当前位置默认获取POI数据并返回支持传入经纬度来移动地图支持搜索POI使用方式...原创 2019-11-20 14:28:28 · 1835 阅读 · 0 评论 -
flutter 的TextField复杂使用和设置左右图标
效果: Expanded( child: Container( height: 32, margin: EdgeInsets.only(right: 10), decoration: BoxDecoration( color: Colours....原创 2019-11-20 11:33:47 · 9782 阅读 · 0 评论 -
flutter FlatButton基本使用和设置按钮大小
FlatButton 按钮在默认情况下是有大小的,FlatButton 是没有提供设置按钮大小问题的,如何设置大小那么就在包裹SizedBox SizedBox( width: 50, height: 32, child: FlatButton( //为什么要设置左右paddin...原创 2019-11-20 10:57:13 · 12760 阅读 · 0 评论 -
flutter 输入框TextFormField,封装和使用
在flutter 中我们经常会用这样应用场景,所以我们可以封装一个输入框import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:keyboard_actions/keyboar...原创 2019-11-15 17:07:24 · 3350 阅读 · 0 评论 -
flutter SafeArea 用来解决刘海屏适配问题
class FlutterAlign extends StatelessWidget { @override Widget build(BuildContext context) { return Align( alignment: Alignment(-1, -1), child: Container( child: Text( ...原创 2019-11-14 11:16:46 · 1176 阅读 · 0 评论 -
flutter 如果需要打电话或者打电话
在项目开发中可能需要完成拨打电话或者访问浏览器的功能实现,我们可以通过url_launcher 插件来完成功能开发url_launcher: 5.2.3拨打电话 /// 调起拨号页 static void launchTelURL(String phone) async { String url = 'tel:'+ phone; if (await canLaunch(...原创 2019-11-13 15:10:48 · 2301 阅读 · 0 评论 -
flutter Provider跨组件状态共享详解
在flutter 如何进行不同Widget或者不同Page之间如何实现通讯或者说,A Widget通知 B Widget数据更新或者状态更新,但是在flutter 之中在对Provider跨组件状态共享,解析比较模糊,在Widget中状态是私有的,状态要跨组件共享,也就是组件之间通讯,插件:provider: ^3.1.0+1引入 Provider跨组件状态共享概念的目的:1.数据发生...原创 2019-11-08 17:16:22 · 3653 阅读 · 0 评论 -
flutter Route路由基本用法
Flutter 命名路由、路由组、路由退出、路由堆栈在flutter中需要进行页面跳转,也是需要用到路由Route,关键Navigator与Route,Navigator负责单元Route路由,压入和弹出,单元路由也就是我们需要跳转页面 ,比如HomePage()Navigator关键使用的4个属性•initialRoute: 初始路由的,也就是进入APP,默认页面•onGenerateR...原创 2019-11-07 13:58:39 · 5122 阅读 · 0 评论 -
flutter 键盘显示和隐藏
给TextField指定一个FocusNode.要显示键盘调下面的代码FocusScope.of(context).requestFocus(focusNode);隐藏键盘:focusNode.unfocus();原创 2019-11-06 17:06:46 · 3247 阅读 · 0 评论 -
flutter 如何判断页面渲染完毕
那么在flutter中,我们获取大小也必须在元素渲染完成的时候才行,而有些应用场景要求在第一时间获取到这个元素的大小。那么怎么在第一时间判断元素渲染完成呢?flutter中的WidgetsBuiding这个类就可以用来判断:WidgetsBinding.instance.addPostFrameCallbackSchedule a callback for the end of this fr...原创 2019-11-06 14:24:19 · 9600 阅读 · 0 评论 -
flutter 如何实现延迟效果
在实际开发中,我们经常需要对操作进行一个延迟效果Flutter自带函数Future.delayed(Duration(milliseconds: 500), () {});使用RxdartObservable.just(1).delay(new Duration(milliseconds: 500)).listen((_) { });简单封装下Rxdartimport ...原创 2019-11-06 14:16:49 · 6020 阅读 · 0 评论 -
flutter 加载图片资源包含本地和网络资源
配置资源1.在pubspec.yaml中的flutter部分添加如下内容:assets: - images/avatar.pngflutter 加载本地资源new Image.asset("assets/images/wechat.png")// ornew Image( image: new AssetImage("assets/images/wechat.png")...原创 2019-11-06 09:41:42 · 1077 阅读 · 0 评论 -
flutter 中Sliver一些想法
在flutter中,Sliver 滚动视图差,需要配合CustomScrollView,嵌套SliverGrid,SliverFixedExtentList配合使用,我有两个疑问1.SliverGrid 和GridView 的区别2.CustomScrollView的SingleChildScrollView区别SliverGrid 和GridView 的区别应该是配合CustomScr...原创 2019-11-04 17:29:02 · 339 阅读 · 0 评论 -
flutter TextFormField的使用
TextFormField 就是输入框,支持不同的输入模式,比如邮箱,手机号,或者nunberautofocus //是否对焦keyboardType //输入模式initialValue //默认值decoration InputDecoration TextFormField专门的输入边界import 'package:demoflutter/utils/utlis....原创 2019-11-04 15:36:25 · 10004 阅读 · 0 评论 -
flutter把项目中的中文抽取出来 flutter_i18n
flutter_i18n: ^0.6.3把中文放到资源文件里面 "pullToRefresh": "刷新",使用FlutterI18n.translate(context, ‘pullToRefresh’)原创 2019-11-04 11:54:41 · 529 阅读 · 0 评论 -
flutter 常用widget和插件
常用widget1.SingleChildScrollView //相当于安卓ScrollView,滚动视图2.SizedBox //指定宽高的盒子插件flutter_spinkit: ^3.1.0 //网络加载指示器flutter_i18n: ^0.6.4 //把项目中的中文,放到资源文件里面去 Fl...原创 2019-11-04 11:51:06 · 412 阅读 · 0 评论 -
flutter SingleChildScrollView的使用
SingleChildScrollView相当于安卓的ScrollView,SizedBox是一个能指定宽高的盒子,一般默认占据主轴空间import 'package:flutter/material.dart';class Demo1 extends StatelessWidget{ @override Widget build(BuildContext context) { ...原创 2019-11-04 10:56:09 · 2458 阅读 · 0 评论 -
Flutter Wrap 流布布局
flutter 流式布局,包含Wrap和Flow,我们一般只用Wrap,足够使用,Flow使用过于复杂基本使用:Container( padding: EdgeInsets.all(8), child: Wrap( //水平距离 spacing: 10.0, //垂直距离 runSpacing: 8.0,...原创 2019-10-29 16:39:27 · 766 阅读 · 0 评论 -
Flutter的AppBar的多种使用方式
AppBar 的使用方式和参数解析AppBar的使用结构AppBar,相当于安卓里面的toolbar,只是flutter里面封装很细,各种组合下来,使用方式也不一样第一种方式卡片栏切换:DefaultTabController里面initialIndex 默认选中位置,length多个页面,AppBar中参数增加bottom:TabBar组件,TabBarView这几个impor...原创 2019-10-29 15:23:22 · 3211 阅读 · 0 评论 -
Flutter如何实现卡片效果Card
Card( //设置圆角度,也可以不设置有默认值 shape: RoundedRectangleBorder( //形状 //修改圆角 borderRadius: BorderRadius.all(Radius.circular(10)), )...原创 2019-10-29 13:52:30 · 1834 阅读 · 0 评论 -
Flutter如何实现分割线
Divider 分割线Divider({ //分割线高度 this.height = 16.0, //分割线距离start伸缩距离 this.indent = 0.0, //分割线距离end伸缩距离 this.endIndent = 0.0, //分割线颜色 this.color, })实例: Divider( ...原创 2019-10-29 13:47:51 · 2825 阅读 · 0 评论 -
flutter的mainAxisAlignment设置分析
flutter中的主轴模式设置,主轴的方向决定你用Row或者Column 的widget,如果Row是水平方向,Column 主轴是垂直方向主轴左对齐 mainAxisAlignment: MainAxisAlignment.start,主轴右对齐mainAxisAlignment: MainAxisAlignment.end,主轴居中对齐mainAxisAlignment: M...原创 2019-10-21 19:14:55 · 469 阅读 · 0 评论 -
flutter设置widget阴影
如何给控件设置阴影,目前知道的是有两种方式PhysicalModel 里面有设置阴影方法 Widget getItem(PetCardViewModel model) { return Container( margin: EdgeInsets.fromLTRB(14, 8, 14, 8), child: PhysicalModel( color...原创 2019-10-21 18:51:08 · 1846 阅读 · 0 评论 -
flutter开发Row嵌套Row,Column嵌套Column,Row嵌套Column widget占空间大小
如果Row里面嵌套Row,或者Column里面再嵌套Column,那么只有对最外面的Row或Column会占用尽可能大的空间,里面Row或Column所占用的空间为实际大小,下面以Column为例说明:Container( color: Colors.green, child: Padding( padding: const EdgeInsets.all(16.0), c...原创 2019-10-21 17:05:35 · 10603 阅读 · 0 评论 -
Row与Column,mainAxisAlignment和crossAxisAlignment使用分析
初识Row与Column,很崩溃,分不清主轴跟交叉轴,主轴决定子widget排放方式,水平或者垂直,跟安卓的线性布局一样,分为两种模式水平模式,子widget的会按照水平,从中到右依次排放垂直模式,子widget会按照垂直方向,从上到下依次排放然而在Row或者Column中,如何来控制主轴方向呢,通过下面这个来控制 //交叉轴设置模式 crossAxisAlignmen...原创 2019-10-21 16:18:24 · 1278 阅读 · 0 评论 -
flutter 中如何声明常量方式
常量声明方式第一种static const List<ProgrammeViewModel> programmes = [ ProgrammeViewModel( title: '笑坛三巨匠之一:郭德纲最新高清相声集', playsCount: 363182465, needVip: false, coverImgUrl: ...原创 2019-10-19 15:53:12 · 2697 阅读 · 0 评论 -
PhysicalModel 和ClipRRect 使用和区别
PhysicalModel ,主要的功能就是设置widget四边圆角,可以设置阴影颜色,和z轴高度PhysicalModel({ //裁剪模式 this.clipBehavior = Clip.none, //四角圆度半径 this.borderRadius, //z轴高度 this.elevation = 0.0, //设置阴影颜色 ...原创 2019-10-19 15:38:16 · 2133 阅读 · 0 评论 -
flutter报错:Expected a key while parsing a block mapping.
如果有报错:flutter报错:Expected a key while parsing a block mapping.引入 fonts 或者 images 时候报错,那么要注意 fonst 和assets 对齐,就能解决问题参考:https://blog.csdn.net/bowei1105/article/details/92806588...原创 2019-10-18 14:15:31 · 635 阅读 · 0 评论 -
flutter 中listview中嵌套GridView正确使用姿势
ListView和GirdView都是滚动Widget 两个部件嵌套就会存在滚动冲突,存在2个冲突,一个是滑动时间冲突,还有一个是内容显示不全解决办法:在listviewshrinkWrap: true,//增加 physics: NeverScrollableScrollPhysics()//解决滑动事假冲突GridViewshrinkWrap: true,//增加使用完整例子...原创 2019-10-16 14:16:17 · 2454 阅读 · 0 评论 -
dart中 set get修饰或修饰私有方法
在drat中有set 或者get关键字 ,来设置变量方法和获取变量方法在dart中是没有关键字是来修饰变量或者方法私有或者公开的getInfo() 普通方法class Person { /** * 在Dart中没有public private protected修饰符 可以使用_来表示私有属性或私有方法 */ void _privateMethod(){ p...原创 2019-10-11 10:38:52 · 1769 阅读 · 0 评论 -
flutter搭建一个基础框架
三个页面,main主界面主入口,TabNavigator 底部导航栏,HomePage 主界面main.dart 页面import 'package:demoflutter/navigator/tab_navigator.dart';import 'package:flutter/material.dart';void main() => runApp(MyApp());cl...原创 2019-10-10 14:39:57 · 625 阅读 · 0 评论