Flutter功能扩展插件flutter_plus的使用

Flutter功能扩展插件flutter_plus的使用

1. 简介

FlutterPlus 是一个开源库，旨在使Flutter开发更快、更简单和更直观。通过这个库，你可以用更少的代码创建复杂的组件，简化导航、弹出框、对话框等操作，并提供了一系列实用的扩展方法。

2. 安装

首先，在项目的 pubspec.yaml 文件中添加 flutter_plus 依赖：

dependencies:
  flutter_plus: any

然后，在Dart文件中导入库：

import 'package:flutter_plus/flutter_plus.dart';

注意事项：

  • 如果你希望避免版本更新带来的问题，建议固定版本号。
  • 如果你愿意接受库的进化并愿意在必要时进行一些调整，可以不固定版本号。

3. 示例Demo

以下是一个完整的示例项目，展示了如何使用 flutter_plus 库中的各种功能。

3.1 主程序入口 (main.dart)
import 'package:flutter/material.dart';
import 'package:flutter_plus/flutter_plus.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlutterAppPlus(
      title: 'Flutter Plus Example',
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Plus Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // ContainerPlus 示例
            ContainerPlus(
              width: 200,
              height: 200,
              radius: RadiusPlus.all(20),
              color: Colors.yellow,
              shadows: [
                ShadowPlus(
                  color: Colors.red,
                  moveDown: -10,
                  moveRight: -10,
                  blur: 5,
                  spread: 1,
                  opacity: 0.2,
                ),
                ShadowPlus(
                  color: Colors.blue,
                  moveDown: 10,
                  moveRight: 10,
                  blur: 10,
                  spread: 5,
                  opacity: 0.5,
                ),
              ],
              border: BorderPlus(
                color: Colors.black,
                width: 2,
              ),
              child: TextPlus(
                'ContainerPlus Example',
                isCenter: true,
                color: Colors.white,
              ),
            ),
            SizedBox(height: 20),

            // ButtonPlus 示例
            ButtonPlus(
              width: 200,
              height: 60,
              radius: RadiusPlus.all(12),
              color: Colors.blue,
              enabled: true,
              splashColor: Colors.red,
              highlightColor: Colors.yellow,
              focusColor: Colors.green,
              hoverColor: Colors.pink,
              child: TextPlus(
                'ButtonPlus Example',
                color: Colors.white,
              ),
              onPressed: () {
                print('ButtonPlus pressed');
              },
            ),
            SizedBox(height: 20),

            // TextFieldPlus 示例
            TextFieldPlus(
              padding: EdgeInsets.symmetric(horizontal: 8),
              height: 60,
              backgroundColor: Colors.black12,
              cursorColor: Colors.red,
              textInputType: TextInputType.emailAddress,
              placeholder: TextPlus(
                'E-mail',
                color: Colors.black38,
              ),
              prefixWidget: Icon(
                Icons.alternate_email,
                color: Colors.redAccent,
              ),
              suffixWidget: Icon(
                Icons.email,
                color: Colors.redAccent,
              ),
            ),
            SizedBox(height: 20),

            // TextPlus 示例
            TextPlus(
              'TextPlus Example',
              padding: EdgeInsets.all(16),
              backgroundColor: Colors.red,
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.w700,
              letterSpacing: 2,
              wordSpacing: 20,
              maxLines: 1,
              textOverflow: TextOverflow.ellipsis,
            ),
            SizedBox(height: 20),

            // RichTextPlus 示例
            RichTextPlus(
              texts: [
                TextPlus(
                  'Flutter ',
                  color: Colors.black,
                  fontWeight: FontWeight.normal,
                  fontSize: 30,
                ),
                TextPlus(
                  'Plus ',
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                  fontSize: 30,
                ),
                TextPlus(
                  '!',
                  color: Colors.blue,
                  fontWeight: FontWeight.bold,
                  fontSize: 30,
                ),
                TextPlus(
                  '!',
                  color: Colors.green,
                  fontWeight: FontWeight.bold,
                  fontSize: 30,
                ),
                TextPlus(
                  '!',
                  color: Colors.orange,
                  fontWeight: FontWeight.bold,
                  fontSize: 30,
                ),
              ],
            ),
            SizedBox(height: 20),

            // NavigatorPlus 示例
            ButtonPlus(
              width: 200,
              height: 60,
              color: Colors.green,
              child: TextPlus(
                'Navigate to Next Screen',
                color: Colors.white,
              ),
              onPressed: () {
                navigatorPlus.show(NextScreen());
              },
            ),
            SizedBox(height: 20),

            // BottomSheetPlus 示例
            ButtonPlus(
              width: 200,
              height: 60,
              color: Colors.orange,
              child: TextPlus(
                'Show Bottom Sheet',
                color: Colors.white,
              ),
              onPressed: () {
                bottomSheetPlus.show(
                  child: CustomBottomSheet(),
                  radius: RadiusPlus.top(20),
                  heightPercentScreen: 0.3,
                );
              },
            ),
            SizedBox(height: 20),

            // DialogPlus 示例
            ButtonPlus(
              width: 200,
              height: 60,
              color: Colors.purple,
              child: TextPlus(
                'Show Dialog',
                color: Colors.white,
              ),
              onPressed: () {
                dialogPlus.showDefault(
                  title: 'FlutterPlus',
                  message: 'This is a custom dialog example.',
                  buttonOneText: 'Close',
                  buttonOneColor: Colors.red,
                  buttonOneCallback: () {
                    navigatorPlus.back();
                  },
                  buttonTwoText: 'Open',
                  buttonTwoCallback: () async {
                    // 可以在这里执行其他操作
                  },
                );
              },
            ),
            SizedBox(height: 20),

            // SnackBarPlus 示例
            ButtonPlus(
              width: 200,
              height: 60,
              color: Colors.teal,
              child: TextPlus(
                'Show SnackBar',
                color: Colors.white,
              ),
              onPressed: () {
                snackBarPlus.showText(
                  'This is a SnackBar message!',
                  textColor: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  backgroundColor: Colors.green,
                );
              },
            ),
            SizedBox(height: 20),

            // LocalStoragePlus 示例
            ButtonPlus(
              width: 200,
              height: 60,
              color: Colors.brown,
              child: TextPlus(
                'Save to Local Storage',
                color: Colors.white,
              ),
              onPressed: () async {
                await localStoragePlus.write('key', 'value');
                String value = await localStoragePlus.read('key');
                print('Saved value: $value');
              },
            ),
            SizedBox(height: 20),

            // SkeletonPlus 示例
            ButtonPlus(
              width: 200,
              height: 60,
              color: Colors.grey,
              child: TextPlus(
                'Toggle Skeleton Loading',
                color: Colors.white,
              ),
              onPressed: () {
                setState(() {
                  isLoading = !isLoading;
                });
              },
            ),
            SizedBox(height: 20),

            // 使用SkeletonPlus的ContainerPlus
            ContainerPlus(
              width: 200,
              height: 200,
              color: Colors.black,
              skeleton: SkeletonPlus.automatic(enabled: isLoading),
              child: TextPlus(
                'Loading...',
                isCenter: true,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 下一个页面的示例
class NextScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Screen'),
      ),
      body: Center(
        child: ButtonPlus(
          width: 200,
          height: 60,
          color: Colors.red,
          child: TextPlus(
            'Go Back',
            color: Colors.white,
          ),
          onPressed: () {
            navigatorPlus.back();
          },
        ),
      ),
    );
  }
}

