![](https://img-blog.csdnimg.cn/20210320103727402.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Flutter
日常总结
清风99w
这个作者很懒,什么都没留下…
展开
-
Flutter 初识 MediaQuery
当信息发生变化,例如屏幕旋转等时,屏幕中 Widget 会重新构建,以保持最新状态;我们可以通过 MediaQuery 构造函数和提供的静态方法手动设置对应的相关信息MediaQuery.removePadding() 删除内边距MediaQuery.removeViewInsets() 删除视图内边距viewInsets 为键盘弹出时等遮挡屏幕边距,其中 viewInsets.bottom 为键盘高度;systemGestureInsets 为手势边距,如 Android Q 之后添加的向左滑动关原创 2021-03-20 16:15:08 · 250 阅读 · 0 评论 -
flutter 将16进制颜色转换成flutter的argb形式
用 #RRGGBB 规定十六进制颜色,其中 RR(红色)、GG(绿色)和 BB(蓝色)十六进制整数指定颜色的成分(分量)。所有值必须在 00 到 FF 之间。例如,#0000ff 值呈现为蓝色,因为蓝色分量设置为最高值(ff),其他分量设置为 00。如需增加透明度,请在 00 和 FF 之间添加两个额外的数字。首先16进制颜色的表示是通过一个以“#”开头的6位十六进制数值表示一种颜色。6位数字分为3组,每组两位,依次表示红、绿、蓝三种颜色的强度。例如:#ff0000比如#CDD920转化成flutt原创 2021-03-12 17:02:18 · 1048 阅读 · 0 评论 -
flutter 主文件通用代码
主文件代码import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: new原创 2021-03-10 16:33:36 · 101 阅读 · 0 评论 -
如何在flutter里显示html页面
(一)效果图(二)代码,复制即运行import 'package:flutter/material.dart';import 'package:flutter_html/flutter_html.dart';import 'package:flutter_html/style.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build原创 2021-03-03 15:38:24 · 4763 阅读 · 5 评论 -
flutter圆形进度和条形进度绘制
看图:代码:import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: jind原创 2021-03-01 14:49:59 · 448 阅读 · 0 评论 -
flutter饼图
使用插件快多了,代码:import 'dart:math';import 'package:flutter/material.dart';import 'package:charts_flutter/flutter.dart' as charts;void main()=>runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { .原创 2021-02-26 15:42:22 · 392 阅读 · 0 评论 -
flutter:纯手工绘制饼图
好累,不用插件真的是费神啊本博主用flutter纯手工打造饼图,canvas绘制,好累,记得收藏学习哦,我的小粉丝们~老规矩,看效果上代码:import 'dart:math';import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @o原创 2021-02-25 17:28:07 · 459 阅读 · 2 评论 -
flutter绘制柱状图和折线图
老规矩,看效果图下载依赖,导包charts_flutter: ^0.9.0import ‘package:charts_flutter/flutter.dart’ as charts;上代码import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:charts_flutter/flutter.dart' as charts;void main() =>原创 2021-02-25 17:18:52 · 1971 阅读 · 6 评论 -
flutter做的视频播放器让我独自过一个元宵节>_<
元宵节要来了!!开森,做个播放器放点视频看看,嘿嘿一、效果图,啊没图。。二、代码import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';import 'package:video_player/video_player.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget { @overrid原创 2021-02-24 14:58:08 · 354 阅读 · 2 评论 -
flutter实现开关动画
一、效果展示二、下载依赖下载依赖 wheel_switch: ^0.0.1运行指令:flutter pub get或者 flutter packages get导包 import ‘package:wheel_switch/wheel_switch.dart’;三、代码实现,复制即可运行import 'package:wheel_switch/wheel_switch.dart';import 'package:flutter/material.dart';void main()=>原创 2021-02-23 17:15:33 · 582 阅读 · 5 评论 -
纯css和flutter分别实现呼吸灯效果
上一次有粉丝儿问可不可以把月亮做一个呼吸灯效果今天,本博主用纯css和flutter动画分别实现它,记得收藏学习哦第一种,纯css实现,代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0;原创 2021-02-22 15:24:47 · 1990 阅读 · 21 评论 -
flutter写一轮明月表达思念
因为一些特殊的情况,很多人都只能就地过年。突然就想起了李白的那句诗,举头望明月,低头思故乡的诗句。我记得这还是我小学时候的事情呢,没想到现在我都已经长这么大啦做一轮明月只需要一个圆,将它的颜色做一个过度就可以啦(一)效果图(二)代码实现import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override W原创 2021-02-05 16:26:23 · 128 阅读 · 3 评论 -
flutter里AnimatedContainer居然是表白的一把好手
最近情人节好像要没多久了欸,不管你有没有女朋友都可以学起来哦哈,偶然看到该组件,突然觉得可以用来表白欸,我的小粉丝们,收藏学起来吧其实以前我也写过一个类似的跳动的心的代码,只不过那个时候是用的css,放一个链接:link.今天就用flutter再写一个animatedcontainer 是一个自带动画功能的container,我们只需要给该组件提供动画的开始和结束值,就可以让它动起来。(一)效果图:(二)实现原理:利用可以变化的AnimatedContainer组件,我们准备好一张png图原创 2021-02-04 16:23:10 · 604 阅读 · 4 评论 -
flutter工程目录简介
xml Extensible Markup Language 可扩展标记语言XML是被设计用来存储数据、携带数据和交换数据的,它不是为了显示数据而设计的。dart_tool Dart工具开发包.idea 开发环境配置android 安卓原生工程文件build 编译或运行后产物ios 苹果原生工程文件lib 包含.dart结尾的工程相关文件test 包含.dart结尾的工程测试文件.gitignore git提交仓库忽略文件.metadata 一个对当前workspa原创 2021-02-03 16:50:53 · 255 阅读 · 0 评论 -
记录一些Idea安装flutter环境的问题
首先已经配置好java环境也检测出安装成功然后下载了flutter sdk,idea里面也安状了flutter 和dart插件但是检测不成功,显示如下:然后在idea终端(alt+f12)里面输入 flutter doctor显示如下:到底应该怎么解决呀???...原创 2021-01-25 10:34:27 · 534 阅读 · 2 评论 -
Flutter 动画1
写代码就希望写出来的东西是可以动的,所以,最近分享一点动画的代码一起学习呀~觉得有用的话,记得收藏一波~以下所有的代码,可以直接复制进去main.dart文件里面,就可以运行出这个效果啦~(一)效果图这个效果是当你一开始运行,这个小方块就会开始从左上角沿着对角线运动到右下角(一)代码import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessW原创 2021-01-07 14:57:42 · 312 阅读 · 4 评论 -
Flutter IgnorePointer
上一篇博客我们用的absorbpointer,今天给大家分享igorepointer,看看会有什么不同捏~代码参照上一篇博客修改,把absorbpointer换成igorepointer,你会发现点击蓝色和橙色色块,打印的结果都是 click orange说明,点击事件穿透了蓝色色块,只有橙色色块的点击事件有效。ignorepointer忽略了自己本身~感觉就跟它自己 的名字一样啊~...原创 2021-01-07 11:20:30 · 1108 阅读 · 0 评论 -
Flutter AbsorbPointer
之前跟大家分享过一篇关于stack组件的运用今天继续结合stack分享一个新的组件,AbsorbPointer效果实现:点击色块打印结果记得收藏学习~(一)效果图(二)代码复制即可运行~有问题留言呀,各位亲~import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(B原创 2021-01-06 17:26:40 · 582 阅读 · 9 评论 -
Flutter showaboutdialog
该更新了~记得收藏学习~(一)效果图master是一个暴殄天物的物种!!!(二)代码实现复制代码即可达到与本博主一样的效果,不用感谢~嘻嘻import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Mat原创 2021-01-06 17:09:24 · 583 阅读 · 7 评论 -
Flutter 轮播图3
送福利啦~再给大家推荐几个模板轮播图,拿走拿走????(一)效果图1(一)代码还不知道怎么复制代码运行的,看看我唯一置顶的的博客,看看就会啦~,不会的来问我????以下代码在上一篇的基础上替换swiper部分就可以啦 Container( padding: EdgeInsets.only(top: 10), height: 180, child: Swiper(原创 2020-12-31 10:54:38 · 1021 阅读 · 0 评论 -
Flutter 轮播图2
上一篇博客我们做一个全屏的轮播效果,这次我们做一个比较大众的~老规矩,看效果图(一)效果图(二)看代码import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';class SwiperPage extends StatefulWidget { @override _SwiperPageState createState() => _SwiperPageSt原创 2020-12-31 10:18:08 · 187 阅读 · 0 评论 -
Flutter 轮播图(基础版)
哈哈哈,女帝的身材绝了呀,做一个轮播图慢慢看,身材比例也太好吧,你们也赶紧收藏学起来吧~老规矩,先看图(一)效果图(二)效果实现首先,我们要引入依赖,在pubspec.yml这个文件写入一个指令,看图版本号可能会不同,给个网址自己去下~https://pub.dev/packages/flutter_swiper然后就是准备你喜欢的图片,开始画ui啦话不多说,上代码:复制即可运行,你看我多懂你们,嘿嘿import 'package:flutter/material.dart';imp原创 2020-12-30 17:40:26 · 480 阅读 · 4 评论 -
Flutter 日历
(一)效果(二)代码实现没有下依赖的记得参照时间戳那篇博客以下代码复制进main.dart文件即可运行import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debug原创 2020-12-29 14:55:48 · 3210 阅读 · 1 评论 -
Flutter 时间戳 以及格式化时间
(一)效果图(二)实现修改pubspec.yaml文件导入红勾所示的文件,提醒一下大家哈,这个文件不能有多余的空格分号等或者格式不对等问题,否则都会导致下载依赖失败代码:import 'package:flutter/material.dart';import 'package:date_format/date_format.dart';//导包void main() => runApp(MyApp());class MyApp extends StatelessWidget {原创 2020-12-29 14:35:21 · 9517 阅读 · 0 评论 -
Flutter form表单综合运用
老规矩,看图(一)效果图(二)代码实现import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false,原创 2020-12-29 14:13:03 · 789 阅读 · 6 评论 -
Flutter各类按钮组件
还记得我最开始啥都不知道的时候,写个按钮都不知道怎么去修改样式。。。尼曼有福利了,我把需要用到的一些常用按钮,给你们都写出来啦老规矩,先看样式:(一)效果图(二)实现代码import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {原创 2020-12-29 13:57:06 · 694 阅读 · 0 评论 -
Flutter drawer侧边栏
(一)效果图(二)实现方法drawer组件以及它自带的组件实现column和row组件背景图image头像clipavatar(三)代码实现import 'dart:ui';import 'package:flutter/material.dart';class Tabs extends StatefulWidget { //返回到设置页面 final index;/////////// Tabs({Key key, this.index = 0}) : super(k原创 2020-12-29 11:43:16 · 503 阅读 · 0 评论 -
Flutter AppBar定义顶部Tab切换(滑动)
(一)效果及效果图效果:头部的选项可以切换,可以左右滑动(二)实现在上一篇博客的基础上加一个属性:isScrollable: true,以下是全部代码,如果想要运行,就要在main.dart里面写一个入口函数,在home的位置写Categorypage()import 'package:flutter/material.dart';class Categorypage extends StatefulWidget { @override _CategorypageState cr原创 2020-12-25 16:53:57 · 3953 阅读 · 4 评论 -
Flutter AppBar定义顶部Tab切换(固定)
(一)实现效果及效果图效果:(1)这个头部的切换数量是固定的,也就是不可以左右滑动类似于html里面的选项卡效果图:(二)实现方法tab组件tabbarview组件(三)代码实现import 'package:flutter/material.dart';//不可以左右滑动的头部选项卡效果class AppBarDemoPage extends StatelessWidget { @override Widget build(BuildContext context) {原创 2020-12-25 16:45:12 · 1286 阅读 · 0 评论 -
Flutter中路由替换和返回到根路由
一、用到的方法路由替换:Navigator.of(context).pop();返回到根路由:Navigator.of(context).pushAndRemoveUntil( new MaterialPageRoute(builder: (context) => new Tabs()), (route) => route == null);二、我们用一个案例来详细讲解以上两个方法实现的效果:从首页点击注册-注册第二步-注册成功我们需要准备原创 2020-12-21 18:19:11 · 983 阅读 · 0 评论 -
Flutter命名路由及命名路由传值
上一篇博客我们学习了普通路由和普通路由传值,今天我们学习命名路由和命名路由传值,它更加的适用于中大型项目。能够达到统一管理路由的效果。我们实现的效果是从首页跳转到商品页面,再跳转到商品详情页面,然后返回上一级页面。以下是涉及到的所有页面的代码:main.dartimport 'package:flutter/material.dart';import 'pages/Form.dart';import 'pages/Search.dart';import 'routes/Routes.dart'原创 2020-12-16 16:26:51 · 1660 阅读 · 16 评论 -
Flutter普通路由的相关应用
揭秘上期的问题啦:要想实现底部有多个导航,我们可以加一个属性,type: BottomNavigationBarType.fixed把这句代码写在底部导航组件里面。然后就可以放多个导航图标了。如果不加这个属性的话,当底部的导航图标多了以后就会挤掉之前的,大家可以去试一下~现在开始新的内容:首先,路由是啥?通俗点说,就是页面跳转。切换页面,在flutter里面就是切换组件。今天我们了解一下,路由的两种配置方式,基本路由和路由传值(一)效果图及页面说明点击分类里面的表单按钮,就会跳转到表单页原创 2020-12-15 16:26:56 · 142 阅读 · 0 评论 -
Flutter bottomNavagationBar的应用
(一)效果图及说明我们今天要实现的效果就是点击下面的导航栏的图标,颜色变为绿色,然后可以加载出对应的页面内容。所以这一节又是一个有状态组件的应用例子哦赶紧收藏学习起来(二)实现要点(1)知识点:底部导航条bottomNavigationBar状态改变 setState图标的颜色变化用bottomNavigationBar里面的属性**提示:**怎么查看一个组件的属性双击选中组件,右键,就可以点开看到该组件的所有内容。快去试试吧(2)写法:抽离代码,跳转后的代码我们封装成在一个类里面原创 2020-12-15 14:31:55 · 219 阅读 · 0 评论 -
Flutter StatefulWidget的基本结构
前面提到了无状态的基本结构的代码,现在说一下有状态的记得收藏和学习哦import 'package:flutter/material.dart';//代码报红就导包class xxx extends StatefulWidget { @override _xxxState createState() => _xxxxState();}class _xxxState extends State<xxx> { @override Widget build(B原创 2020-12-15 12:08:41 · 343 阅读 · 2 评论 -
Flutter怎么加载本地图片
跟着博主看了这么久的flutter,有没有收获呀,各位但是你们居然没有问,怎么去运行加载出一张本地图片第一步,打开我们的工程,找到红框的文件第二步,打开它,然后修改下面的代码如果按照这种格式去加载本地图片,太耗时了,还得一张一张的去写路径,所以可以按照我的写提示:这个被我们修改的文件是很讲究格式滴,尤其是你在这个文件添加一些资源文件,依赖版本什么的,都要注意格式和写法,有时候多一个空格都不行哦,严格对齐在代码里面引入本地图片是:image.asset(“图片路径”)...原创 2020-12-14 22:18:00 · 1817 阅读 · 0 评论 -
Flutter StatefulWidget的相关应用
我们最常见的交互就是按钮组件,chexkbox , radio等我们今天就使用按钮完成一个简单的交互点击按钮,数字加1为了加深印象,我们先用无状态组件顶实现一个按钮,看看点击按钮会发生什么变化无状态的代码实现import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(Build原创 2020-12-14 18:08:02 · 967 阅读 · 3 评论 -
Flutter wrap组件的应用
(一)效果图(二)实现要点按钮可以使用构造函数(三)代码实现import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( a原创 2020-12-14 17:29:17 · 228 阅读 · 8 评论 -
Flutter动态循环卡片组件
(一)效果图(二)实现要点listData.map((value) {}).toList()(三)代码实现导入数据文件里面的代码可以参考如下:List listData = [{ "title":"master", "author":"是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的是最好的", "imageUrl":"images/master.jpg",}, { "title":"最帅", "a原创 2020-12-14 16:37:48 · 1455 阅读 · 2 评论 -
Flutter card组件应用
(一)效果图(二)实现要点:card组件图片比例 AspectRatio图片填充 fit:BoxFit.cover圆形头像 ClipOval(可以参考以前的头像实现的博客链接: [link](链接: link.)ListView实现列表(三)代码实现我们用上一篇博客(链接: link.)的模板代码给大家做一个演示:import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp原创 2020-12-14 14:46:51 · 256 阅读 · 3 评论 -
Flutter怎么运行一个项目
还记的我最开始学习flutter的时候,创建完工程以后,不知道怎么去运行出效果。我相信很多人最开始的时候也是一脸懵。flutter创建好工程以后,有一个自动生成的main.dart文件,这个就是运行时的主文件,里面有运行的入口函数。对于初学者只是简单写几个demo,没必要这么选择这种方式,麻烦没有效率。请参考以下过程修改:(1)找到main.dart这个文件,把里面的内容全部删掉,放入以下代码,这个代码就是运行的基本架构,以后我们写所有的代码都可以直接在这个文件里面写。import 'package:原创 2020-12-14 13:56:55 · 6544 阅读 · 10 评论