Flutter 相关
文章平均质量分 58
Flutter 相关
Leonardo_Fibonacci
make it happen make it better
展开
-
Flutter 监听前台和后台切换的状态
混入 WidgetsBindingObserver 这个类,这里提供提供了程序状态的一些监听。原创 2024-01-08 09:19:32 · 1323 阅读 · 0 评论 -
Flutter 软键盘导致界面重绘的问题
用Flutter 开发的应用,在自己搭建的百度地图页面,点击进入一个界面输入内容,发现弹出键盘会出现在第一个百度页面出现空白的问题,并且在控制行抛出错误,在Scafford 中设置 resizeToAvoidBottomPadding: false,查找了资料发现,因为弹出的键盘导致页面进行了重绘,所以百度地图加载了异常,所以解决方案为。原创 2023-08-08 13:23:54 · 910 阅读 · 1 评论 -
Flutter Stream 简单的使用
【代码】Flutter Stream 简单的使用。原创 2023-06-08 16:45:20 · 357 阅读 · 0 评论 -
Flutter Socket.io框架的使用
1 安装2 代码。原创 2023-06-08 11:28:55 · 795 阅读 · 0 评论 -
Flutter 中使用WillPopScope
是一个回调函数,当用户点击返回按钮时被调用(包括导航返回按钮及Android物理返回按钮)。WillPopScope 这个控件可以用来一些防止误触判断,时,当前路由出栈退出。我们需要提供这个回调来决定是否退出。时,则当前路由不出栈(不会返回);原创 2023-05-30 13:50:21 · 526 阅读 · 0 评论 -
Flutter LayoutBuilder
也可以拿到父组件的约束,去动态布局子组件。比如说类似微信朋友圈列表的状态。这里就可以动态的计算内容进行布局。这个组件可以实现响应式布局,原创 2023-04-20 14:05:19 · 169 阅读 · 0 评论 -
Flutter 滚动组件ListView,GridView,Sliver以及滚动监听
身是菩提树 心是明镜台 时时勤拂拭 模式染尘埃这玩意不难,就是东西多。。。原创 2023-04-17 22:38:31 · 1833 阅读 · 0 评论 -
Flutter Flex(Row Column,Expanded, Stack) 组件
这个Flex 继承自 MultiChildRenderObjectWidget,所以是多子布局组件Flex 的子组件就是Row 和 Column , 之间的区别就是Flex 的 direction 设置不同。它有两个轴,一个是MainAxis 还有一个是交叉轴 CrossAxis。原创 2023-04-14 16:15:16 · 846 阅读 · 0 评论 -
Flutter Animation 动画
在Flutter 中,做动画离不开这么一个类,那就是这个类如往常一样,也是一个抽象类。整个animation.dart 文件只有两百多行代码,其中包含了大量的注释。这句话应该就可以看出Tween 的重要性了。一 Animation了解一下这个类中的方法吧。原创 2023-04-13 10:22:51 · 418 阅读 · 0 评论 -
Flutter 路由
在Flutter 中,路由管理主要有两个类Route和Navigator。原创 2023-04-12 15:55:27 · 979 阅读 · 0 评论 -
Flutter 事件监听以及EventBus
在Flutter中,手势有两个不同的层次:第一层:原始指针事件(Pointer Events)第二层:手势识别(Gesture Detector)原创 2023-04-12 13:40:12 · 919 阅读 · 0 评论 -
Flutter 中 Provider 基本使用
使用Consumer 的话,Widget build 方法不会多次build,改变只需要改变的,实现了局部刷新。@overrideprint("计数改变了,ProviderSonWidgetState 调用了build");},Consumer 这里的builder 方法会被多次的调用,其实这样很不好,因为其内部本身不依赖provider的数据,只是改变了provider的数据,所以没有必要重新// 这里的按钮点击之后 子组件进行加1操作。原创 2023-04-12 10:38:37 · 664 阅读 · 0 评论 -
Flutter InheritedWidget
【代码】Flutter InheritedWidget。原创 2023-04-11 18:52:10 · 87 阅读 · 0 评论 -
Flutter 中的key
Flutter 中的key 主要分为两类,LocalKey : 应用于具有相同父Element的Widget 进行比较,也是diff 算法的核心所在GlobalKey :通常我们会使用GlobalKey 某个widget 对应的Widget 或State 或者Element。原创 2023-04-11 16:22:26 · 990 阅读 · 0 评论 -
Flutter渲染原理
在Flutter 中,万物皆是Widget,无论是可见的还是功能型的。一切都是Widget.官方文档中说的Widget 使用配置和状态来描述View 界面应该长什么样子。它不仅可以表示UI元素,也可以表示一些功能性的组件如:用于手势检测的 GestureDetector、用于APP主题数据传递的Theme、布局元素等等两个重要的方法一个是通过 createElement 来创建 Element 对象的,一个是根据 key 来决定更新行为的 canUpdate 方法。原创 2023-04-11 15:29:39 · 779 阅读 · 0 评论 -
Flutter 了解 Element
其主要作用 将element相关联的renderObject插入到渲染树中,插入到渲染树后的element就处于“active”状态,处于“active”状态后就可以显示在屏幕上了。1 framework 通过在将要被用来作为Element的初始配置的widget 上调用其createElement 方法来创建一个element。element 是持有renderObject 的引用的。2 framework 通过调用mount 方法 将一个新创建的element 加入树中给定的父节点的插槽下面。原创 2023-04-11 15:31:24 · 705 阅读 · 0 评论 -
Flutter Dio 库的简单封装
dio 库Flutter 中是比较流行的网络请求库。其中在拦截器可以拦截请求,响应以及错误。第二个就是Http_config。第一个HttpRequest。第三个 自定义的拦截器。原创 2023-04-09 14:35:46 · 3157 阅读 · 0 评论 -
Flutter 组件化 之 本地包
app:用于单独的FlutterDart代码,不依赖与原生代码,生成的Package目录里没有目录,可创建exampleflutter项目配合测试。原创 2023-03-29 17:26:11 · 939 阅读 · 0 评论 -
iOS 项目嵌入Flutter 运行
创建完成后,该模块和普通的Flutter项目一直,可以通过Android Studio或VSCode打开、开发、运行;和之前项目不同的iOS和Android项目是一个隐藏文件,并且我们通常不会单独打开它们再来运行;它们的作用是将Flutter Module进行编译,之后继承到现有的项目中。主要是通过pod 进行设置,之后pod install。显示的结果 顺利加载出flutter 的页面。在ViewControlelr 设置的代码。注意my_flutter 的路径对不对。原创 2023-03-26 20:47:43 · 1634 阅读 · 1 评论 -
18-flutter的Future和FutureBuilder
Future表示接卸来某个时间的值或者错误,借助Future可以在flutter 总实现异步操作。其本事是dart:async 包中的一个类,使用它的时候需要导入dart:async 包,Future 有两种状态。pending 执行中completed 执行结束 ,分为两种情况,要么成功并要么失败1 异步操作 test() async{ int result = awa...原创 2019-08-25 22:49:17 · 418 阅读 · 0 评论 -
17-flutter导航栏渐变效果
MediaQuery.removePadding 移除顶部的 paddingimport 'package:flutter/material.dart';// 导入swiper 组件import 'package:flutter_swiper/flutter_swiper.dart';const APPBAR_SCROLL_OFFSET = 200;class HomePage ext...原创 2019-08-25 10:39:22 · 2119 阅读 · 2 评论 -
16-flutter-Swiper 插件的使用
Flutter-Swiper 插件的使用1 在pubspec.ymal 中去导入插件dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class ...原创 2019-08-24 17:48:57 · 1445 阅读 · 0 评论 -
15-flutter Scaffold详解
Scaffold是一个实现基本的material design 的布局结构appBar显示在界面顶部的一个 AppBarbody当前界面所显示的主要内容 WidgetfloatingActionButtonMaterial 设计中所定义的 FAB,界面的主要功能按钮persistentFooterButtons固定在下方显示的按钮,比如对话框下方的确定、取...原创 2019-08-23 17:31:55 · 1987 阅读 · 0 评论 -
14-flutter Animation 动画
动画一 Animation在Flutter中,Animation对象本身和UI渲染没有任何关系。Animation是一个抽象类,它拥有其当前值和状态(完成或停止)。其中一个比较常用的Animation类是Animation。Flutter中的Animation对象是一个在一段时间内依次生成一个区间之间值的类。Animation对象的输出可以是线性的、曲线的、一个步进函数或者任何其他可以设计的...原创 2019-08-20 18:11:11 · 321 阅读 · 0 评论 -
13-flutter 加载图片
Image Widget1 flutter 加载图片的方式new Image从ImageProvider 中获取图像new Image.asset使用key 从assetBundle 获取图片Image.network从网络中获取图片Image.file从本地文件获取图片Image.memory用来加载Uint8List资源(字节数组)图片2...原创 2019-08-20 14:39:22 · 207 阅读 · 0 评论 -
12-flutter Textfield的使用
获取用户的输入用TextField 或者TextFormField 的实现,通过控制器来实现获取用户的输入。1 TextField 的属性const TextField({ Key key, this.controller, this.focusNode,// 这个属性可以用来监听输入框是否获取 this.decoration = const InputDecoration(...原创 2019-08-20 11:12:29 · 938 阅读 · 0 评论 -
11-flutter事件监听
事件监听1 本身支持事件检测,就可以直接使用onpress body:Center( child: RaisedButton( child: Text("Click"), onPressed: (){ print("我被Click了"); }...原创 2019-08-16 15:34:32 · 4263 阅读 · 0 评论 -
10-flutter 使用http包请求和网络指示器
使用http package 进行网络请求操作1 安装步骤Step1在pubspec.yaml 文件中添加依赖dependencies: http: ^0.12.0+1Step2 flutter packages getStep3导入头文件import ‘package:http/http.dart’ as http;2 使用 ...原创 2019-08-16 10:36:28 · 435 阅读 · 0 评论 -
9-flutter Isolate
isolate由于Flutter 是单线程并且跑着一个event loop,如果在执行I/O 操作或者磁盘访问或者网络请求,可以安全的使用async / await来完成。如果让CPU 执行繁忙的计算密集型任务,导致UI的挂起,使用isolate 来进行避免阻塞event loop。isolate 是分离的运行线程,不和主线程的内存堆共享内存。这意味着你不能访问主线程中的变量,或者使用isol...原创 2019-08-14 17:54:28 · 1093 阅读 · 2 评论 -
8-flutter 异步和线程
线程和异步的UI1 异步的使用Dart 有一个单线程执行模型,支持Isolate(一种在另外一种线程运行dart的方法),一个事件循环和异步编程。可以使用async / await 来做网络请求不会挂起UI使用http 导入import ‘dart:io’;import ‘dart:convert’;// 加载数据dataHandle()async{ String u...原创 2019-08-14 16:48:03 · 592 阅读 · 0 评论 -
7-flutter Navigator 和Route
Route 和 Navigator 用于页面之间的跳转一 Navigator 的 push 和 pop 用于页面之间的跳转创建MaterialApp时可以指定routes参数,该参数是一个映射路由名称和构造器的Map跳转的时候 使用 push跳回的时候使用 popimport 'package:flutter/cupertino.dart';import 'package:flu...原创 2019-08-12 18:42:42 · 250 阅读 · 0 评论 -
6-flutter 状态管理
1 StatelessWidget不需要状态改变的widget,它没有要管理的内部状态。Text,CircleAvator 都是其子类其传递的参数别final 修饰,不可变的无状态的widget build 方法在以下三种情况下进行调用当widget 插入到数中去当widget 父级更改配置的时候当他依赖的inheritewidget 发生变化的时候2 StatefulWid...原创 2019-08-09 16:01:02 · 139 阅读 · 0 评论 -
5-flutter 布局和列表
布局和列表1 Row 横向 布局 @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Text("111"),Text("222"),Text("333...原创 2019-08-09 15:28:48 · 638 阅读 · 0 评论 -
4- flutter - Widget
WidgetFlutter 中的view 就是widget1 无状态和有状态的WidgetStateslessWidgets 适用于用户界面不依赖于用户的信息的时候StatesfulWidgets 有状态的,例如HTTP 网络请求或者用户交互之后收到数据动态表更新UI这就是一个无状态的WidgetText("we like bom", style: new Tex...原创 2019-08-09 11:43:17 · 171 阅读 · 0 评论 -
3-flutter 项目结构 资源 依赖
1 项目的名称android 安卓相关工程文件build 项目的构建输出目录ios ios 相关的部分工程文件lib 项目中的dart 源文件src 包含其他的源文件main.dart 自动生成的项目入口文件test 测试相关的文件pubspec.ymal 项目依赖配置文件3 归档图片资源和处理不同的分辨率assets 文件夹as...原创 2019-08-08 18:25:06 · 467 阅读 · 0 评论 -
2-flutter 之HelloWorld
widget在flutter 中,几乎所有的东西都是widget,本身是用户界面的基本构建快,将widget组成一个层次结构,调用widget树。每一个窗口widget都嵌套在父窗口widget中,并且从其父窗口中继承属性。甚至应用程序对象本身也是一个组件,没有单独的应用程序对象。widget可以定义结构元素 – 按钮或者菜单文体元素 – 字体或者颜色主题类似布局的填充或对齐的一个方...原创 2019-08-08 17:46:48 · 178 阅读 · 0 评论 -
1-flutter 安装步骤
flutter 安装步骤1 下载SDKSDK 下载地址2 解压压缩包 将sdk 文件夹丢进系统的应用程序(Application)的目录3 配置环境变量命令行 open ~/.bash_profile ,然后在bash 文件中写入下面配置export PATH=$PATH:/Applications/flutter/bin编写完毕,保存,命令行执行 source ~/....原创 2019-08-08 15:28:04 · 493 阅读 · 0 评论 -
19-flutter的ListView 和 GridView的使用
ListView 的水平样式 和垂直样式1 水平列表import 'package:flutter/material.dart';const CITY_LIST = ["北京","上海","广州","深圳","南京","郑州","武汉"];void main() => runApp(MyApp());class MyApp extends StatelessWidget...原创 2019-08-26 14:06:43 · 476 阅读 · 0 评论 -
20-flutter下拉刷新与上拉加载
1 RefreshIndicator 下拉刷新控件下拉刷新的时候会回调 onRefresh 方法RefreshIndicator( onRefresh: _handleRefresh, child: ListView( children: _buildList(), ),),2 上拉加载多上拉加载更多的时候@override voi...原创 2019-08-26 15:41:18 · 273 阅读 · 0 评论