// 自定义BottomSheet的示例
class CustomBottomSheet extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: TextPlus(
          'This is a custom BottomSheet',
          color: Colors.black,
          fontSize: 20,
        ),
      ),
    );
  }
}

4. 关键功能介绍

4.1 ContainerPlus

ContainerPlus 是 Container 的增强版，提供了更多的自定义选项，如阴影、渐变、内阴影等。

ContainerPlus(
  width: 200,
  height: 200,
  radius: RadiusPlus.all(20),
  color: Colors.yellow,
  shadows: [
    ShadowPlus(
      color: Colors.red,
      moveDown: -10,
      moveRight: -10,
      blur: 5,
      spread: 1,
      opacity: 0.2,
    ),
    ShadowPlus(
      color: Colors.blue,
      moveDown: 10,
      moveRight: 10,
      blur: 10,
      spread: 5,
      opacity: 0.5,
    ),
  ],
  border: BorderPlus(
    color: Colors.black,
    width: 2,
  ),
  child: TextPlus(
    'ContainerPlus Example',
    isCenter: true,
    color: Colors.white,
  ),
);
4.2 ButtonPlus

ButtonPlus 是 Button 的增强版，支持更多的样式和交互效果。

ButtonPlus(
  width: 200,
  height: 60,
  radius: RadiusPlus.all(12),
  color: Colors.blue,
  enabled: true,
  splashColor: Colors.red,
  highlightColor: Colors.yellow,
  focusColor: Colors.green,
  hoverColor: Colors.pink,
  child: TextPlus(
    'ButtonPlus Example',
    color: Colors.white,
  ),
  onPressed: () {
    print('ButtonPlus pressed');
  },
);
4.3 TextFieldPlus

