Flutter文本样式管理插件material_texts的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter文本样式管理插件material_texts的使用

Material Texts

排版是应用程序设计的关键元素，一致的文本样式对于实现用户友好的体验至关重要。然而，在每个新项目中设置文本样式可能会很耗时，特别是当你希望遵循材料设计指南时。

Material Texts 是一个简化Flutter中文本样式的包，它提供了基于材料设计排版的15种不同的可定制文本小部件。这些小部件预配置了推荐的样式，使你能够轻松地在整个应用中应用一致的排版。如果需要，你也可以自定义这些样式以适应项目的特定需求。

为什么使用Material Texts？

  • 项目间一致性：确保你的文本样式在不同的应用之间保持一致，减少每次手动设置样式的需要。
  • 易于使用：快速创建不同区域的文本小部件，而无需重复定义样式。
  • 可定制性：虽然这些小部件带有默认的材料设计样式，但你可以轻松地自定义它们以符合你的品牌或设计需求。

可用的文本小部件

该包包括以下15个文本小部件，每个小部件都针对应用中的特定用途进行了优化。

显示样式

DisplayLarge

DisplayLarge(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 57,
  fontWeight: FontWeight.w400,
  letterSpacing = -0.25,
  lineHeight = 1.12,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

DisplayMedium

DisplayMedium(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 45,
  fontWeight: FontWeight.w400,
  letterSpacing = 0,
  lineHeight = 1.15,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

DisplaySmall

DisplaySmall(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 36,
  fontWeight: FontWeight.w400,
  letterSpacing = 0,
  lineHeight = 1.22,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

标题样式

HeadlineLarge

HeadlineLarge(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 32,
  fontWeight: FontWeight.w400,
  letterSpacing = 0,
  lineHeight = 1.25,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

HeadlineMedium

HeadlineMedium(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 28,
  fontWeight: FontWeight.w400,
  letterSpacing = 0,
  lineHeight = 1.28,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

HeadlineSmall

HeadlineSmall(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 24,
  fontWeight: FontWeight.w400,
  letterSpacing = 0,
  lineHeight = 1.33,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

标题样式

TitleLarge

TitleLarge(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 22,
  fontWeight: FontWeight.w400,
  letterSpacing = 0,
  lineHeight = 1.27,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

TitleMedium

TitleMedium(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 16,
  fontWeight: FontWeight.w500,
  letterSpacing = 0.15,
  lineHeight = 1.5,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

TitleSmall

TitleSmall(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 14,
  fontWeight: FontWeight.w500,
  letterSpacing = 0.1,
  lineHeight = 1.4,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

正文样式

BodyLarge

BodyLarge(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 16,
  fontWeight: FontWeight.w400,
  letterSpacing = 0.5,
  lineHeight = 1.5,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

BodyMedium

BodyMedium(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 14,
  fontWeight: FontWeight.w400,
  letterSpacing = 0.25,
  lineHeight = 1.42,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

BodySmall

BodySmall(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 12,
  fontWeight: FontWeight.w400,
  letterSpacing = 0.4,
  lineHeight = 1.33,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

标签样式

LabelLarge

LabelLarge(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 14,
  fontWeight: FontWeight.w500,
  letterSpacing = 0.1,
  lineHeight = 1.42,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

LabelMedium

LabelMedium(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 12,
  fontWeight: FontWeight.w500,
  letterSpacing = 0.5,
  lineHeight = 1.33,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

LabelSmall

LabelSmall(
  'Hello, World!',
  textColor: Theme.of(context).colorScheme.onPrimaryContainer,
  fontSize: 11,
  fontWeight: FontWeight.w500,
  letterSpacing = 0.5,
  lineHeight = 1.45,
  textAlign = TextAlign.start,
  textDecoration = TextDecoration.none,
  fontStyle = FontStyle.normal,
  maxLines,
  textOverflow = TextOverflow.clip,
  textDirection = TextDirection.ltr,
  softWrap = true,
  textShadows,
  textHeightBehavior,
)

特点

  • 预定义样式：轻松使用材料设计推荐的排版样式。
  • 可定制性：覆盖默认样式以获得更多的控制权。
  • 一致性：在整个应用中保持一致的排版。

开始使用

要在项目中开始使用Material Texts，请将其添加到你的pubspec.yaml文件中：

dependencies:
  material_texts: ^1.0.0

然后，将它导入到你的Dart代码中：

import 'package:material_texts/material_texts.dart';

使用示例

基本文本

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: TitleMedium('Material Texts Example'),
        ),
        body: Center(
          child: DisplayLarge(
            'Hello, World!'
          ),
        ),
      ),
    );
  }
}

自定义文本

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: TitleMedium('Material Texts Customization Example'),
        ),
        body: Center(
          child: DisplayLarge(
            'Custom Styled Text',
            textColor: Colors.deepPurple, // 自定义颜色
            fontSize: 72, // 自定义字体大小
            fontWeight: FontWeight.w900, // 自定义字体粗细
            letterSpacing: 2.0, // 自定义字母间距
            lineHeight: 1.5, // 自定义行高（倍数）
          ),
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用material_texts插件来管理文本样式的示例代码。请注意，material_texts插件的具体用法和功能可能会根据插件的版本有所不同，以下示例基于假设的插件功能。如果插件的实际功能与假设不符，请参考插件的官方文档进行调整。

首先，确保你已经在pubspec.yaml文件中添加了material_texts依赖：

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

然后运行flutter pub get来获取依赖。

接下来，你可以按照以下步骤在Flutter项目中使用material_texts插件：

1. 导入插件

在你的Dart文件中导入material_texts插件：

import 'package:material_texts/material_texts.dart';

2. 配置文本样式

假设material_texts插件允许你通过某种方式定义全局文本样式，这里我们创建一个配置类来设置这些样式：

class MyTextStyles {
  final TextStyle heading1;
  final TextStyle heading2;
  final TextStyle bodyText1;
  final TextStyle bodyText2;

  MyTextStyles({
    required this.heading1,
    required this.heading2,
    required this.bodyText1,
    required this.bodyText2,
  });
}

// 初始化文本样式
final MyTextStyles textStyles = MyTextStyles(
  heading1: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  heading2: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
  bodyText1: TextStyle(fontSize: 16),
  bodyText2: TextStyle(fontSize: 14),
);

注意：这里的MyTextStyles类是为了演示目的而创建的，实际使用时material_texts插件可能会有自己的配置方式。

3. 使用插件提供的组件

假设material_texts插件提供了一些组件来应用这些样式，比如MaterialText组件：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material Texts Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用插件提供的组件并应用预定义的样式
              MaterialText(
                text: 'Heading 1',
                style: textStyles.heading1,
              ),
              SizedBox(height: 16),
              MaterialText(
                text: 'Heading 2',
                style: textStyles.heading2,
              ),
              SizedBox(height: 16),
              MaterialText(
                text: 'Body Text 1',
                style: textStyles.bodyText1,
              ),
              SizedBox(height: 16),
              MaterialText(
                text: 'Body Text 2',
                style: textStyles.bodyText2,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 假设的 MaterialText 组件（实际使用时由插件提供）
class MaterialText extends StatelessWidget {
  final String text;
  final TextStyle style;

  MaterialText({required this.text, required this.style});

  @override
  Widget build(BuildContext context) {
    return Text(text, style: style);
  }
}

注意

  • 上面的MaterialText组件是一个假设的组件，用于演示目的。实际使用时，material_texts插件可能会提供类似的组件，但名称和用法可能会有所不同。
  • 确保阅读material_texts插件的官方文档，以了解如何正确配置和使用该插件。
  • 如果插件提供了主题或全局样式配置的方法，你应该按照插件的文档进行相应的配置。

希望这个示例能帮助你理解如何在Flutter项目中使用material_texts插件来管理文本样式。如果有任何疑问或需要进一步的帮助，请查阅插件的官方文档或社区资源。

回到顶部