Flutter 空安全的糖果罐

2401_84149875

于 2024-05-12 20:42:51 发布

阅读量1.1k

点赞数 26

分类专栏：程序员文章标签： flutter 安全

本文链接：https://blog.csdn.net/2401_84149875/article/details/138766618

版权

程序员专栏收录该内容

265 篇文章 1 订阅

订阅专栏

屏幕适配

Adaptation，用于屏幕适配的组件，你只需要设置设计稿的宽度，其他的尺寸直接按照设计稿填写即可。当然这种适配方式其实是不推荐的，正如作者所言。

用户使用更大的屏幕是为了接收更多的信息, 而不是看到更大的字

基于这个观点, 我个人建议使用文字流式, 图片宽高比, 控件弹性的方案来做

但是很多初学者对于这个原则很难把握, 而等比例放大比较容易理解, 所以我写了这个库

import ‘package:adaptation/adaptation.dart’;
MaterialApp(
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: ‘Flutter Demo Home Page’),
builder: (context, widget) {
return Adaptation(
child: widget,
designWidth: 375, // 你的设计稿宽度
);
},
);

资源文件生成

assets_generator，用于自动生成 assets 配置 (yaml) 以及 consts 的工具，支持单项目和多模块。

-h, --[no-]help 显示帮助信息
-p, --path Flutter 项目的根路径
(默认 “.”)
-f, --folder assets 文件夹的名字
(默认 “assets”)
-w, --[no-]watch 是否继续监听 assets 的变化
(默认开启)
-t, --type pubsepec.yaml 生成配置的类型
“d” 代表以文件夹方式生成 “- assets/images/”
“f” 代表以文件方式生成 “- assets/images/xxx.jpg”
(默认 “d”)
-s, --[no-]save 是否保存命令到本地
如果执行 “agen” 不带任何命令，将优先使用本地的命令进行执行
-o, --out const 类放置的位置
(默认放置在 “lib” 下面)
-r, --rule consts 的名字的命名规范
“lwu”(小写带下划线) : “assets_images_xxx_jpg”
“uwu”(大写带下划线) : “ASSETS_IMAGES_XXX_JPG”
“lcc”(小驼峰) : “assetsImagesXxxJpg”
(默认 “lwu”)
-c, --class const 类的名字
(默认 “Assets”)
–const-ignore 使用正则表达式忽略一些const(不是全部const都希望生成)

图片

ExtendedImage，集众多功能为一体的图片组件，包括以下主要功能:

缓存网络图片
加载状态(正在加载，完成，失败)
拖拽缩放图片
图片编辑(裁剪，旋转，翻转)
图片预览(跟微信掘金一样)
滑动退出效果(跟微信掘金一样)
设置圆角，边框
支持进度显示
图片预览上滑显示详情(跟图虫一样)
减少内存占用

列表扩展

ExtendedList，针对官方 Listview 和 GirdView 做的扩展组件，包括以下主要功能:

监听元素回收
监听 Viewport 中元素变化
为最后一个元素设置特殊布局
列表倒序特殊布局，类聊天列表

嵌套滚动视图扩展

ExtendedNestedScrollView，主要解决官方 NestedScrollView 存在的2个问题。

解决 NestedScrollView 的 Header 中不能处理多个 pinned 为 true 的元素的问题。github.com/flutter/flu…
解决 NestedScrollView 的 Body 中列表滚动会互相影响的问题。github.com/flutter/flu…

Sliver 扩展

ExtendedSliver，对 Sliver 组件的扩展，主要包括以下功能：

SliverPinnedPersistentHeader，跟官方的SliverPersistentHeader(pinned: true) 一样的效果, 不同的是你不需要去设置 minExtent 和 maxExtent。因为大部分场景下面，我们是无法提前知道 minExtent 和 maxExtent。
SliverPinnedToBoxAdapter，可以通过它轻松创建一个置顶的元素，当 child 没有 layout 之前，你没法知道 child 的实际大小，这将是非常有用的组件。
ExtendedSliverAppbar，你可以创建一个跟 SliverAppbar 一样效果的组件，而不用去关心 expandedHeight 。

