Flutter扩展功能插件extended的使用

简介

Extended 是一组基于 Flutter 的 Material 和 Cupertino 小部件扩展的功能包。它通过添加常用的属性（如颜色、边框、背景等）来增强现有的小部件功能。类似于 HTML 和 CSS 的结合，Extended 让每个小部件都具备更多的自定义能力。

主要特性：

• 扩展属性：支持颜色、边框、背景、内边距、外边距等通用属性。
• 额外功能：提供了打开对话框、下载文件、缓存图片等功能。
• 灵活命名：扩展的小部件以 Extended 开头，便于区分。

使用指南

1. 添加依赖

在 pubspec.yaml 文件中添加 extended 包：

dependencies:
  extended: ^版本号

然后运行以下命令安装依赖：

flutter pub get

2. 注册全局导航键

为了使用 alert、confirm 等函数，需要注册一个全局导航键：

GlobalKey<NavigatorState> globalNavigatorKey = GlobalKey();

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    ExtendedService.instance.navigatorKey = globalNavigatorKey;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: globalNavigatorKey,
      home: const MyHomePage(),
    );
  }
}

扩展小部件示例

2.1 ExtendedRow

ExtendedRow 支持弹性布局，并可设置点击事件、边距、背景色等。

ExtendedRow(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  margin: const EdgeInsets.all(16),
  padding: const EdgeInsets.all(16),
  backgroundColor: Colors.black,
  borderRadius: 16,
  borderWidth: 5.5,
  borderColor: Colors.blueGrey,
  children: const [RedBox(), GreenBox(), BlueBox()],
  onTap: () => alert(context, 'onTap', 'tapped'),
  onDoubleTap: () => alert(context, 'onDoubleTap', 'double tapped'),
  onLongPress: () => alert(context, 'onLongPress', 'long press'),
),

2.2 ExtendedColumn

ExtendedColumn 类似于 Column，但增加了许多扩展属性。

ExtendedColumn(
  mainAxisAlignment: MainAxisAlignment.start,
  margin: const EdgeInsets.all(16),
  padding: const EdgeInsets.all(16),
  backgroundColor: Colors.black,
  borderRadius: 16,
  borderWidth: 5.5,
  borderColor: Colors.blueGrey,
  children: const [
    RedBox(),
    BlueBox(),
    YellowBox(),
  ],
  flexes: const [1, 1, 1],
  onTap: () => alert(context, 'onTap', 'tapped'),
  onDoubleTap: () => alert(context, 'onDoubleTap', 'double tapped'),
  onLongPress: () => alert(context, 'onLongPress', 'long press'),
),

2.3 ExtendedListTile

ExtendedListTile 是 ListTile 的增强版，支持更灵活的布局和对齐方式。

ExtendedListTile(
  padding: const EdgeInsets.symmetric(horizontal: sm, vertical: xxs),
  leading: Image(...),
  title: Text('...'),
  subtitle: ExtendedColumn(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [...],
  ),
  onTap: () => {},
),

对齐效果：

ExtendedListTile(
  height: 34,
  leading: UserProfilePhoto(uid: p.uid),
  title: Text(p.title),
  titleMainAxisAlignment: MainAxisAlignment.end,
  titleCrossAxisAlignment: CrossAxisAlignment.end,
),

2.4 TipBox

TipBox 是 ExtendedListTile 的变种，用于显示提示信息。

TipBox(
  onTap: service.openProfile,
  margin: EdgeInsets.only(top: 16),
  padding: EdgeInsets.all(16),
  spacing: 16,
  leading: FaDuotoneIcon(
    FontAwesomeIcons.duotoneIdBadge,
    primaryColor: grey,
    secondaryColor: light,
    size: 26,
  ),
  title: Text(
    'PROFILE STATUS',
    style: TextStyle(
      color: Colors.grey[700],
      fontWeight: FontWeight.bold,
    ),
  ),
  subtitle: Text(
    'Incomplete',
    style: TextStyle(
      color: Colors.orange[600],
      fontWeight: FontWeight.bold,
    ),
  ),
  trailingText: 'Update profile',
),

2.5 GradientCard

GradientCard 提供渐变背景并支持多种配置。

GradientCard(
  child: ,
  title: 'This is the title',
  titleWidthFactor: 1,
  titleMaxLines: 2,
  onTap: () => alert(context, 'Gradient Card', "Card Tapped!"),
  gradientColors: const [Colors.grey, Colors.transparent],
  overlays: const [
    Positioned(
      child: Icon(Icons.open_in_browser, color: Colors.blueGrey),
      top: 10,
      left: 10,
    ),
    Positioned(
      child: Icon(Icons.open_in_new_sharp, color: Colors.redAccent),
      top: 10,
      right: 10,
    ),
  ],
);

功能示例

3.1 下载文件

download() 和 downloadContent() 可用于从网络下载文件或内容。

try {
  final file = await download('https://jsonplaceholder.typicode.com/posts/1');
  print(file);
  final content = await downloadContent('https://jsonplaceholder.typicode.com/posts/1');
  print(const Utf8Decoder(allowMalformed: true).convert(content));
} catch (e) {
  error(e);
}