Flutter自适应文本大小插件flutter_responsive_text_widget的使用

Flutter自适应文本大小插件flutter_responsive_text_widget的使用

ResponsiveText 是一个用于 Flutter 应用程序的自适应文本显示小部件。它会根据屏幕尺寸自动调整文本大小，并且完全可定制。

显示一些❤️并给仓库点赞以支持该项目

使用方法

ResponsiveText 的行为与 Text 小部件几乎相同，唯一的区别在于它可以调整文本大小以适应其边界。

ResponsiveText(
  style: TextStyle(color: Colors.black), // 设置文本样式
  minTextSize: 5, // 设置最小文本大小
  scale: 0.05, // 设置缩放比例
  maxTextSize: 50, // 设置最大文本大小
  text: 
    "Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
    "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, "
    "when an unknown printer took a galley of type and scrambled it to make a type "
    "specimen book. It has survived not only five centuries, but also the leap into "
    "electronic typesetting, remaining essentially unchanged. It was popularised "
    "in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, "
    "and more recently with desktop publishing software like Aldus PageMaker including "
    "versions of Lorem Ipsum.",
)

完整示例

以下是一个完整的 Flutter 应用程序示例，展示了如何使用 ResponsiveText 小部件。

import 'package:flutter/material.dart';
import 'package:flutter_responsive_text_widget/responsive_text.dart';

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

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

  // 这个小部件是你的应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 试一试：运行你的应用，你会看到应用有一个蓝色的工具栏。然后，不退出应用，
        // 尝试将 colorScheme 中的 seedColor 更改为 Colors.green
        // 并重新加载（保存更改或按热重载按钮在 Flutter 支持的 IDE 中，或在命令行中按 "r"）。
        //
        // 注意：计数器并没有重置回零；应用程序的状态在重新加载期间不会丢失。要重置状态，使用热重启。
        //
        // 这也适用于代码，而不仅仅是值：大多数代码更改可以通过简单的热重载来测试。
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Home(),
    );
  }
}

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

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 600, // 设置容器宽度
              child: ResponsiveText(
                style: const TextStyle(color: Colors.black), // 设置文本样式
                minTextSize: 5, // 设置最小文本大小
                scale: 0.05, // 设置缩放比例
                maxTextSize: 50, // 设置最大文本大小
                text: 
                  "Lorem Ipsum is simply dummy text of the printing and typesetting industry. "
                  "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, "
                  "when an unknown printer took a galley of type and scrambled it to make a type "
                  "specimen book. It has survived not only five centuries, but also the leap into "
                  "electronic typesetting, remaining essentially unchanged. It was popularised "
                  "in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, "
                  "and more recently with desktop publishing software like Aldus PageMaker including "
                  "versions of Lorem Ipsum.",
              ),
            )
          ],
        ),
      ),
    );
  }
}