TabBarView 扩展

ExtendedTabs，对 TabBarView 组件的扩展，主要包括以下功能：

解决多级 TabBarView 嵌套的时候，无法连贯切换的问题
垂直方向滚动
设置缓存页面数量
提供 CarouselIndicator 和 ColorTabIndicator

文本

ExtendedText，针对 Text 组件的扩展，主要包括以下功能：

方便快速生成特殊文本，将字符串转换成特定的 InlineSpan。
BackgroundTextSpan 自定文字背景，处理圆角或者中英文背景高度不一致的问题。
ExtendedWidgetSpan 支持选择和复制， github.com/flutter/flu… .
TextOverflowWidget 自定义文本溢出效果, github.com/flutter/flu… 。

输入框

ExtendedTextField，针对 TextField 组件的扩展，主要包括以下功能：

方便快速生成特殊文本，原理很简单，就是把字符串转换成特定的 InlineSpan。
ExtendedWidgetSpan 支持输入框中插入任何 Widget，比如表情图片。
ExtendedWidgetSpan 支持选择和复制， github.com/flutter/flu… 。

路由注解

ff_annotation_route，通过注解生成路由映射，统一处理路由，支持 Navigator 1.0 和 Navigator 2.0。

激活工具 pub global activate ff_annotation_route
增加引用

dependencies:

在子模块中引入

ff_annotation_route_core: any

在根项目引入，包括一些帮助类以及 ff_annotation_route_core

ff_annotation_route_library: any

添加注释

工具会自动处理带参数的构造，不需要做特殊处理。唯一需要注意的是，你需要设置 argumentImports 来为 class/enum 的参数提供 import 地址。现在你也可以使用 @FFArgumentImport() 注释来替代.

@FFArgumentImport(‘hide TestMode2’)
import ‘package:example1/src/model/test_model.dart’;
@FFArgumentImport()
import ‘package:example1/src/model/test_model1.dart’ hide TestMode3;
import ‘package:ff_annotation_route_library/ff_annotation_route_library.dart’;

@FFRoute(
name: ‘flutterCandies://testPageE’,
routeName: ‘testPageE’,
description: ‘Show how to push new page with arguments(class)’,
// argumentImports are still work for some cases which you can’t use @FFArgumentImport()
// argumentImports: [
// ‘import ‘package:example1/src/model/test_model.dart’;’,
// ‘import ‘package:example1/src/model/test_model1.dart’;’,
// ],
exts: <String, dynamic>{
‘group’: ‘Complex’,
‘order’: 1,
},
)
class TestPageE extends StatelessWidget {
const TestPageE({
this.testMode = const TestMode(
id: 2,
isTest: false,
),
this.testMode1,
});
factory TestPageE.deafult() => TestPageE(
testMode: TestMode.deafult(),
);

factory TestPageE.required({@required TestMode testMode}) => TestPageE(
testMode: testMode,
);

final TestMode testMode;
final TestMode1 testMode1;
}

执行命令生成路由，ff_route <command> [arguments]，全部命令如下:

-h, --[no-]help 帮助信息。

-p, --path 执行命令的目录，默认当前目录。

-o, --output route 和 helper 文件的输出目录路径，路径相对于主项目的 lib 文件夹。

-n, --name 路由常量类的名称，默认为 Routes。

-g, --git 扫描 git 引用的 package，你需要指定 package 的名字，多个用 , 分开
–routes-file-output routes 文件的输出目录路径，路径相对于主项目的lib文件夹
–const-ignore 使用正则表达式忽略一些const(不是全部const都希望生成)
–[no-]route-constants 是否在根项目中的 xxx_route.dart 生成全部路由的静态常量
–[no-]package 这个是否是一个 package
–[no-]supper-arguments 是否生成路由参数帮助类

