![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
flutter
chunchun1230
这个作者很懒,什么都没留下…
展开
-
flutter之Get请求和动态组件协作
1.打开easy_mock创建项目,如图所示2.创建成功效果如图所示3.点击项目进去,效果如图所示4.点击创建接口,并写入虚拟数据,效果如图所示5.创建过接口,效果如图所示6.制作界面布局,代码如图所示效果如图所示7.书写Dio的get方法,代码如下8.数据处理方法,代码如图所示9.引用方法代码如...原创 2019-09-29 22:48:20 · 274 阅读 · 0 评论 -
Flutter之单选和复选框
Material widgets库中提供了Material风格的单选开关Switch和复选框Checkbox,它们都是继承自StatelessWidget,所以它们本身不会保存当前选择状态,所以一般都是在父widget中管理选中状态。当用户点击Switch或Checkbox时,它们会触发onChanged回调,我们可以在此回调中处理选中状态改变逻辑。我们看一个简单的示例: ...原创 2019-01-22 16:16:24 · 5082 阅读 · 0 评论 -
Flutter之Image
Image, 图片显示Widget, 和Android ImageView相似,但是从实际使用的方法上看,与常用的图片加载库,如Picasso,Glide等相似,支持本地图片,资源图片,网络图片等加载方式。类结构 color & colorBlendModecolor和colorBlendMode一般配合使用,BlendMo...原创 2019-01-22 13:12:39 · 491 阅读 · 0 评论 -
flutter之资源管理
资源管理Flutter应用程序可以包含代码和 assets(有时称为资源)。assets是会打包到程序安装包中的,可在运行时访问。常见类型的assets包括静态数据(例如JSON文件)、配置文件、图标和图片(JPEG,WebP,GIF,动画WebP / GIF,PNG,BMP和WBMP)等。指定 assets和包管理一样,Flutter也使用pubspec.yaml文件来管理应用程序所...原创 2019-01-16 16:40:12 · 2287 阅读 · 0 评论 -
flutter之包管理
一个完整的应用程序往往会依赖很多第三方包,正如在原生开发中,Android使用Gradle来管理依赖,iOS用Cocoapods或Carthage来管理依赖,而Flutter也有自己的依赖管理工具,本节我们主要介绍一下flutter如何使用配置文件pubspec.yaml(位于项目根目录)来管理第三方依赖包。YAML是一种直观、可读性高并且容易被人类阅读的文件格式,它和xml或Json相比,它...原创 2019-01-16 15:13:54 · 3064 阅读 · 0 评论 -
Flutter之按钮
原创 2019-01-22 09:23:49 · 457 阅读 · 0 评论 -
Flutter之底部面板showModalBottomSheet
模态底部面板是菜单或对话框的替代方案,可防止用户与其他控件进行互动,可以使用showModalBottomSheet函数创建和显示模态底部面板。 代码如下: 效果如图所示: ...原创 2019-01-21 13:41:01 · 6019 阅读 · 0 评论 -
Flutter之持久底部面板
持久性底部面板可以用于补充应用主要内容的信息,即使用户与应用程序的其他控件进行互动,也仍然可以看到持久的底部面板。可以使用Scaffold.showBottomSheet函数创建和显示持久性底部面板。代码如下: 效果如下: ...原创 2019-01-21 12:35:24 · 3326 阅读 · 0 评论 -
flutter之URL Launcher插件
URL Launcher插件允许您打开移动平台上的默认浏览器来显示给定的URL,它在Android和iOS上均受支持。我们就写一个使用Flutter URLLauncher插件启动浏览器的实例。首先打开pubspec.yaml,并添加url_launcher插件: 添加完成之后记得点击顶部的“Packages Get”,然后再打开lib/main.dart,并将其全部内容替换为以下代码...原创 2019-01-21 09:26:10 · 4103 阅读 · 0 评论 -
flutter之路由管理
路由管理路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理。这和原生开发类似,无论是Android还是iOS,导航管理都会维护一个路由栈,路由入栈(push)操作对应打开一个...原创 2019-01-15 15:25:04 · 2642 阅读 · 0 评论 -
Flutter之DecoratedBox
DecoratedBox控件会在子控件绘制之前或之后绘制一个装饰。 代码如下:效果如下:原创 2019-01-14 15:43:26 · 1302 阅读 · 0 评论 -
底部导航的应用BottomNavigationBar
新建项目所需的文件,效果如图所示 先写入口文件main.dart的代码如下 import 'package:flutter/material.dart';import 'bottom_navigation_widget.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget...原创 2018-10-09 17:43:17 · 272 阅读 · 0 评论 -
flutter之flutter_swiper的安装与使用
想要在项目中使用flutter_swiper必须要先安装flutter_swiper组件,安装步骤如下:1.在项目的在pubspec.yaml文件中添加flutter_swiper操作如下所示:2.选中项目右键——选中show in Explorer,效果如图所示 3.进入项目所在的文件夹 4.点击进入项目的文件夹点击空白处右键选择Git Bash Here 5...原创 2018-10-18 14:07:58 · 4396 阅读 · 1 评论 -
flutter控件之弹出菜单PopupmenuButton控件
PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单。import 'package:flutter/material.dart';class MenusDemo extends StatefulWidget{ @override _MenusDemoState createState() => new _MenusDemoState();}class _...原创 2018-09-07 13:36:20 · 22483 阅读 · 0 评论 -
flutter之图标组件
示例代码:示例效果:原创 2019-02-27 16:07:05 · 990 阅读 · 0 评论 -
flutter之凸出按钮RaisedButton
示例代码:示例效果:原创 2019-03-01 13:01:16 · 604 阅读 · 0 评论 -
flutter之基础列表组件
基础列表组件为ListView组件,scrollDirection:列表的排列方向,Axis.vertical为垂直方向,是默认值,Axis.horizontal为水平方向。padding:列表内部的空白区域,如果有child的话,child位于padding内部reverse:组件排列反向,默认值为falsechildren:列表元素,注意List元素全部为Widget类型示...原创 2019-03-01 14:25:29 · 446 阅读 · 0 评论 -
Flutter之Dio引入和简单的Get请求
注意:如果flutter和dart版本过低,运行时就会报错先在pubspec.yaml中引入Dio包如图所示2.在dart文件中写入代码如图所示3.输出结果如图所示转载 2019-03-13 13:11:05 · 4339 阅读 · 1 评论 -
flutter报错
如果你使用Dio请求数据的时候报如下错误:解决方法:更新你的flutter和dart版本即可原创 2019-03-13 11:59:33 · 459 阅读 · 0 评论 -
flutter之真机调试flutter程序
打开开发者选择中的USB调试 选中项目,右键选择show in Explorer3.进入项目所在的文件夹,效果如图所示4.点击项目的文件夹进入项目,点击空白处右键选择Git Bash here如图所示5.点击项目的文件夹进入项目,点击空白处右键选择Git Bash here如图所示6.在命令行工具中输入flutter devices确认连接电脑的设备...原创 2019-03-08 11:44:14 · 8642 阅读 · 0 评论 -
flutter之底部导航栏制作
在lib目录下新建pages文件夹,并新建dart文件,效果如图所示2.在main.dart文件中写代码,效果如图所示3.在index_page.dart文件中写代码,效果如图所示4.在home_page.dart文件中写代码,效果如图所示5.在cateory_page.dart文件中写代码,效果如图所示6.在cart_page.dart...转载 2019-03-12 11:57:09 · 610 阅读 · 0 评论 -
flutter之有状态和无状态组件
无状态组件(StatelessWidget)是不可变的,这意味着它们的属性不能改变,所有的值都是最终的。有状态组件(StatefulWidget)持有状态可能在Widget生命周期中发生变化。实现一个StatefulWidget至少需要两个类一个StatefulWidget类一个State类。StatefulWidget类本身是不变的,但是State类在Widget生命周期中始终存在...原创 2019-03-04 16:37:01 · 2441 阅读 · 0 评论 -
flutter之表单组件
表单是一个包含表单元素的区域。表单元素允许用户输入内容,比如:文本域、下拉列表、单选框、复选框等。常见的应用场景有:登录、注册、输入信息等。表单里有两个重要的组件,一个是Form组件用来做整个表单提交使用的,另一个是TextFormFiled组件用来做用户输入的。Form组件的属性key:组件在整个Widget树中的key值autovalidate:是否自动提交表单child:组件...原创 2019-03-04 15:05:39 · 1767 阅读 · 0 评论 -
flutter之网格列表
示例代码:示例效果原创 2019-03-04 11:40:07 · 902 阅读 · 0 评论 -
flutter之ListView动态绑定数据
ListView经常需要从数据库中读取数据,然后绑定,ListView动态绑定数据如下所示示例代码:示例效果首先创建数据源:items:new List<String>.generate(100,(i)=>"第$i项")其次定义数据,并传递数据,通过钩子函数传递fina List<String> itemsMyApp({Key,k...原创 2019-03-04 09:42:26 · 3441 阅读 · 0 评论 -
flutter之Container控件
Width:设置Container的宽度,设置为double.infinity可以强制在宽度上撑满,不设置,则根据child和父节点两者一起布局Height:设置Container的高度,设置为double.infinity可以强制在高度上撑满,不设置,则根据child和父节点两者一起布局 alignment:控制child的对齐方式,如果Container或者Container父节点...原创 2019-02-26 16:24:21 · 1515 阅读 · 0 评论 -
Flutter去除右上角的Debug标签
在MaterialApp初始化的时候,设置debugShowCheckedModeBanner: false即可:代码:设置过这一属性后,模拟器如图所示原创 2019-03-05 17:35:45 · 1989 阅读 · 0 评论 -
flutter之Table组件
表格布局中每一行的高度由其内容决定,每一列的宽度由columnWidths属性单独控制columnWidths:设置每一列的宽度defaultColumnWidth:默认的每一列宽度值,默认情况下均分textDirection:文字方向border:表格边框defaultVerticalAlignment:默认垂直方向对齐方式:top:放置在顶部middle:垂直居中...原创 2019-02-26 13:43:59 · 3413 阅读 · 0 评论 -
flutter之水平列表
水平列表组件即为水平方向排列的组件,列表内部元素以水平方向排、把ListView组件的scrollDirection属性设置为Axis.horizontal即可示例效果:、原创 2019-03-01 16:11:51 · 680 阅读 · 0 评论 -
flutter之不透明控件Opacity
Opacity控件能调整子控件的不透明度,使子控件部分透明,不透明度的量从0.0到1.0之间,0.0表示完全透明,1.0表示完全不透明。 Opacity的用法:import 'package:flutter/material.dart';class OpactiyDemo extends StatelessWidget{ @override Widget build(Build...原创 2018-09-07 10:45:36 · 9518 阅读 · 0 评论 -
fluter控件之SizeBox和AspectRatio
SizeBox和AspectRatio的区别是:SizeBox强制控制子控件具有特定的宽度、高度或者两者都有。AspectRatio强制子控件的宽度和高度具有给定的宽高比。SizeBox的用法:import 'package:flutter/material.dart';class SizeboxDemo extends StatelessWidget{ @override...原创 2018-09-07 09:33:54 · 2130 阅读 · 0 评论 -
flutter之Stack
原创 2018-09-03 12:00:18 · 264 阅读 · 0 评论 -
flutter之Container
原创 2018-09-03 10:31:19 · 373 阅读 · 0 评论 -
Flutter 控件之 AppBar 和 SliverAppBar
AppBar 和 SliverAppBar 是纸墨设计中的 App Bar,也就是 Android 中的 Toolbar,关于 Toolbar 的设计指南请参考纸墨设计中 Toolbar 的内容。AppBar 和 SliverAppBar 都是继承至 StatefulWidget 类,都代表 Toobar,二则的区别在于 AppBar 位置的固定的应用最上面的;而 SliverAppBar 是...原创 2018-09-04 11:00:51 · 3479 阅读 · 0 评论 -
Flutter的教程四:ListView
本文学习一下列表widget,是最常见的需求 在Flutter中,用ListView来显示列表项,支持垂直和水平方向展示,通过一个属性我们就可以控制其方向 1.水平的列表 2.垂直的列表 3.数据量非常大的列表 4.内置的ListTile(挺好用的)4.内置的ListTile(挺好用的),先看下这个widget,在下面的listView中将直接使用/** * ListTile...原创 2018-08-29 17:23:05 · 1652 阅读 · 0 评论 -
StatefulWidget类与StatelessWidget类
StatefulWidget类 具有可变状态( state)的Widget(窗口小部件).状态( state) 是可以在构建Widget时同步读取时 和 在Widget的生命周期期间可能改变的信息Widget实现者的责任就是 在状态改变时通过 State.setState. 立即通知状态当您描述的用户界面部分不依赖于对象本身中的配置信息和其中构件被夸大的BuildContex...原创 2018-08-29 14:59:34 · 1135 阅读 · 0 评论 -
Flutter组件 - Flexible
Flexible是一个控制Row、Column、Flex等子组件如何布局的组件。Flexible组件可以使Row、Column、Flex等子组件在主轴方向有填充可用空间的能力(例如,Row在水平方向,Column在垂直方向),但是它与Expanded组件不同,它不强制子组件填充可用空间。Flexible组件必须是Row、Column、Flex等组件的后裔,并且从Flexible到它封装的R...原创 2018-08-24 14:13:41 · 188 阅读 · 0 评论 -
Flutter组件 - Expanded
Row、Column、Flex会被Expanded撑开,充满主轴可用空间。使用方式:Row( children: <Widget>[ Container( /// 此组件在主轴方向占据48.0逻辑像素 width: 48.0 ), Expanded( child: Container() /// 此组件会填满Row在主轴方向...原创 2018-08-24 14:11:03 · 1521 阅读 · 0 评论 -
Material触碰水波纹效果
原创 2018-08-31 14:09:19 · 940 阅读 · 0 评论 -
Flutter 控件之 MaterialApp
MaterialApp 代表使用纸墨设计(Material Design)风格的应用。里面包含了纸墨设计风格应用所需要的基本控件。MaterialApp 主要属性如下:title : 在任务管理窗口中所显示的应用名字 theme : 应用各种 UI 所使用的主题颜色 color : 应用的主要颜色值(primary color),也就是安卓任务管理窗口中所显示的应用颜色 home :...转载 2018-08-24 11:06:44 · 691 阅读 · 0 评论