flutter开发
antu58
早餐不吃火锅
展开
-
Flutter--拖拽列表(将外部组件拖入列表)
一个列表,它允许从外部(按钮等)将数据拖入列表内,并且列表内的数据可以拖拽排序原创 2023-02-20 11:38:39 · 466 阅读 · 1 评论 -
Flutter 拆分字符串中的emoji
【代码】Flutter 拆分字符串中的emoji。原创 2023-02-09 10:56:21 · 352 阅读 · 0 评论 -
Flutter--可拖拽组件封装,支持拖动到列表边缘时图自动滚动!!!基于EdgeDraggingAutoScroller
支持拖动到列表边缘时图自动滚动!!!基于EdgeDraggingAutoScroller原创 2022-10-23 15:41:50 · 1430 阅读 · 0 评论 -
Flutter--WebSocket
【代码】Flutter--WebSocket。原创 2022-09-05 12:24:40 · 1507 阅读 · 0 评论 -
Flutter-- Map、Class转json,json解析
Map和json互相转换原创 2022-08-18 19:03:28 · 1901 阅读 · 0 评论 -
Flutter--使用相机
flutter调用相机拍照原创 2022-07-10 21:23:37 · 1606 阅读 · 0 评论 -
Flutter--Button浅谈
作为一个常用到不能再常用的组件,material库中的button组件都有一点奇怪——存在无法设置的内外边距,我们做一个简单的展示,选几个常见button,统一使用Text做child,外加一个带红色的Container组件,观察margin和padding.你会发现,除了InkWell,即使padding设置为0,仍然无法消除消除上下padding,这其实不是padding属性没有生效,而是这些按钮有默认大小的约束。这点可以通过源码和不设置child的UI来佐证。.........原创 2022-06-08 18:09:02 · 1348 阅读 · 0 评论 -
Flutter--手动绘制k线图的思路
import 'dart:math';import 'package:flutter/material.dart';import 'package:ripp_link/page/base/base_state_page.dart';import 'package:ripp_link/widget/base/dialog_box/tips_card.dart';class PaintPage extends StatefulWidget { @override State<Sta..原创 2022-04-22 15:39:33 · 2975 阅读 · 0 评论 -
Flutter--分组列表实现思路
代码import 'package:flutter/material.dart';class TableView extends StatelessWidget { final Widget Function(BuildContext context, int section) buildHeader; final Widget Function(BuildContext context, int section) buildFooter; final Widget Functio原创 2022-03-10 17:29:27 · 4529 阅读 · 0 评论 -
Flutter--自定义弹窗(含底部抽屉)Dialog
主要是基于系统的dialog机制做一些使用限制和自定义UI的优化核心代码:class CustomDialog { static void show(BuildContext context, Widget Function(BuildContext ctx, void Function() dismiss)builder, {bool cancellable = false}) { showDialog( context: context, ..原创 2022-03-03 11:31:30 · 4092 阅读 · 0 评论 -
Flutter--页面跳转动画
这个路由提供页面从上下左右自由弹出的动画,其他不同形式的动画如法炮制。import 'package:flutter/material.dart';class PanPageRouteBuilder extends PageRoute { final WidgetBuilder builder; final AxisDirection popDirection; PanPageRouteBuilder({ RouteSettings? settings, re.原创 2022-02-26 16:25:28 · 2034 阅读 · 0 评论 -
Flutter--Hero组件
有时候想要本页面的某个组件,可以动画过渡到下个页面,就比如Apple music中,底部打音乐图标,在打开播放页时能自己放大过度到播放页的位置,这时候就需要用页面跳转动画和hero组件来配合实现。注意:hero组件不可以嵌套使用,比如将一个Container标记为hero,那么它的child不可以Hero组件。import 'package:flutter/material.dart';const String iconTag = "icon";const String titleTag .原创 2022-02-26 11:30:04 · 1038 阅读 · 0 评论 -
Flutter--常用命令
flutter doctor //检测flutter运行环境flutter run //运行flutter build ios --release //iOS打包 -lstdc++flutter build apk //安卓打包flutter clean //清理工程 flutter pub get //更新应用的库//打包flutter build apk//打google play上架的aab包flutter build appbundle//打制定 arm arm6.原创 2022-02-26 10:05:20 · 1249 阅读 · 0 评论 -
Flutter--动画
做一个简单的组合动画 ,让一个View从小变大,然后从红色变蓝色class AnimationView extends StatefulWidget { const AnimationView({Key? key}) : super(key: key); @override _AnimationViewState createState() => _AnimationViewState();}class _AnimationViewState extends State&原创 2022-02-25 17:20:37 · 331 阅读 · 0 评论 -
Flutter--局部组件状态更新
// 通过Builder来获得构建Checkbox的`context`, Builder( builder: (BuildContext context) { return Checkbox( value: _withTree, onChanged: (bool value) { //Flutter决定是否更新组件主要是判断该组件是否为dirty,setState其实就是将组建标记为dirty的过程...原创 2022-02-25 12:01:33 · 1257 阅读 · 0 评论 -
Flutter--高德地图使用指南
1.在高德官网申请Key2.导入flutter包dependencies: amap_flutter_map: ^3.0.03.初始化官网的说明很混乱,经过实验。3.0.0版sdk后,初始化apikey这种操作不需要在原生代码中操作了,在你要创建地图时,应当采用如下做法:注意:privacyStatement该参数表示已经给用户看过相关协议,权限要求等,不写拿不到数据,如果要上架必须要在执行该代码前用明显弹窗提示,具体内容可参考重要: SDK合规使用方案 | 高德地图API/原创 2022-02-17 11:13:13 · 9451 阅读 · 8 评论 -
Flutter--中间打孔底部导航栏
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), drawer: Container( width: 100, color: Colors.red, ), body: SizedBox( he...原创 2022-02-10 16:46:53 · 1081 阅读 · 1 评论 -
Flutter--自定义内容选择器CupertinoPicker
Widget tempPicker(Function(int) onChanged) { int value = 30; List<int> list = []; for (int i = -20; i <= 120; i = i + 5) { list.add(i); } final FixedExtentScrollController scrollController = FixedExtentScrollController(.原创 2022-02-10 16:21:24 · 1708 阅读 · 0 评论 -
Flutter--拖拽组件(支持多组数据)
import 'package:flutter/material.dart';import 'package:flutter/rendering.dart';class DragGridView extends StatefulWidget { @override State<StatefulWidget> createState() => _DragGridState();}class _DragGridState extends State<DragG..原创 2022-01-07 16:56:19 · 2411 阅读 · 0 评论 -
Flutter--捕捉手势的弧度和角度
两个工具类import 'package:flutter/material.dart';class GestureAngleView extends StatelessWidget{ final double angel; final Function(double angel, bool end) onChanged; final List<Widget> Function(BuildContext context, Size size, double radi原创 2022-01-07 10:08:30 · 1314 阅读 · 0 评论 -
Flutter--画笔 CustomPainter
1.创建画板CustomPaint @override Widget build(BuildContext context) { return Scaffold( body: Center( child: SizedBox( width: 400, height: 400, child: CustomPaint(painter: TestPaint(),), ), ),.原创 2021-12-25 18:00:38 · 2716 阅读 · 0 评论 -
Flutter--自定义AppBar
class CustomAppBar extends StatefulWidget implements PreferredSizeWidget { final Widget child; CustomAppBar(this.child); @override State<StatefulWidget> createState() => _CustomAppBarState(); @override Size get preferredSize =>..原创 2021-11-26 11:39:19 · 2325 阅读 · 0 评论 -
Flutter--不同样式字符串拼接
Widget textSpan() { return Text.rich(TextSpan( children: [ TextSpan( text: "Home: " ), TextSpan( text: "https://flutterchina.club", style: TextStyle( col.原创 2021-10-30 09:33:58 · 3370 阅读 · 0 评论 -
Flutte-- 国际化l10n笔记
多语言插件l10nflutter_intl: enabled: true main_locale: "ko"main_locale 假如想复写引用的库中的某种多语言文件,这时候需要将该属性设置为你的目标类型,默认为英文,若果不同时设置英文,其他语言的文件也不会生效。...原创 2021-10-28 11:30:04 · 397 阅读 · 0 评论 -
Flutter--获取父组件约束大小
context可以获取当前组件的大小,但是有时候我们想要渲染子组件时需要依赖当前组件的尺寸,build第一次运行时渲染树还没生成,调用context.size会报错,此时就需要使用LayoutBuilder组件,它可以获取父组件的约束,用它包裹子组件,变相获得还未渲染的父组件尺寸。 @override Widget build(BuildContext context) { return UIContainer( width: double.infinity, h原创 2021-10-15 17:37:57 · 1685 阅读 · 0 评论 -
Flutter--自定义AppBar的actions中组件的大小
AppBar中指定了actions按钮的约束条件,必须通过UnconstrainedBox来 “去除” 父元素的限制。AppBar( title: Text(title), actions: <Widget>[ UnconstrainedBox( child: SizedBox( width: 20, height: 20, child: CircularProgressIndicator( s原创 2021-10-15 16:46:50 · 2221 阅读 · 0 评论 -
Flutter--Debug小技巧
打印渲染树1. 导入 import'package:flutter/rendering.dart';2. debugDumpRenderTree()统计应用启动时间$ flutter run --trace-startup --profile结果保存在 build/start_up_info.json原创 2021-10-15 11:34:41 · 411 阅读 · 0 评论 -
Flutter--根据context获取父Widget节点
class ContextRoute extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Context测试"), ), body: Container( child: Builder(builder: (context) { .原创 2021-10-15 10:41:30 · 1821 阅读 · 0 评论 -
Flutter--TextButton封装以及属性说明
import 'package:flutter/material.dart';class UIButton extends StatelessWidget { final Widget child; final VoidCallback onPressed; final Key key; final VoidCallback onLongPress; final Clip clipBehavior; final Color foregroundColor; final.原创 2021-10-12 11:49:37 · 561 阅读 · 0 评论 -
Flutter--毛玻璃组件封装UIBlurView
import 'dart:ui';import 'package:flutter/material.dart';class UIBlurView extends StatelessWidget { final Widget child; final BorderRadius borderRadius; final ImageFilter filter; UIBlurView(this.child, { this.borderRadius, this.filte..原创 2021-10-09 11:42:13 · 219 阅读 · 0 评论 -
Flutter--Text封装
import 'package:flutter/material.dart';class UIText extends StatelessWidget { final String text; final TextOverflow overflow; final TextAlign textAlign; final int maxLines; final double fontSize; final Color color; final FontWeight fon..原创 2021-10-09 11:40:30 · 296 阅读 · 0 评论 -
Flutter--TextButton简析以及分装
import 'package:flutter/material.dart';class UIButton extends StatelessWidget { final Widget child; final VoidCallback onPressed; final Key key; final VoidCallback onLongPress; final Clip clipBehavior; final Color foregroundColor; final.原创 2021-09-28 18:13:04 · 405 阅读 · 0 评论 -
Flutter--Container组件接口优化
记录一个思路,后续逐步完善class UIContainer extends Container { UIContainer({ Key key, Widget child, double width, double height, AlignmentGeometry alignment, Color backgroundColor, Color borderColor, double borderWidth, Bord.原创 2021-08-31 11:49:44 · 144 阅读 · 0 评论 -
Flutter待完美解决的问题
1.启动页iOS从原生启动页到flutter Ui启动过度期间有次白屏安卓是直接白屏启动,如何统一两个客户端的效果2.弹窗系统弹窗是Push一个弹窗页面进当前视图栈,当app逻辑复杂时非常混乱,同时安卓还会被返回按钮返回,难以限制。目前是在一个第三方组件的基础上修改的,之后打算做进一步封装和优化3.flutter使用频率较高的一些组件使用过于麻烦需要进一步封装,目前我的封装可以用但是不够完美...原创 2021-07-30 09:59:16 · 88 阅读 · 0 评论 -
Flutter等待异步内容
有时候需要弹出弹窗等待用户选择某条件后再执行后续代码,可以用Completer类。//事例 var c = Completer<bool>(); Dialogs.tipsCard(title, tip, failMsg: '', actions: [i18n.ok], callback: (index) => c.complete(true), dismissCallBack: () { if..原创 2021-07-28 09:09:06 · 1223 阅读 · 0 评论 -
Flutter 自定义Slider
enum SliderDirection { vertical, horizontal}class SliderBar extends StatelessWidget { final Size size; final Widget child; SliderBar({this.child, this.size = const Size(24, 24)}); @override Widget build(BuildContext context) { retu.原创 2021-06-18 18:17:04 · 1930 阅读 · 2 评论 -
Flutter TextField 取消默认高度
TextField( decoration: InputDecoration( //取消奇怪的高度 isCollapsed: true, //可以设置自己的 contentPadding: EdgeInsets.all(8), ), );原创 2021-06-18 18:12:54 · 1664 阅读 · 0 评论 -
Flutter使用字体图标以及使用后导致打包失败BUG说明
导入文件fonts: - family: iconfont # 引入图标的别名,最好使用全小写 fonts: - asset: lib/style/font/iconfont.ttf #文件路径Text使用Text("\ue8d1", style: TextStyle(fontFamily: 'iconfont', color: Colors.blue)),Icon使用Icon(IconData(0xe8b9, fontFamily:...原创 2021-03-10 10:27:19 · 409 阅读 · 0 评论 -
Flutter 自定义带加载状态的按钮--LoadingButton
import 'package:flutter/material.dart';enum LoadingState { init, loading, success, failed,}class LoadingButton extends StatefulWidget { final double indicatorSize; final Future<void> Function() onPressed; final EdgeInsetsGeometry.原创 2021-02-02 14:22:36 · 2085 阅读 · 0 评论 -
Flutter 系统拖条注释
class SliderBackground { static BoxDecoration gradient(List<Color> colors,) { return BoxDecoration( gradient: LinearGradient( colors: colors, ), //背景渐变 borderRadius: BorderRadius.circular(3.0), //3像素圆角 );.原创 2021-01-27 14:08:56 · 161 阅读 · 0 评论