Flutter
文章平均质量分 51
主要为使用Flutter开发的一些相关经验
倾云鹤
宝可梦训练家
展开
-
flutter实现UDP发送魔法包唤醒主机
【代码】flutter实现UDP发送魔法包唤醒主机。原创 2024-06-12 12:03:22 · 407 阅读 · 0 评论 -
flutter嵌入原生view
flutter嵌入原生view原创 2024-04-11 18:54:41 · 919 阅读 · 0 评论 -
Flutter BottomNavigationBar缓存页面
一、前言使用GetView加BottomNavigationBar布局,切换页面时,会重新build页面。这就会导致我在A页面滑动了,切换后,A页面的滑动会被初始化。二、解决1 IndexedStack将GetView改成IndexedStack这种方式会提前将所有子页面加载完成,不会重新build页面。实则是层叠布局,将所有子页面都渲染出来后,根据index展示相应的页面。int currentIndex = 0;List<Widget> _children = [ H原创 2022-02-18 18:12:39 · 1863 阅读 · 0 评论 -
Flutter本地数据库sqflite
一、 前言sqflite是一款轻量级的数据库,用法类似于SQLite。同时支持Android和iOS二、引用sqflite版本:^2.0.0+4功能:控制mp3文件播放。地址:https://pub.dev/packages/sqflite方法:数据库的操作。三、使用使用单例模式来进行操作。增删改都含有事务处理。1. 模型final _version = 1;//数据库版本号final _databaseName = "User.db";//数据库名称final _tabl原创 2022-02-11 15:35:57 · 2675 阅读 · 0 评论 -
Flutter camera自定义
一、前言之前用image_picker来进行调起摄像头进行拍摄,具体可看Flutter调用摄像头录像及获取视频信息。但是页面及相关功能都是封装好的,无法自定义,所以不合适。比如可以重复录制等等,而当前项目不允许重复录制,所以只能再找插件,也就是现在的camera。预览图如下:二、引用1 camera: 0.9.4功能:调起摄像头,允许重制页面布局。安卓看一下配置要求。地址:https://pub.dev/packages/camera备注:我使用的版本是0.9.4,安卓下minSdkVersi原创 2022-01-25 16:06:52 · 5515 阅读 · 3 评论 -
Flutter AudioPlayer单例模式
一、前言一般情况下,audioPlayer最好设置成单例模式,这样在跨页面操作时会更好的使用。确保所有对象都访问一个实例。二、引用audioplayers功能:控制mp3文件播放。地址:https://pub.dev/packages/audioplayers使用文章:https://blog.csdn.net/qq_38779672/article/details/122383327event_bus功能:实现广播功能。地址:https://pub.dev/packages/event_原创 2022-01-10 18:05:30 · 2766 阅读 · 0 评论 -
Flutter播放音频
一、前言主要为播放mp3音频,二、引用audioplayers功能:控制mp3文件播放。地址:https://pub.dev/packages/audioplayers方法:await audioPlayer.setUrl('clicking.mp3'); /// 预加载但不播放,返回1为成功await audioPlayer.resume(); /// 快速播放,返回1为成功await audioPlayer.pause(); /// 暂停播放await aud原创 2022-01-08 17:25:11 · 7138 阅读 · 0 评论 -
Flutter Container去掉边框
一、效果图1 原图2 修改后二、解决出现如上原因是由于蓝色边框导致的覆盖不全,所以只需要把蓝色容器边框去掉即可1 例子Container( width: 100.0, height: 100.0, color: Colors.red,),2 修改Container( width: 100.0, height: 100.0, decoration: BoxDecoration( color: c_FF, border: Border.all(原创 2022-01-07 17:47:42 · 2921 阅读 · 2 评论 -
Flutter取消下载及拦截器
一、前言下载大文件时,不想等待,既可以选择取消下载。预览如下:二、引用dio功能:网络请求。地址:https://pub.dev/packages/dio三、使用如下功能:下载进度条取消下载import 'dart:async';import 'dart:io';import 'package:dio/dio.dart';/// 第三方import 'package:get/get.dart';import 'package:flutter/services.dar原创 2022-01-04 17:53:09 · 1198 阅读 · 0 评论 -
Flutter走马灯
一、预览二、代码1. 封装方法参考:Flutter走马灯Flutter生命周期import 'dart:async';import 'package:flutter/material.dart';class NotablePage extends StatefulWidget { Widget child; // 轮播的内容 Duration duration; // 轮播时间 double stepOffset; // 偏移量 double padding原创 2022-01-04 14:43:22 · 1259 阅读 · 0 评论 -
Flutter笔试页面
一、预览预览二、使用1. 获取试题(1) 实体class ExamQuestions { int? id; int? level; String? subject; String? title; int? right; String? a; String? b; String? c; String? d; int? addtime; int? deltime;}(2) 使用var myExamQuestions = [ExamQuestions原创 2022-01-04 11:36:21 · 927 阅读 · 1 评论 -
Flutter下载文件、获取进度及存储
一、前言应用内下载文件时可使用,基于dio的下载文件二、引用dio功能:网络请求。地址:https://pub.dev/packages/diopath_provider功能:提供访问文件系统的插件。地址:https://pub.dev/packages/path_provider三、使用生成存储文件地址get下载文件及获取下载进度写入文件import 'dart:io';import 'package:dio/dio.dart';import 'package:p原创 2021-12-31 11:31:44 · 4526 阅读 · 0 评论 -
Flutter广播
一、前言在正常的开发中,我们经常会用到跨页面事件通知,也就是广播机制。比如需要登录的app,页面会关注用户登陆或注销事件,来进行一些状态更新。这时候就需要一个事件总线,它通常实现订阅者模式,订阅者模式包含发布者和订阅者两种角色,可以通过事件总线来触发事件和监听事件。二、引用event_bus功能:实现广播功能。地址:https://pub.dev/packages/event_bus三、使用一般有两种方式:全局变量内实例化eventBus在使用时调用(本次主要讲这种)1.原创 2021-12-27 11:11:10 · 1661 阅读 · 0 评论 -
Flutter优化加载网络图片及异常捕获
一、前言加载网络图片时,有时候因为一些原因导致加载缓慢。所以可以选择如下方式添加占位图。二、使用1. 图片占位符(1) FadeInImageFadeInImage( width: 100, fit: BoxFit.cover, placeholder: NetworkImage("占位图网址"), image: NetworkImage("实际渲染图片网址"))(2) 带圆角的FadeInImageClipRRect( borderRadius: BorderRadi原创 2021-12-25 15:24:00 · 2720 阅读 · 0 评论 -
Flutter使用Clip裁剪Widget
一、前言有时候总会遇到一些奇怪的需求,比如奇形怪状的Widget,今天主要搞一下如何实现这是Widget。二、实现1. ClipOval默认:子组件为正方形时裁剪成内贴圆形;为矩形时剪裁成内贴椭圆。也可自定义Rect参数进行裁剪局域(1) 方法ClipOval({Key? key, this.clipper, this.clipBehavior = Clip.antiAlias, Widget? child}) : assert(clipBehavior != null),原创 2021-12-15 11:59:41 · 2059 阅读 · 0 评论 -
Flutter主题及状态栏设置
一、依赖只需要原生io和services即可。功能主要为可以自定义AppBar及整体页面布局。1. 状态栏管理主要使用如下import 'dart:io';import 'package:flutter/services.dart';SystemUiOverlayStyle value;if(Platform.isAndroid){ value = SystemUiOverlayStyle( statusBarColor: Colors.transparent, /// 安卓系原创 2021-12-14 16:49:38 · 2921 阅读 · 0 评论 -
Flutter接入微信和支付宝支付
一、前言使用第三方包来快速接入支付宝支付和微信支付二、配置及使用1 通用配置(1) 配置Associated Domains如图所示,有关universal links可以去Mob内配置,里面免费提供。(2) iOS/Runner/Info.plist内配置放在最高级的dict内 <key>LSApplicationQueriesSchemes</key> <array> <string>https</string> &原创 2021-12-09 18:24:11 · 5008 阅读 · 0 评论 -
Flutter调用摄像头录像及获取视频信息
一、前言最近在做的一个app,有个需要是需要调起摄像头进行录像,同时提交时,后台需要知道视频的时长及大小。基于这个需求,所以总结一下开发记录二、引用1 image_picker功能:调起摄像头,照片或视频拍摄和选取都可。地址:https://pub.dev/packages/image_picker2 video_player功能:视频播放,这里主要用于解析视频。地址:https://pub.dev/packages/video_player三、使用1 代码实现import 'pack原创 2021-12-07 18:12:21 · 7741 阅读 · 1 评论 -
Flutter目录及开发结构
一、前言首先先看一下flutter自带的目录文件或目录说明.dart_tool记录了一些dart工具库所在的位置和信息.ideaandroid studio 是基于idea开发的,.idea 记录了项目的一些文件的变更记录androidAndroid项目文件夹iosiOS项目文件夹liblib文件夹内存放我们的dart语言代码test用于存放我们的测试代码.gitignoregit忽略配置文件.metadataIDE 用来记录原创 2021-11-30 00:21:03 · 5528 阅读 · 0 评论 -
Flutter问题记录(持续更新)
一. Error installing libwebp1. 问题原因无法正常连接libwebp库2. 解决方案a. 终端输入pod repo查看cocoapods在本机的地址b. 进入该文件地址/Speces/1/9/2/libwebpc. 进入具体的报错版本例如我这里的1.2.0,则修改里面的json文件,将Source改为https://github.com/webmproject/libwebp.gitd. 执行pod install...原创 2021-09-01 23:44:48 · 1655 阅读 · 0 评论 -
Flutter聊天页面
一、依赖与预览get: 4.1.4video_player: ^2.1.1 /// 播放视频emoji_picker_flutter: ^1.0.5 /// 表情库flutter_keyboard_visibility: ^5.0.3 /// 监听键盘弹起有关IM相关的请看《Flutter融云接入部分》预览二、使用_messageText:TextEditingController()类型1. 表情部分展示import 'package:emoji_picker_flutt原创 2021-08-23 16:16:40 · 3022 阅读 · 10 评论 -
Flutter国际化
一、依赖与预览get: 4.1.4预览二、使用1. 在main.dart内配置Widget build(BuildContext context) { return GetMaterialApp( title: "GUGU国际社交", debugShowCheckedModeBanner: false, enableLog: true, logWriterCallback: Logger.write, initialRout原创 2021-08-12 15:20:50 · 575 阅读 · 0 评论 -
Flutter Web 开发指南
一、开发前准备1. 使flutter支持webflutter config --enable-webflutter create .如果不执行第二个指令,会提示"Missing index.html."2. 检查配置flutter doctor3. 新建项目和正常flutter项目一样4. 在浏览器中调式flutter run -d chrome5. 编译web端flutter build web6. 运行编译完成后, 进入web目录: ** 项目根目录/build/web原创 2021-08-11 18:50:17 · 1798 阅读 · 0 评论 -
Flutter接入融云IM
一、配置1. 导入第三方rongcloud_im_plugin: ^5.1.32. 初始化融云token为融云唯一识别标志,用shared_preferences存到本地initRongIM() async { RongIMClient.init(rongIMKey); SharedPreferences prefs = await SharedPreferences.getInstance(); ///融云初登录-""传token RongIMClient.connect(原创 2021-08-09 18:06:09 · 1140 阅读 · 0 评论 -
OKR自律开发记录
本软件基于Flutter开发,运用GETX状态管理框架实现,支持多语言。一、运行样例二、功能用户验证码登陆修改个人信息和头像预览更改信息系统清理缓存退出登陆计划创建计划删除计划预览计划修改计划三、插件集合状态管理框架get: ^4.1.4网络请求dio: ^4.0.0dio_cookie_manager: ^2.0.0cookie_jar: ^3.0.1下拉刷新flutter_easyrefresh: ^2.2.1.原创 2021-08-02 16:25:17 · 551 阅读 · 0 评论