Flutter自定义文本大小插件custom_sizable_text的使用

CustomSizableText

此插件简化了文本小部件，并使其更加灵活且可自动调整大小。
通过使用 auto_size_text，可以使文本自动调整大小。

GitHub 仓库

开始使用

在 pubspec.yaml 文件中添加依赖：

dependencies:
  custom_sizable_text: <latest-version>

然后在 Dart 文件中导入以下库：

import 'package:flutter_screenutil/flutter_screenutil.dart';

使用方法

添加依赖

在安装之前，请检查最新版本。如果新版本有问题，可以使用旧版本。

示例代码如下：

Widget createText(String message, {Color? color}) => 
  CustomText(
    message, // 要显示的文本
    size: 20, // 文本初始大小
    color: color ?? Colors.black, // 默认颜色为黑色
    fontWeight: FontWeight.w600, // 字重
    textOverflow: TextOverflow.visible, // 溢出时的行为
    maxLines: 2, // 最大行数
  );

提示

1. 禁用可调整大小的文本

可以通过设置 textType 属性为 TextType.normal 来禁用可调整大小的文本。

示例代码如下：

CustomText(
  "Hello World", // 要显示的文本
  size: 15, // 初始大小
  color: Colors.black, // 颜色
  fontWeight: FontWeight.w600, // 字重
  textOverflow: TextOverflow.visible, // 溢出行为
  // 添加这一行以禁用可调整大小的文本
  textType: TextType.normal,
);

2. 在无边界高度的控件中使用

如果你在无边界高度的控件中使用可调整大小的文本，强烈建议通过包裹 SizedBox 或者设置 textType 为 TextType.normal 来指定高度。

示例代码如下：

SizedBox( // 使用 SizedBox 设置固定高度
  height: 100, // 高度
  width: 200, // 宽度
  child: CustomText(
    "Hello World", // 要显示的文本
    size: 15, // 初始大小
    color: Colors.black, // 颜色
    fontWeight: FontWeight.w600, // 字重
    textOverflow: TextOverflow.visible, // 溢出行为
    textType: TextType.normal, // 禁用可调整大小的文本
  ),
),

示例代码

以下是完整的示例代码，展示如何使用 custom_sizable_text 插件。

import 'package:custom_sizable_text/custom_sizable_text.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(
      title: 'CustomResizableText Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: CustomText(
          "CustomResizableText example", // 标题文本
          fontStyle: Theme.of(context).textTheme.displayLarge!.fontStyle, // 使用主题字体样式
          color: Colors.white, // 文本颜色
          size: 20, // 文本大小
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const CustomText(
              'You have pushed the button this many times:', // 提示文本
            ),
            CustomText(
              '$_counter', // 动态计数器
              textStyle: Theme.of(context).textTheme.headlineMedium, // 使用主题样式
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter, // 点击按钮增加计数器
        tooltip: 'Increment', // 工具提示
        child: const Icon(Icons.add), // 图标
      ),
    );
  }
}