【Flutter】学习记录
记录学习Flutter过程中所学习到的知识。
MAXLZ
你不一定非得长成玫瑰,你乐意的话,做茉莉,做淡菊,做无名小花,做千千万万。
展开
-
【Flutter】四十六、event_bus消息总线
flutter eventbus原创 2019-12-06 22:07:26 · 474 阅读 · 0 评论 -
【Flutter】四十五、url_launcher
url_launcher: ^5.2.5原创 2019-12-01 21:42:56 · 394 阅读 · 0 评论 -
【Flutter】四十四、Flutter粘贴板——Clipboard、ClipboardData
Clipboard原创 2019-11-23 23:10:07 · 3532 阅读 · 0 评论 -
【Flutter】四十三、webview_flutter的使用
使用webview_flutter可用来加载网页。一、安装webview_flutter插件webview_flutter: ^0.3.15+1二、设置网络权限2.1 Android设置在AndroidManifest.xml中添加一下代码(manifest标签下方添加即可):<uses-permission android:name="android.permissi...原创 2019-11-23 22:06:30 · 2228 阅读 · 2 评论 -
【Flutter】四十二、Flutter中文字过长显示省略号
Text( item.name, overflow: TextOverflow.ellipsis, maxLines: 2, style: TextStyle( fontSize: 13.0 ), )效果:原创 2019-11-08 21:36:55 · 4529 阅读 · 0 评论 -
【Flutter】四十一、Flutter解决沉浸式状态栏——SafeArea
SafeArea原创 2019-11-05 21:06:33 · 9805 阅读 · 1 评论 -
【Flutter】四十、Flutter水波纹组件——InkWell
Flutter中的水波纹组件——InkWell,可以作用在Container、Image等各种组件,不仅仅是按钮。import 'package:flutter/material.dart';class InkWellRoute extends StatefulWidget{ @override _InkWellRouteState createState() { // ...原创 2019-11-05 20:37:59 · 7338 阅读 · 0 评论 -
【Flutter】十九、Flutter中常用组件——滚动组件SingleChildScrollView
一、SingleChildScrollView像Row、Column、Flex等有些widget是无法进行滚动的,一旦子控件超出父控件的范围,flutter会发出警告,屏幕会有黄黑色条纹出现,这时我们可以使用滚动控件来进行处理。 如下是一个Column控件,它包含了20个Container控件,此时children的高度超出了Container高度,屏幕下方出现警告区域:impo...原创 2019-10-15 20:08:13 · 1421 阅读 · 0 评论 -
【Flutter】三十八、Flutter动画组件——动画列表AnimatedList
AnimatedListList的动画版。 AnimatedList中两个关键的属性就是itemBuilder、initialItemCount:itemBuilder是构建AnimatedList的方法;initialItemCount是初始构件项目数量。 现在开始使用AnimatedList:import 'package:flutter/material.dart;...原创 2019-11-01 23:13:02 · 3649 阅读 · 2 评论 -
【Flutter】三十九、Flutter常用组件——轮播组件flutter_swiper
一、安装flutter_swiperflutter_swiper: ^1.1.6flutter pub get二、使用import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';class SwiperRoute extends StatefulWidget{...原创 2019-11-05 20:37:35 · 1272 阅读 · 0 评论 -
【Flutter】三十七、Flutter动画组件(二)
一、AnimatedContainer二、AnimatedCrossFade三、DecoratedBoxTransition四、FadeTransition五、PositionedTransition六、RotationTransition七、ScaleTransition八、SlideTransition九、AlignTransition十、SizeTransition一、AnimatedC...原创 2019-11-01 21:11:13 · 285 阅读 · 0 评论 -
【Flutter】三十六、Flutter解决点击非输入框时关闭键盘问题及TextFormField焦点切换问题
FocusNode blankNode = FocusNode();...Widget build () { reutrn GestureDetector( onTap: () { FocusScope.of(context).requestFocus(blankNode); }, ... );}原创 2019-10-31 22:23:25 · 5248 阅读 · 3 评论 -
【Flutter】三十五、Flutter自定义路由过渡动画
【Flutter】三十五、Flutter自定义路由过渡动画原创 2019-10-29 21:09:54 · 1435 阅读 · 0 评论 -
【Flutter】三十四、Flutter常用组件——Tab导航栏
在Flutter中完成一个导航栏有两种方式:一种是通过DefaultTabController,另一种是通过TabController:一、使用DefaultTabControllerimport 'package:flutter/material.dart';class TabDemo extends StatelessWidget { @override Widget buil...原创 2019-10-29 18:58:21 · 1808 阅读 · 0 评论 -
【Flutter】三十三、Flutter修改默认appBar高度
【Flutter】三十三、Flutter常用组件——Tab原创 2019-10-29 08:44:22 · 4878 阅读 · 3 评论 -
【Flutter】三十二、Flutter分离路由配置
上篇文章中的路由配置是直接配置在main.dart中,为了降低代码的耦合度,下面将路由配置分离出来。Routes.dartimport 'package:flutter/material.dart';import 'package:flutterdemo/route_pages/BottomNav.dart';import 'package:flutterdemo/route_pa...原创 2019-10-28 21:27:16 · 321 阅读 · 0 评论 -
【Flutter】三十一、Flutter路由
【Flutter】三十一、Flutter路由原创 2019-10-28 20:15:12 · 189 阅读 · 0 评论 -
【Flutter】三十、Flutter动画(一)
Flutter监听widget渲染完毕原创 2019-10-27 22:03:52 · 368 阅读 · 0 评论 -
【Flutter】二十九、Flutter通知—— Notification
一、使用NotificationListener监听滚动进度二、使用自定义通知Notification可以实现将数据从子组件向父组件传递,与InheritedWidget的传递方向正好相反。一、使用NotificationListener监听滚动进度 Flutter中很多地方使用了通知,如可滚动(Scrollable) Widget中滑动时就会分发ScrollNotificati...原创 2019-10-26 15:30:08 · 3936 阅读 · 0 评论 -
【Flutter】二十八、Flutter中获取widget尺寸及位置信息
Flutter获取widget尺寸原创 2019-10-25 22:30:01 · 3066 阅读 · 0 评论 -
【Flutter】二十七、控制Widget显示及隐藏——Offstage、Visibility
Flutter中的Offstage与Visibility都可以将子widget进行隐藏,不同的是Visibility可以设置隐藏之后是否还占据原来的控件、设置隐藏后是否响应事件,Offstage隐藏后之前所占的空间就会消失。一、Offstage Offstage中控制显示隐藏的重要属性是offstage,默认为true。当offstage 为true时,其child控件是隐藏的。二...原创 2019-10-25 18:55:38 · 5464 阅读 · 0 评论 -
【Flutter】二十六、Flutter的手势识别—— GestureDetector
一、GestureDetector中的手势二、拖动在Flutter中使用GestureDetector可以来完成对手势的识别,包括长按、滑动、双击等手势。一、GestureDetector中的手势 下表是对GestureDetector中所有手势的说明。事件名说明onTapDown手指开始触摸屏幕触发onTapUp手指从屏幕抬起触发onTap...原创 2019-10-25 18:55:21 · 1657 阅读 · 0 评论 -
【Flutter】二十五、Flutter的事件处理
一、Listener二、behavior属性三、忽略PointerEvent Flutter中使用Listener来监听相关触摸事件,一次完整的事件包括:手指按下、手指滑动、手指离开。使用Listener可监听各个阶段的事件。一、ListenerListener({ Key key, ... this.onPointerDown, // 手指按下触发 ...原创 2019-10-24 21:29:33 · 837 阅读 · 0 评论 -
【Flutter】二十四、Flutter数据共享——InheritedWidget
Flutter中可以使用InheritedWidget进行共享数据,通过InheritedWidget共享的数据可以从Widget树中由上向下传递,而不能反向传递。下面使用InheritedWidget完成一个计数器的例子:一、创建共享数据class ShareDataWidget extends InheritedWidget{ int data; ShareDataWidg...原创 2019-10-24 13:08:11 · 471 阅读 · 0 评论 -
【Flutter】二十三、Flutter常用组件——抽屉(侧边栏)Drawer
一、Drawer构造器二、侧边栏的隐藏及显示 使用Scaffold控件的drawer和endDrawer可以实现左侧边栏及右侧边栏。侧边栏默认隐藏,可通过手指滑动或点击事件呼出侧边栏。一、Drawer构造器 Drawer构造器十分简单:Drawer({ Key key, this.elevation = 16.0, // 侧边阴影范围 this.chi...原创 2019-10-23 21:20:18 · 4459 阅读 · 1 评论 -
【Flutter】二十二、Fultter功能组件——WillPopScope
为了避免用户误触返回按钮而导致APP退出,在很多APP中都拦截了用户点击返回键的按钮,当用户在某一个时间段内点击两次时,才会认为用户是要退出(而非误触)。Flutter中的WillPopScope就可以用来完成该功能。一、WillPopScope构造函数WillPopScope({ Key key, @required this.child, @required t...原创 2019-10-20 22:14:13 · 360 阅读 · 0 评论 -
【Flutter】二十一、Flutter中常用组件——底部导航BottomNavigationBar
用来创建底部导航。使用在Scaffold控件中bottomNavigationBar属性BottomNavigationBar属性说明BottomNavigationBar({ Key key, @required this.items, // BottomNavigationBarItem控件组 this.onTap, // 点击事件 this.curre...原创 2019-10-20 18:09:08 · 410 阅读 · 0 评论 -
【Flutter】二十、Flutter中常用组件—— CustomScrollView
一、CustomScrollView二、Sliver2.1 SliverAppBar一、CustomScrollViewCustomScrollView是可以使用sliver自定义滚动模型(效果)的widget。其中sliver包括SliverList、SliverFixedExtentList、SliverGrid、SliverPadding、SliverAppBar,对于大多数Sliv...原创 2019-10-16 08:47:18 · 2368 阅读 · 0 评论 -
【Flutter】十八、Flutter中常用的布局容器——列表布局ListView、ListTile
一、ListView1.1 创建ListView的多种方式1.1.1 ListView()1.1.2 ListView.builder()1.1.3 ListView.separated()1.1.4 ListView.custom()二、ListTile2.1 ListTile属性说明三、下拉刷新列表实现一、ListView一个列表控件。ListView与GridView均继承自BoxS...原创 2019-10-15 15:18:07 · 3555 阅读 · 0 评论 -
【Flutter】十七、Flutter中常用的布局容器——网格布局GridView
一、使用GridView的多种方式1.1 GridView()1.2 GridView.count()1.3 GridView.builder()1.4 GridView.custom()1.5 GridView.extent()二、flutter_staggered_grid_view一、使用GridView的多种方式1.1 GridView()GridView({ Key ke...原创 2019-10-15 09:18:54 · 1868 阅读 · 0 评论 -
【Flutter】十六、AspectRatio、Card控件
一、AspectRatio1.1 AspectRatio属性说明二、Card2.1 Card属性说明一、AspectRatio设置child的宽高比。AspectRatio会在布局限制条件内尽可能的扩展。1.1 AspectRatio属性说明const AspectRatio({ Key key, @required this.aspectRatio, // 宽高比...原创 2019-10-13 20:33:45 · 355 阅读 · 0 评论 -
【Flutter】十五、Flutter中常用的布局容器——层叠组件Stack
一、Stack二、Stack结合Align、Positioned使用2.1 Stack与Align2.2 Stack与Positioned一、StackStack可用来对children进行层叠,children中越往后的组件在上面显示。构造函数Stack({ Key key, this.alignment = AlignmentDirectional.topStar...原创 2019-10-13 10:14:13 · 556 阅读 · 0 评论 -
【Flutter】十四、Flutter中常用的布局容器——流式布局Wrap、Flow
一、Wrap二、Flow一、Wrap熟悉flex布局的同学肯定知道flex布局会有wrap属性,就是换行,而Flex、Column、Row都是不可以换行的。那么如果我们需要换行怎么办呢?Flutte提供了Wrap来解决这一需求,Wrap与Flex具有相似的属性。构造函数Wrap({ Key key, this.direction = Axis.horizontal, ...原创 2019-10-12 15:53:41 · 502 阅读 · 0 评论 -
【Flutter】十三、Flutter中常用的布局容器——弹性布局Flex、Expanded
一、Flex1.1 构造函数二、Expanded 弹性布局允许子widget按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现。一、FlexFlex可沿着水平或竖直方向对widget进行布局。1.1 构造函数Flex({ Key key, @required this.direction, // 主轴方向:Ax...原创 2019-10-12 09:06:27 · 991 阅读 · 0 评论 -
【Flutter】十二、Flutter中常用的布局容器——Row、Column
【Flutter】十二、Flutter中常用的布局容器——Row、Column一、Row1.1 构造函数二、Column一、Row继承自Flex。可将children中的widget在水平方向上进行排列。与css的flex(flex-direction:row;)布局相似1.1 构造函数Row({ Key key, MainAxisAlignment mainAxisA...原创 2019-10-11 20:54:57 · 935 阅读 · 1 评论 -
【Flutter】十一、Flutter中常用的容器类
【Flutter】十一、Flutter中常用的容器类Flutter中的容器作用常常是用来包裹某个组件,所以都会有一个child属性,注意这里是child不是children,children属性是大部分布局类都有的属性。Flutter常用的容器类有:Center、Padding、Container、SizedBox、...原创 2019-10-11 11:06:23 · 3818 阅读 · 0 评论 -
【Flutter】十、Flutter之表单——Form
【Flutter】十、Flutter之表单——Form一、Form1.1 Form构造器1.2 Form属性说明二、TextFormField2.1 TextFormField构造器2.2 TextFormField部分属性说明三、FormState示例Form作为一个容器,可包裹多个表单字段(FormField)。FormField是一个抽象类,TextFormText是FormField的...原创 2019-08-26 10:53:24 · 2015 阅读 · 0 评论 -
【Flutter】九、Flutter之滑动条——Slider
【Flutter】九、Flutter之滑动条——Slider一、Slider1.1 Slider构造器1.2 Slider属性说明1.3 Slider示例一、SliderSlider是Flutter中的滑动条组件。1.1 Slider构造器const Slider({ Key key, @required this.value, @required this.o...原创 2019-08-25 22:13:22 · 13371 阅读 · 2 评论 -
【Flutter】八、Flutter之表单开关——Switch、SwitchListTile
【Flutter】Flutter之表单开关——Switch、SwitchListTile一、Switch1.1 Switch构造器1.2 Switch属性说明1.3 Switch示例二、SwitchListTile2.1 SwitchListTile构造器2.2 SwitchListTile属性说明2.3 SwitchListTile示例Flutter中开关控件有:Switch、SwitchL...原创 2019-08-25 20:56:17 · 1289 阅读 · 0 评论 -
【Flutter】七、Flutter之表单单选控件——Radio、RadioListTile
【Flutter】七、Flutter之表单单选控件——Radio、RadioListTile一、Radio1.1 Radio构造器1.2 Radio属性说明1.3Radio示例二、RadioListTile2.1 RadioListTile构造器2.2 RadioListTile属性说明2.3 RadioListTile示例一、RadioRadio和RadioListTile都是单选控件,R...原创 2019-08-25 18:06:06 · 2123 阅读 · 1 评论