-s, --[no-]save 是否保存命令到本地。如果保存了，下一次就只需要执行 ff_route 就可以了。
–[no-]null-safety 是否支持空安全，默认 true

设置 MaterialApp 的 onGenerateRoute 回调

import ‘package:ff_annotation_route_library/ff_annotation_route_library.dart’;
import ‘package:flutter/material.dart’;
import ‘example_route.dart’;
import ‘example_routes.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘ff_annotation_route demo’,
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
initialRoute: Routes.fluttercandiesMainpage,
onGenerateRoute: (RouteSettings settings) {
return onGenerateRoute(
settings: settings,
getRouteSettings: getRouteSettings,
routeSettingsWrapper: (FFRouteSettings ffRouteSettings) {
if (ffRouteSettings.name == Routes.fluttercandiesMainpage ||
ffRouteSettings.name ==
Routes.fluttercandiesDemogrouppage.name) {
return ffRouteSettings;
}
return ffRouteSettings.copyWith(
widget: CommonWidget(
child: ffRouteSettings.widget,
title: ffRouteSettings.routeName,
));
},
);
},
);
}
}

打开一个页面

Navigator.pushNamed(
context,
Routes.flutterCandiesTestPageE.name,
arguments: Routes.flutterCandiesTestPageE.requiredC(
testMode: const TestMode(
id: 100,
isTest: true,
),
),
);

可拖拽容器

DraggableContainer，可拖拽容器，支持元素移动动画效果，主要包括以下功能：

可拖动子元素
可删除子元素
可固定子元素
元素移动动画效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

图片编辑

ImageEditor，强大的原生图片处理库，主要包括以下功能：

裁剪
翻转
旋转
缩放
色彩矩阵变化
添加文字
混合图片
添加任意图形

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Dialog

SmartDialog，一种更优雅的Dialog 解决方案，主要解决了系统自带的Dialog的一些问题：

必须传 BuildContext。
无法穿透暗色背景，点击 Dialog 后面的页面。
解决系统自带 Dialog 写成的 Loading 弹窗，在网络请求和跳转页面的情况，会存在路由混乱的情况。

smartDialog

资源选择器

AssetPicker，对标微信的多选资源选择器，99%接近于原生微信的操作，主要包括以下功能：

♻️ 支持基于代理重载的全量自定义
💚 99% 的微信风格
📷 图片资源支持
🔬HEIC 格式图片支持
🎥 视频资源支持
🎶 音频资源支持
1️⃣ 单资源模式
💱 国际化支持
➕ 特殊 widget 构建支持（前置/后置）
🗂 自定义路径排序支持
📝 自定义文本构建支持
⏳ 自定义筛选规则支持（ photo_manager ）
🎏 完整的自定义主题
💻 支持 MacOS

相机资源选择器

CameraPicker，对标微信的视频资源选择器，99%接近于原生微信的操作，主要包括以下功能：

🔐 支持健全的空安全
💚 99% 的微信风格
📷 支持拍照
☀️ 支持设置曝光参数
🔍️ 支持捏合缩放
🎥 支持录像
⏱ 支持限制录像时间
🔍 支持录像时缩放
🖾 支持自定义前景 widget 构建

JsonToDart

JsonToDart，强大的 JsonToDart 工具，主要包括以下功能：

空安全
编辑类名，属性名
去重复类
Merge 类属性
数据数组保护
属性命名规范化，只读，排序
国际化
全平台
智能可空

平台	描述	地址
Windows	Flutter for Windows	gitee.com/zmtzawqlp/J…
Macos	Flutter for Macos	gitee.com/zmtzawqlp/J…
Web	Flutter for Web	zmtzawqlp.gitee.io/jsontodart/
微软商店	功能未同步，以后会替换成 Flutter for UWP	www.microsoft.com/store/apps/…