Flutter文本样式快速应用插件instant_text_styles的使用

Flutter文本样式快速应用插件instant_text_styles的使用

特性

简单文本样式的即时实现。
采用Material Design3排版风格。
-> Material Design3 排版规范

基本属性：

  • display
  • headline
  • title
  • body
  • caption
  • button
  • overline

开始使用

在你的Flutter项目中添加依赖：

dependencies: 
  instant_text_styles: ^<version>

导入包：

import 'package:instant_text_styles/instant_text_styles.dart';

使用示例

最简单的例子

Text('Title Large', style: TextStyles.title.large),

改变颜色

Text('Title Large Black', style: TextStyles.title.black),
Text('Title Large White', style: TextStyles.title.white),

根据状态改变颜色

// 成功状态 (绿色: 0xFF34C759)
Text('Success!!', style: TextStyles.body.success),

// 错误状态 (红色: 0xFFFF3B30)
Text('Error!!', style: TextStyles.body.error),

// 警告状态 (橙色: 0xFFFF9500)
Text('Warning!!', style: TextStyles.body.warning),

添加文本装饰

// 下划线
Text('Underline', style: TextStyles.body.underline),

// 删除线
Text('LineThrough', style: TextStyles.body.lineThrough),

// 上划线
Text('Overline', style: TextStyles.body.overline),

自定义参数

Text('Use copyWith', style: TextStyles.body.copyWith(color: Colors.amber)),

完整示例代码

以下是一个完整的示例代码，展示了如何使用instant_text_styles插件。

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

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

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

  // 应用程序入口
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TextStyles Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const Home(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    const gap = SizedBox(height: 16);
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text('Title Large 日本語フォント', style: TextStyles.title.large),
              Text('Title Medium', style: TextStyles.title),
              Text('Title Small', style: TextStyles.title.small),
              gap,
              Text('Label Large', style: TextStyles.label.large),
              Text('Label Medium', style: TextStyles.label),
              Text('Label Small', style: TextStyles.label.small),
              gap,
              Text('Body Large', style: TextStyles.body.large),
              Text('Body Medium', style: TextStyles.body),
              Text('Body Small', style: TextStyles.body.small),
              gap,
              // 成功状态 (绿色: 0xFF34C759)
              Text('Success!!', style: TextStyles.body.success),
              // 错误状态 (红色: 0xFFFF3B30)
              Text('Error!!', style: TextStyles.body.error),
              // 警告状态 (橙色: 0xFFFF9500)
              Text('Warning!!', style: TextStyles.body.warning),
              gap,
              Text('Underline', style: TextStyles.body.underline),
              Text('LineThrough', style: TextStyles.body.lineThrough),
              Text('Overline', style: TextStyles.body.overline),
              gap,
              Text('Use copyWith', style: TextStyles.body.copyWith(color: Colors.amber)),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter文本样式快速应用插件instant_text_styles的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文本样式快速应用插件instant_text_styles的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


instant_text_styles 是一个用于在 Flutter 中快速应用文本样式的插件。它可以帮助开发者快速定义和应用常用的文本样式，减少重复代码。

安装

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

dependencies:
  flutter:
    sdk: flutter
  instant_text_styles: ^1.0.0 # 请使用最新版本

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

基本用法

instant_text_styles 提供了一些预定义的文本样式，你可以直接在 Text 组件中使用。

1. 使用预定义样式

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Instant Text Styles Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Heading 1', style: InstantTextStyles.heading1),
              SizedBox(height: 20),
              Text('Heading 2', style: InstantTextStyles.heading2),
              SizedBox(height: 20),
              Text('Body Text', style: InstantTextStyles.bodyText),
              SizedBox(height: 20),
              Text('Caption', style: InstantTextStyles.caption),
            ],
          ),
        ),
      ),
    );
  }
}

2. 自定义样式

你还可以通过 TextStyle 类来自定义样式，并将其与 instant_text_styles 结合使用。

Text(
  'Custom Style',
  style: InstantTextStyles.bodyText.copyWith(
    color: Colors.red,
    fontWeight: FontWeight.bold,
  ),
);

3. 创建自定义样式集合

你可以创建一个自定义的样式集合，以便在应用中统一使用。

class MyTextStyles {
  static final TextStyle customHeading = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  );

  static final TextStyle customBody = TextStyle(
    fontSize: 16,
    color: Colors.green,
  );
}

// 使用自定义样式
Text('Custom Heading', style: MyTextStyles.customHeading);
Text('Custom Body', style: MyTextStyles.customBody);
回到顶部