TextFieldPlus 是 TextField 的增强版，支持更多的输入格式和样式。

TextFieldPlus(
  padding: EdgeInsets.symmetric(horizontal: 8),
  height: 60,
  backgroundColor: Colors.black12,
  cursorColor: Colors.red,
  textInputType: TextInputType.emailAddress,
  placeholder: TextPlus(
    'E-mail',
    color: Colors.black38,
  ),
  prefixWidget: Icon(
    Icons.alternate_email,
    color: Colors.redAccent,
  ),
  suffixWidget: Icon(
    Icons.email,
    color: Colors.redAccent,
  ),
);
4.4 TextPlus

TextPlus 是 Text 的增强版，支持更多的文本样式和效果。

TextPlus(
  'TextPlus Example',
  padding: EdgeInsets.all(16),
  backgroundColor: Colors.red,
  color: Colors.white,
  fontSize: 20,
  fontWeight: FontWeight.w700,
  letterSpacing: 2,
  wordSpacing: 20,
  maxLines: 1,
  textOverflow: TextOverflow.ellipsis,
);
4.5 RichTextPlus

RichTextPlus 是 RichText 的增强版，支持多个不同样式的文本片段组合。

RichTextPlus(
  texts: [
    TextPlus(
      'Flutter ',
      color: Colors.black,
      fontWeight: FontWeight.normal,
      fontSize: 30,
    ),
    TextPlus(
      'Plus ',
      color: Colors.red,
      fontWeight: FontWeight.bold,
      fontSize: 30,
    ),
    TextPlus(
      '!',
      color: Colors.blue,
      fontWeight: FontWeight.bold,
      fontSize: 30,
    ),
    TextPlus(
      '!',
      color: Colors.green,
      fontWeight: FontWeight.bold,
      fontSize: 30,
    ),
    TextPlus(
      '!',
      color: Colors.orange,
      fontWeight: FontWeight.bold,
      fontSize: 30,
    ),
  ],
);
4.6 NavigatorPlus

NavigatorPlus 允许你在任何地方进行页面导航，而不需要传递 context。

navigatorPlus.show(NextScreen());
4.7 BottomSheetPlus

BottomSheetPlus 允许你在任何地方显示底部弹出框，而不需要传递 context。

bottomSheetPlus.show(
  child: CustomBottomSheet(),
  radius: RadiusPlus.top(20),
  heightPercentScreen: 0.3,
);
4.8 DialogPlus

DialogPlus 允许你在任何地方显示对话框，而不需要传递 context。

dialogPlus.showDefault(
  title: 'FlutterPlus',
  message: 'This is a custom dialog example.',
  buttonOneText: 'Close',
  buttonOneColor: Colors.red,
  buttonOneCallback: () {
    navigatorPlus.back();
  },
  buttonTwoText: 'Open',
  buttonTwoCallback: () async {
    // 可以在这里执行其他操作
  },
);
4.9 SnackBarPlus

SnackBarPlus 允许你在任何地方显示 SnackBar，而不需要传递 context。

snackBarPlus.showText(
  'This is a SnackBar message!',
  textColor: Colors.white,
  fontSize: 18,
  fontWeight: FontWeight.bold,
  backgroundColor: Colors.green,
);
4.10 LocalStoragePlus

