Flutter功能扩展插件pro_plus的使用

概述

这个Flutter插件由Bilal Murtaza和GenZBit创建，提供了丰富的扩展和实用工具，以简化Flutter开发。通过pro_plus，开发者可以轻松地增强小部件、字符串、列表、日期和颜色，而无需编写大量冗余代码。该插件旨在通过减少样板代码并启用强大的功能，帮助开发者提高生产力。

这个插件将使生活更简单，提高代码速度，并允许你专注于构建令人惊叹的应用程序。无需编写冗余代码——只需使用扩展，如.paddingAll(16)、.fade()、.isToday等即可！

功能

• 小部件扩展：轻松添加填充、对齐、手势、可见性、动画和触摸控制。
• 字符串实用工具：格式化字符串、验证输入（邮箱、电话、密码）和处理大小写。
• 日期时间扩展：轻松执行日期检查、操作和格式化。
• ListView和GridView实用工具：直接从数据生成动态列表和网格。
• 颜色增强：无缝加深和变浅颜色。
• MediaQuery和BuildContext实用工具：即时访问屏幕尺寸、填充、方向和主题模式。
• Future和Stream扩展：简化异步数据处理，带有小部件和回退机制。
• 其他实用工具：扩展可空类型并添加回退机制。

安装

在你的pubspec.yaml文件中添加包：

dependencies:
  pro_plus: latest

然后运行命令：

flutter pub get

快速开始

以下是pro_plus如何简化你的代码：

使用前

Padding(
  padding: EdgeInsets.all(16),
  child: Text("Hello, World!"),
);

使用后

Text("Hello, World!").paddingAll(16);

就是这么简单！

扩展和使用

小部件扩展 (widget_extensions.dart)

添加填充

Text("Padded Text").paddingAll(16);
Text("Symmetric Padding").paddingSymmetric(vertical: 10, horizontal: 20);
Text("Custom Padding").paddingOnly(left: 10, top: 5);

对齐小部件

Text("Aligned").align(Alignment.topRight);
Text("Centered").center();

手势处理

Text("Tap Me").onSingleTap(() => print("Tapped"));
Text("Double Tap").onDoubleTap(() => print("Double Tapped"));

动画

Text("Fade In").fade(visible: true, duration: Duration(seconds: 1));
Text("Slide In").slide(visible: true, begin: Offset(0, 1));

触摸控制

Text("Disabled Touch").touchDisabled();
Text("With Feedback").touchDisabledWithOpacity(disabledOpacity: 0.5);

字符串扩展

空值和空字符串检查

String? value = "Hello";
print(value.isNotNullAndNotEmpty); // true
print(value.isNullOrEmpty); // false

格式化

String number = "123.456";
print(number.formatDecimal(decimalPlaces: 2)); // "123.46"

十六进制到颜色转换

String hex = "#FF5733";
Color color = hex.toColor();
print(color); // Color(0xffff5733)

验证

String email = "example@gmail.com";
print(email.isValidEmail); // true

String phone = "+1234567890";
print(phone.isValidPhoneNumber); // true

日期时间扩展

检查日期属性

final now = DateTime.now();
print(now.isToday); // true
print(now.isWeekend); // true or false

操作日期

final now = DateTime.now();
print(now.addMinutes(15)); // Adds 15 minutes
print(now.subtractHours(2)); // Subtracts 2 hours

格式化日期

final now = DateTime.now();
print(now.format(pattern: "dd-MM-yyyy")); // "28-12-2024"

列表扩展

创建ListView

final items = ["Item 1", "Item 2"];
items.toListView(
  itemBuilder: (context, item, index) => ListTile(title: Text(item)),
);

创建GridView

items.toGridView(
  itemBuilder: (context, item, index) => Card(child: Center(child: Text(item))),
);

数据操作

final grouped = items.groupBy((item) => item[0]);
print(grouped); // 输出: {I: [Item 1, Item 2]}

颜色扩展

深化和浅化颜色

final darkened = Colors.blue.darken(0.2);
print(darkened); // Darker shade of blue

final lightened = Colors.blue.lighten(0.2);
print(lightened); // Lighter shade of blue

BuildContext扩展

屏幕尺寸

print("Width: ${context.width}, Height: ${context.height}");

安全区域填充

print("Top Padding: ${context.topPadding}, Bottom Padding: ${context.bottomPadding}");

方向和主题

print(context.isPortrait ? "Portrait Mode" : "Landscape Mode");
print(context.isDarkMode ? "Dark Mode" : "Light Mode");

其他扩展

FutureBuilder实用工具

final future = Future.delayed(Duration(seconds: 2), () => "Hello, World!");
future.toWidget(
  onSuccess: (context, data) => Text(data),
  onLoading: (context) => CircularProgressIndicator(),
);

Stream实用工具

final stream = Stream.fromIterable([1, 2, 3]).delay(Duration(seconds: 1));
stream.listen((event) => print(event)); // 发出带延迟的值

可空类型实用工具

String? nullableValue;
print(nullableValue.orDefault("Default Value")); // "Default Value"

完整示例

以下是一个完整的示例，展示了多个扩展的使用：

import 'package:flutter/material.dart';
import 'package:pro_plus/pro_plus.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(title: Text('Pro Plus')),
      body: Column(
        children: [
          Text("Hello, Extensions!").paddingAll(16).center(),
          ["Item 1", "Item 2"].toListView(
            itemBuilder: (context, item, index) => ListTile(title: Text(item)),
          ),
          Text(DateTime.now().format(pattern: 'HH:mm:ss')).paddingAll(16).center().withBackgroundColor(Colors.yellow).withBackgroundGradient([Colors.yellow, Colors.red]),
          Text("with Background Color").paddingAll(16).center().withBackgroundColor(Colors.yellow).withBackgroundGradient([Colors.yellow, Colors.red]),
          Text("with Background Gradient").paddingAll(16).center().withBackgroundGradient([Colors.yellow, Colors.red]),
          Text("with Background Gradient").paddingAll(16).center().withGlossyEffect(overlayColor: Colors.green, glossFactor: 0.5),
          Icon(Icons.star, size: 50).withTooltip('I am tool tip ').withBackgroundColor(Colors.green).paddingOnly(bottom: 10).align(Alignment.centerLeft),
          Text("Press Me").withColor(Colors.white).asColoredButton(backgroundColor: Colors.green).onSingleTap(() => debugPrint('on Tap Pressed')),
          Divider(),
          Text('List View').center(),
          Divider(),
          Expanded(
            child: List.generate(10, (i) => 'Item $i').toListView(
              itemBuilder: (context, item, index) => ListTile(title: Text(item)),
            ),
          ),
          Divider(),
          Text('Grid View').center(),
          Divider(),
          Expanded(
            child: List.generate(10, (i) => 'Item $i').toGridView(
              itemBuilder: (context, item, index) => ListTile(title: Text(item)),
              crossAxisCount: 4,
            ),
          ),
        ],
      ),
    ),
  ));
}