Flutter 基础
关注
分享
扫一扫
文章平均质量分 94
本专栏主要依据官方文档撰写的Flutter基础。以后会创建有深度的专栏
马志武
学无止境
展开
-
Flutter常用库、Flutter库集合、Flutter开源库
这个是我粘贴复制来的，做个随笔记录。看见好几个平台都有，也不知道最初是谁整理的，就不贴原作者了。。。漂亮的开源库 第三方库https://flutterawesome.com/ https://pub.dev网络...转载 2019-08-18 17:03:32 · 6642 阅读 · 0 评论
-
Flutter学习总纲教程
Flutter学习总纲教程Flutter Widget 目录准备学习Flutter之前，必须要了解（不需要多么精通，但至少要了解）Dart的基础特性。Dart基础特性 · Dart 是 Google 开发的新一代编程语言，Flutter就是只用dart语言编写的。 在Windows上搭建Flutter开发环境 Flutter之初体验] · 创建一个Flutter And...原创 2019-06-29 09:09:22 · 1702 阅读 · 0 评论 -
在Windows上搭建Flutter开发环境
在Windows上搭建Flutter开发环境准备工具第一步：安装git第二步：安装Flutter第三步：Android Studio配置错误解决准备工具1.操作系统: Windows 7 或更高版本 (64-bit)2.磁盘空间: 400 MB (不包括Android Studio的磁盘空间).3.Git for Windows (Git命令行工具)4.Android Studio (...原创 2019-05-20 16:06:21 · 1487 阅读 · 1 评论 -
flutter CustomScrollView中使用Swiper做轮播图问题
有朋友问我CustomScrollView中使用Swiper做轮播图问题以前没这么用过，也是才发现CustomScrollView 与 Swiper 冲突，直接报错。网友说修改源码，试过不能用，但是可以嵌套在SliverList中使用。让SliverList 只有一个item ，就是Swiper ，亲测可行。SliverList( delegate: SliverChildListDelegate( //返回组件集合 List.generate(1, (int index)原创 2020-09-10 14:57:06 · 710 阅读 · 0 评论 -
Flutter Mixins(with)
混入 mixins （关键字 with）Flutter 使用的是 Dart 支持 Mixin ，而 Mixin 能够更好的解决多继承中容易出现的问题，如：方法优先顺序混乱、参数冲突、类结构变得复杂化等等。混入的原则是：相同方法被覆盖了，并且 with 后面的会覆盖前面的。下面代码 一目了然main(){ print("------main start--------"); D d = new D(); d.a(); d.b(); d.c(); print("------mai原创 2020-06-06 17:42:04 · 1245 阅读 · 0 评论 -
Flutter生命周期
一、Flutter生命周期initState()简单说：是widget创建执行的第一个方法，可以再里面初始化一些数据深入说：是表示当前 State 将和一个 BuildContext 产生关联，但是此时BuildContext 没有完全装载完成，如果你需要在该方法中获取 BuildContext ，可以 new Future.delayed(const Duration(seconds: 0, (){//context}); 一下。didChangeDependencies()在 init原创 2020-06-06 17:34:43 · 957 阅读 · 0 评论 -
Flutter Json、List、Map互转
Flutter Json转List、Map非常简单，我们可以通过dart:convert中内置的JSON解码器json.decode() 来实现Json转List//一个JSON格式的字符串String jsonStr = '[{"name":"张三"},{"name":"李四"}]';//将JSON字符串转为ListList list = json.decode(jsonStr)...原创 2020-01-01 15:41:14 · 23418 阅读 · 0 评论 -
Flutter Opacity 不透明度
不透明组件。可调节透明度。官方提醒：如果仅需要将单个图像(Image)或颜色(Color)的不透明度在0.0到1.0之间进行合成，则直接使用它们而不使用Opacity 小部件会更快。如：Color.fromRGBO(255, 0, 0, 0.5)。参数详解属性 说明 opacity 不透明度 child 子组件 ...原创 2019-12-02 14:31:16 · 2598 阅读 · 0 评论 -
Flutter ConstrainedBox 约束子组件
在其子项上施加其他约束的窗口小部件。例如，如果您希望子级的最小高度为50.0逻辑像素，则可以将其const BoxConstraints(minHeight: 50.0)来约束。参数详解属性 说明 child 子组件 constraints 约束子组件的 条件 属性constraints是 BoxConstr...原创 2019-10-01 17:51:44 · 2501 阅读 · 0 评论 -
Flutter CircularProgressIndicator进度指示器/Loading
一种材料设计循环进度指示器，它旋转表示应用程序正在忙。可用于Loading显示，也可以用作进度显示参数详解属性 说明 value 进度值，进度值在0到1.0之间。如果为空显示动画，非空显示进度 backgroundColor 背景颜色 valueColor 进度值颜色 strokeWidth 进度值宽度，默认4.0 ...原创 2019-09-30 16:52:33 · 9407 阅读 · 0 评论 -
Flutter ClipXxx 裁剪系列
目录一、ClipOval椭圆剪辑二、ClipPath 路径剪辑三、ClipRect 矩形剪辑四、ClipRRect 圆角矩形效果图完整代码一、ClipOval椭圆剪辑使用椭圆剪辑其子项的小部件。属性 说明 clipper 如果为非null，则确定要使用的剪辑 clipBehavior 控制剪辑方式 Clip.n...原创 2019-09-16 11:20:20 · 1979 阅读 · 0 评论 -
Flutter Draggable And DragTarget 拖拽控件
Draggable 拖拽控件DragTarget 接收Draggable的控件效果图代码实现添加Column组件Column中添加DragTarget和Draggable组件Column( children: <Widget>[ SizedBox(height: 20,), DragTarget( onWillAc...原创 2019-09-23 09:29:10 · 552 阅读 · 0 评论 -
Flutter DragTarget接收拖拽Draggable部件
拖拽Draggable小部件时接收数据的小部件。DragTarget和Draggable结合使用 完整介绍参数详解属性 说明 builder 被调用来构建这个小部件的内容 WidgetDragTargetBuilder( BuildContextcontext, List<T>candidateData,/...原创 2019-09-08 08:35:19 · 741 阅读 · 0 评论 -
Flutter Draggable拖动小部件
可以拖动到DragTarget的小部件。DragTarget是接收Draggable的部件。DragTarget和Draggable结合使用 完整介绍参数详解属性 说明 child 子控件 feedback 当拖动正在进行时，要在指针下显示的小部件。（拖拽时 跟着滑动的部件） data 拖拽到DragTarget所传递的数据 axis 限定移...原创 2019-09-16 11:20:06 · 778 阅读 · 2 评论 -
Flutter Offstage、Visibility隐藏/可见
Offstage是控制组件隐藏/可见的组件，如果感觉有些单调功能不全，我们可以使用Visibility，Visibility也是控制子组件隐藏/可见的组件。不同是的Visibility有隐藏状态是否留有空间、隐藏状态下是否可调用等功能。参数详解属性 说明 Offstage offstage 子组件是否可见，默认true（隐藏） child...原创 2019-07-30 08:32:56 · 18313 阅读 · 3 评论 -
Flutter InkWell水波纹效果
参数详解属性 详解 child 子组件 onTap 点击监听（） onDoubleTap 双击监听 onLongPress 长按监听 onTapDown 点击监听 onTapCancel 取消点击监听 onHighlightChanged 当材料的这一部分突出显示或停止突出显示时调用 onHover 当指针进...原创 2019-07-30 08:33:26 · 4770 阅读 · 1 评论 -
Flutter DataTable数据表
使用DataTable就需要了解以下组件DataColumn，描述数据表中的列。 DataRow，包含数据表中行的数据。 DataCell，包含数据表中单个单元格的数据。 PaginatedDataTable，它显示数据表中的部分数据，并提供对其余数据进行分页的控制。参数详解属性 说明 DataTable columns 表中列的配置和标签 类型 List&...原创 2019-07-30 08:33:57 · 3738 阅读 · 0 评论 -
Flutter SnackBar 提示信息
SnackBar是用户操作后，显示提示信息的一个控件，类似Toast，会自动隐藏。它还可以添加操作按钮，等等。SnackBar是通过Scaffold的showSnackBar方法来显示的。所以要显示一个SnackBar,要先拿到Scaffold。当BuildContext在Scaffold之前时，调用Scaffold.of(context)会报错。这时可以通过Builder Widget来解决...原创 2019-07-30 08:34:31 · 1736 阅读 · 0 评论 -
Flutter DatePickers & TimePickers时间选择器
打开日期和时间选择器分别需要使用showDatePicker()和showTimePicker()函数。参数说明属性 说明 showDatePicker context 上下文 initialDate 初始日期 firstDate 开始日期 lastDate 结束日期 selectableDayPredicate ...原创 2019-07-23 14:42:57 · 4068 阅读 · 0 评论 -
Flutter MaterialApp
参数详解属性 说明 navigatorKey 导航的key home 主页 routes 路由(具体如何应用，如何完成跳转路由见详情) initialRoute 初始路由 onGenerateRoute 生成路由 onUnknownRoute 位置路由 navigatorObservers 导航的观察者 buil...原创 2019-07-23 14:33:41 · 840 阅读 · 0 评论 -
Flutter Scaffold
参数详解属性 说明 appBar 头部导航栏 body 主体 floatingActionButton 悬浮按钮 floatingActionButtonLocation 悬浮按钮位置 floatingActionButtonAnimator 悬浮按钮动画 persistentFooterButtons 显示在底部的一组按钮 ...原创 2019-07-23 10:30:58 · 954 阅读 · 0 评论 -
Flutter Table 表格
Table 是一个表格布局组件，官方有话说：如果您只有一行，则Row小部件更合适。如果您只有一列，则SliverList或Column小部件将更合适。参数详解属性 说明 children List<TableRow>表的行 columnWidths 所有列宽 默认平均等分 FixedColumnWidth 宽度 ...原创 2019-07-23 10:24:56 · 12278 阅读 · 10 评论 -
Flutter Widget 目录
Material Components widgets实现了可视化、行为性、动作丰富的widget。App结构和导航 按钮 输入框和选择框 对话框、Alert、Panel 信息展示 布局 Cupertino (iOS风格) Widgets了解更多的widget请参考官方Flutter widget 目录。App结构和导航 Scaffold ...原创 2019-07-23 15:07:20 · 1313 阅读 · 0 评论 -
Flutter Divider 分割线
分隔符是一条细线，通常用于对列表和布局中的内容进行分组。参数详解属性 说明 height 分隔符的高度（平均增加上下内边距，线不会变粗） indent 前面缩进 color 线的颜色 代码示例Divider( height: 50, indent: 100, ...原创 2019-07-23 10:13:01 · 7952 阅读 · 0 评论 -
flutter MediaQuery获取屏幕宽度高度密度通知栏高度等屏幕信息
MediaQuery是建立媒体查询解析给定数据的子树。例如，要了解当前媒体的大小（例如，包含您的应用程序的窗口），您可以从MediaQuery.of返回的MediaQueryData中读取MediaQueryData.size属性：MediaQuery.of(context).size 以上是官网说的。参数详解由于使用时是获取到MediaQueryData。所以只介绍MediaQuer...原创 2019-07-23 10:11:29 · 16131 阅读 · 0 评论 -
Flutter Drawer 侧滑菜单、抽屉
Drawer与Scaffold一起使用。是Scaffold中drawer属性。drawer通常是一个ListView，它的第一个子视图是一个DrawerHeader，但我们通常使用UserAccountsDrawerHeader显示当前用户的状态信息。其余的drawer子元素通常由ListTile构造，通常以AboutListTile结束。可以使用Navigator.pop(context...原创 2019-07-10 13:42:06 · 7270 阅读 · 5 评论 -
Flutter PopupMenuButton 菜单
讲解PopupMenuButton菜单组件时，我们应该了解以下类：PopupMenuItem，单个值的弹出菜单项。 PopupMenuDivider，一个弹出式菜单项，只是一条水平线。 CheckedPopupMenuItem，带有复选标记的弹出菜单项。 showMenu，一种在给定位置动态显示弹出菜单的方法。参数详解属性 说明 showMenu context ...原创 2019-07-10 13:41:19 · 5611 阅读 · 1 评论 -
Flutter ExpansionPanel 收缩面板
收缩面板。它有一个标题和一个正文，可以展开或折叠。面板的正文主体仅在展开时可见。收缩面板仅用作为ExpansionPanelList的子级。示例实现，请使用ExpansionPanelList。参数详解收缩面板是ExpansionPanelList和ExpansionPanel共同完成的，以下介绍他们的属性：属性 说明 ExpansionPanelList ...原创 2019-07-10 13:40:32 · 9827 阅读 · 0 评论 -
Flutter CustomScrollView 自定义滚动效果
一个自定义滚动效果的滚动视图。CustomScrollView允许您创建各种滚动效果，比如列表、网格和展开头。例如，要创建一个滚动视图，其中包含一个扩展的应用程序栏，然后是一个列表和一个网格，请使用:SliverAppBar(展开头)、SliverList(列表)和SliverGrid(网格)。若要控制滚动视图的初始滚动偏移，请为控制器提供其ScrollController.initia...原创 2019-07-10 13:37:18 · 14598 阅读 · 0 评论 -
flutter SliverAppBar 随内容一起滑动的头部 - 滞留头部
一个与CustomScrollView集成的应用程序栏。Sliver应用程序栏通常用作CustomScrollView的第一个子项，它允许应用程序栏与滚动视图集成，以便它可以根据滚动偏移量在高度上变化，或者在滚动视图中的其他内容上方浮动。参数详解属性 说明 leading 头部组件（无法使用网络图片） automaticallyImplyLeadi...原创 2019-07-10 13:38:13 · 4945 阅读 · 1 评论 -
Flutter CupertinoAlertDialog IOS风格对话框
iOS风格的警报对话框。参数详解属性 说明 title 标题 content 内容 actions 显示在对话框底部的Widget集合 scrollController 一个滚动控制器，可用于控制对话框中内容的滚动 actionScrollController 一个滚动控制器，可用于控制对话框中动作的滚动 代码示例retu...原创 2019-07-06 15:27:25 · 8144 阅读 · 0 评论 -
Flutter CupertinoFullscreenDialogTransition 全屏对话框
召唤全屏对话框的iOS风格转换。参数详解。属性 说明 animation 动画 child 内容 组件 代码示例return CupertinoFullscreenDialogTransition( child: Scaffold( body: Container( alignment: Alignment.center...原创 2019-07-06 15:28:07 · 4186 阅读 · 0 评论 -
Flutter SimpleDialog 对话框
简单的对话框为用户提供了多个选项之间的选择。一个简单的对话框有一个可选的标题，显示在选项上方。参数详解属性 说明 title 标题 titlePadding 标题内边距 默认EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0), children 子组件集合 contentPadding 内容内边距EdgeI...原创 2019-07-06 15:26:36 · 3886 阅读 · 0 评论 -
Flutter AlertDialog对话框
Flutter AlertDialog对话框是一个警报对话框，会通知用户需要确认的情况。警报对话框具有可选标题和可选的操作列表。参数详解属性 说明 title 标题 titlePadding 标题内边距 titleTextStyle 标题文字样式 content 内容 contentPadding 内容 内边距 默认EdgeInse...原创 2019-07-06 15:24:49 · 8173 阅读 · 0 评论 -
Flutter Dialog 对话框
Flutter 提供了很多Dialog 弹窗，如：AboutDialog、AlertDialog、SimpleDialog、CupertinoAlertDialog、CupertinoFullscreenDialogTransition、BottomSheet。在没有比官网介绍的更贴切了AboutDialog 这是一个对话框，其中包含应用程序的图标，名称，版本号和版权，以及显示应...原创 2019-07-06 15:30:47 · 6407 阅读 · 0 评论 -
Flutter AboutDialog对话框
AboutDialog对话框是一个包含应用程序的图标，名称，版本号和版权，以及显示应用程序使用的软件许可证的按钮。参数详解属性 说明 context 上下文 applicationName 用程序的名称 applicationVersion 用程序的版本号 applicationIcon 用程序的图标 applicationLegales...原创 2019-07-06 15:25:26 · 2081 阅读 · 4 评论 -
Flutter Stepper 步骤
步骤组件是用来约束用户操作的，第一步完成后才能进入下一步。所有步骤都完成，才可进行提交操作。参数详解属性 说明 steps 步骤内容集合 physics 步骤跳转动画 type StepperType.vertical currentStep 步骤位置 onStepTapped 状态改变时触发 onStepCon...原创 2019-07-03 09:30:46 · 2483 阅读 · 1 评论 -
Flutter Slider 进度条
参数详解属性 说明 value 当前值 默认 0 -- 1 之间 onChanged 滑动监听 onChangeStart 滑动前监听 onChangeEnd 滑动后监听 min 最小值 默认 0 max 最大值 默认 1 divisions 分段个数 label 滑动时 显示的文字 （不设置divi...原创 2019-06-29 11:57:00 · 4903 阅读 · 0 评论 -
Flutter Switch 开关控制
参数详解属性 说明 value 当前开关状态 布尔值 onChanged 监听（开关状态改变时调用） activeColor 打开 状态 轨道 和 按钮颜色 activeTrackColor 打开 状态轨道颜色 inactiveThumbColor 关闭 状态按钮颜色 inactiveTrackColor 关闭 状态轨道颜色 ...原创 2019-06-29 11:58:17 · 9004 阅读 · 5 评论 -
Flutter Radio 单选按钮
本章节主要讲解 Radio 和RadioListTile 单选按钮参数讲解属性 说明 Radio单选按钮 value 此单选按钮表示的值（可设定为id） groupValue 此组单选按钮的当前选定值 onChanged 监听 activeColor 选择此单选按钮时使用的颜色 materialTapTargetSize ...原创 2019-06-25 16:54:47 · 12348 阅读 · 0 评论