LocalStoragePlus 提供了本地存储的功能，可以在任何地方保存和读取数据。

await localStoragePlus.write('key', 'value');
String value = await localStoragePlus.read('key');
print('Saved value: $value');
4.11 SkeletonPlus

SkeletonPlus 提供了加载骨架屏的功能，可以在组件加载时显示占位符。

ContainerPlus(
  width: 200,
  height: 200,
  color: Colors.black,
  skeleton: SkeletonPlus.automatic(enabled: isLoading),
  child: TextPlus(
    'Loading...',
    isCenter: true,
    color: Colors.white,
  ),
);

5. 扩展方法 (Extensions)

flutter_plus 还提供了一些常用的扩展方法，帮助你更方便地处理字符串、日期、数字等类型的数据。

5.1 StringExtensionPlus
"11/08/1992".toDate(format: "dd/MM/yyyy"); // 转换为 DateTime
"flutter plus".capitalizeFirstWord; // 首字母大写
"00000000000".setMask(mask: "###.###.###-##"); // 添加掩码
"fluttér plús".cleanDiacritics; // 去除重音符号
"flutter plus".isEmail; // 检查是否为有效的电子邮件
5.2 DateExtensionPlus
DateTime.now().format("dd/MM/yyyy"); // 格式化日期
DateTime.now().isToday; // 是否为今天
DateTime.now().monthName; // 获取月份名称
5.3 NumExtensionPlus
13512.98.toCurrency(); // 格式化为货币
13512.98.toPrecision(2); // 设置小数点后两位
5.4 FileExtensionPlus
File customFile = File(path);
String base64 = customFile.base64Sync; // 同步转换为 Base64
5.5 DurationExtensionPlus
Duration customDuration = Duration(hours: 10, minutes: 4, seconds: 55);
print(customDuration.formattedDuration); // 10:04:55

更多关于Flutter功能扩展插件flutter_plus的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter功能扩展插件flutter_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter功能扩展插件flutter_plus的使用，这里提供一个基本的示例代码来帮助你理解如何在Flutter项目中集成和使用该插件。假设flutter_plus插件提供了一些额外的UI组件和功能（请注意，由于flutter_plus并非一个真实存在的标准Flutter插件，以下代码是基于假设的功能编写的，你需要根据实际情况调整）。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_plus依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_plus: ^x.y.z  # 替换为实际版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入flutter_plus：

import 'package:flutter_plus/flutter_plus.dart';

3. 使用插件功能

假设flutter_plus提供了一个自定义的按钮组件PlusButton，并且有一个全局的加载指示器PlusLoadingIndicator。以下是如何在你的Flutter应用中使用这些功能的示例。

自定义按钮示例

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Plus Example'),
        ),
        body: Center(
          child: PlusButtonExample(),
        ),
      ),
    );
  }
}

class PlusButtonExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PlusButton(
      onPressed: () {
        // 处理按钮点击事件
        print('PlusButton clicked!');
      },
      child: Text('Click Me!'),
      // 假设PlusButton有一些自定义属性
      color: Colors.blue,
      elevation: 10.0,
    );
  }
}

全局加载指示器示例

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

class LoadingScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 显示全局加载指示器
    PlusLoadingIndicator.show();

    // 模拟一个异步操作
    Future.delayed(Duration(seconds: 2), () {
      // 隐藏全局加载指示器
      PlusLoadingIndicator.hide();

      // 导航到主屏幕或其他页面
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => MyApp()),
      );
    });

    // 加载屏幕内容
    return Scaffold(
      body: Center(
        child: Text('Loading...'),
      ),
    );
  }
}

void main() {
  runApp(LoadingScreen());
}

注意事项

  • 由于flutter_plus是一个假设的插件，实际使用时需要查阅该插件的官方文档来了解其提供的具体功能和API。
  • 插件的功能可能会随着版本的更新而变化，因此建议定期查看插件的更新日志和文档。
  • 在使用第三方插件时，务必确保插件的兼容性和安全性。

希望这个示例能帮助你理解如何在Flutter项目中集成和使用flutter_plus插件。如果你有任何其他问题，欢迎继续提问！

回到顶部