Flutter实用工具集插件core

Flutter实用工具集插件core_utils的使用

插件简介

core_utils 是一个包含许多有用的实用函数和小部件的Flutter插件，可以帮助开发者更方便地处理常见的开发任务。以下是该插件的一些主要功能和示例。

流行的工具 🔥

响应式小部件：根据移动设备、平板电脑和桌面视图重新构建。

ResponsiveView(
    mobile: YOUR_WIDGET, 
    tablet: YOUR_WIDGET, 
    desktop: YOUR_WIDGET
);

快捷方式：用于获取屏幕高度或宽度的分数。

double heightFrac(BuildContext context, double fraction);
double widthFrac(BuildContext context, double fraction);

数字格式化：

String largeNumberFormatter(int number); // 将大数字转换为带有字母的小表示形式
String numberPostfix(int number); // 为数字添加后缀

示例GIF 📸

由于内容中提供了图片链接，但无法直接显示，请参考插件文档中的示例GIF来更好地理解其功能。

函数：数字 📜

检查整数是否为复数：

bool isPlural(int number); // 示例：13 -> true

将大数字转换为带有字母的小表示形式：

String largeNumberFormatter(
    int number, {
    String billionLetter = "b",
    String millionLetter = "m",
    String thousandLetter = "k",
});
// 示例：1,812,398 -> "1.8m"

为数字添加后缀：

String numberPostfix(int number); // 示例：4 -> "th", 3 -> "rd"

函数：尺寸 📜

屏幕高度的分数（直到某个点）：

double heightBreakpointFrac(BuildContext context, double fraction, double lockPoint);
// 示例：如果设置fraction为1/4，则返回1/4 * 屏幕高度，直到lockPoint

屏幕宽度的分数（直到某个点）：

double widthBreakpointFrac(BuildContext context, double fraction, double lockPoint);
// 示例：如果设置fraction为1/4，则返回1/4 * 屏幕宽度，直到lockPoint

屏幕高度的分数：

double heightFrac(BuildContext context, double fraction);
// 示例：如果设置fraction为1/5，则返回1/5 * 屏幕高度

屏幕宽度的分数：

double widthFrac(BuildContext context, double fraction);
// 示例：如果设置fraction为1/5，则返回1/5 * 屏幕宽度

完整示例Demo

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ResponsiveView(
      mobile: Scaffold(
        backgroundColor: Colors.redAccent,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text("Mobile view", style: TextStyle(fontSize: 40)),
              const SizedBox(height: 30),
              Text("18210912 formated = ${largeNumberFormatter(18210912)}",
                  style: const TextStyle(fontSize: 40)),
              const SizedBox(height: 30),
              Text("is 14 plural? = ${isPlural(14)}",
                  style: const TextStyle(fontSize: 40)),
              const SizedBox(height: 30),
              Text("5 with number postfix = 5${numberPostfix(5)}",
                  style: const TextStyle(fontSize: 40))
            ],
          ),
        ),
      ),
      tablet: const Scaffold(
        backgroundColor: Colors.blueAccent,
        body: Center(
          child: Text("Tablet view", style: TextStyle(fontSize: 40)),
        ),
      ),
      desktop: Scaffold(
        backgroundColor: Colors.greenAccent,
        body: Center(
          child: Container(
            height: heightFrac(context, .5), // 设置容器高度为屏幕高度的一半
            color: Colors.redAccent,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Text("Desktop view", style: TextStyle(fontSize: 40)),
                SizedBox(height: 30),
                Text("Red rectagle height: heightFrac(context, 1/2))",
                    style: TextStyle(fontSize: 40)),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter实用工具集插件core_utils的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

ionicwang 1楼•2 天前

更多关于Flutter实用工具集插件core_utils的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何在Flutter项目中使用core_utils插件的示例代码。core_utils是一个包含多种实用工具的Flutter插件，可以简化一些常见的开发任务。假设你已经将core_utils添加到了你的pubspec.yaml文件中：

dependencies:
  flutter:
    sdk: flutter
  core_utils: ^最新版本号

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

以下是一些常用功能的示例代码：

1. 使用`StringUtils`处理字符串

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('core_utils Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Capitalize: ${StringUtils.capitalize("hello world")}',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                'Reverse: ${StringUtils.reverse("hello world")}',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. 使用`DateUtils`处理日期

import 'package:core_utils/core_utils.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    DateTime now = DateTime.now();
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('core_utils Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Format Date: ${DateFormat("yyyy-MM-dd").format(DateUtils.formatDate(now))}',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                'Days Between: ${DateUtils.daysBetween(now, now.addDays(5))}',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 使用`NumberUtils`处理数字

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('core_utils Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Format Number: ${NumberUtils.formatNumber(1234567.89, locale: "en_US")}',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                'Round: ${NumberUtils.round(123.4567, 2)}',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 使用`ListUtils`处理列表

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<int> numbers = [1, 2, 3, 4, 5];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('core_utils Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Chunk List: ${ListUtils.chunk(numbers, 2).map((e) => e.join(', ')).join('; ')}',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                'Shuffle List: ${ListUtils.shuffle(List.from(numbers)).join(', ')}',
                style: TextStyle(fontSize: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何使用core_utils插件中的不同工具类来处理字符串、日期、数字和列表。根据具体需求，你可以进一步扩展这些示例。确保你查阅了core_utils的文档以获取最新的API信息和更多功能。

Flutter实用工具集插件core_utils的使用