Flutter点阵文字显示插件dot_matrix_text的使用

特性

• 可定制的LED大小和间距
• 可调整的文字样式和颜色
• 镜像模式用于反向文字显示
• 闪烁模式可调节速度
• 反转颜色以适应不同的显示风格
• 可自定义的板子大小和对齐方式
• 高性能渲染
• 现代Material 3示例应用

开始使用

要使用此插件，在pubspec.yaml文件中添加dot_matrix_text作为依赖项：

dependencies:
  dot_matrix_text: ^0.2.0

参数

使用

在Dart代码中导入该包：

import 'package:dot_matrix_text/dot_matrix_text.dart';

基本用法：

DotMatrixText(text: 'Hello World');

自定义外观

你可以自定义点阵显示的各种方面：

DotMatrixText(
  text: 'Custom Text',
  ledSize: 5.0,
  ledSpacing: 3.0,
  blankLedColor: Colors.grey[800],
  textStyle: TextStyle(
    fontSize: 80,
    fontWeight: FontWeight.w600,
    color: Colors.green,
  ),
  mirrorMode: true,
  flickerMode: true,
  flickerSpeed: Duration(milliseconds: 500),
  invertColors: false,
);

设置自定义板子大小

默认情况下，板子大小是根据文本计算的。你可以设置一个自定义大小：

DotMatrixText(
  text: 'Fixed Size',
  boardSize: Size(300, 150),
  // ... 其他属性
);

其他信息

此插件优化了性能，利用高效的渲染技术来显示点阵文本，最小化开销。它是使用Flutter Hooks构建的，以便进行高效的状态管理。

功能亮点

• 增强性能：使用缓存的绘图对象和高效的像素数据处理进行优化渲染
• 可定制闪烁：可调节闪烁速度，以实现更动态的LED效果
• 改进对齐：更好的文本定位，具有响应式对齐控制
• 现代示例应用：采用Material 3设计，包含全面的自定义选项

对于更多详细的示例和高级用法，请参阅GitHub仓库中的示例应用。

问题与反馈

如有任何问题、错误或功能请求，请在我们的问题追踪器中提交。

贡献

欢迎贡献！如果您希望改进此插件，请创建一个包含您的更改的拉取请求。

许可证

该项目遵循MIT许可证 - 详情请参见LICENSE文件。

英雄LED显示应用

dot_matrix_text插件被用来创建App Store上的英雄LED显示应用。此应用提供了可定制的点阵显示，允许用户创建独特的LED标志模拟和复古风格的文本显示。

完整示例代码

以下是完整的示例代码，展示了如何使用dot_matrix_text插件来创建一个可交互的点阵文字显示应用：

import 'package:flutter/material.dart';
import 'package:dot_matrix_text/dot_matrix_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: 'Dot Matrix Text Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

const ledColors = [
  Colors.red,
  Colors.green,
  Colors.blue,
  Colors.yellow,
  Colors.purple,
  Colors.orange,
  Colors.pink,
  Colors.teal,
  Colors.amber,
  Colors.indigo,
];

const blankLedColors = [
  Color.fromRGBO(30, 30, 30, 1),
  Colors.transparent,
  Colors.black12,
  Colors.black26,
  Colors.black38,
];

const alignments = [
  Alignment.topLeft,
  Alignment.topCenter,
  Alignment.topRight,
  Alignment.centerLeft,
  Alignment.center,
  Alignment.centerRight,
  Alignment.bottomLeft,
  Alignment.bottomCenter,
  Alignment.bottomRight,
];

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

  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  String text = 'Hello World';
  TextEditingController textController = TextEditingController();
  double ledSize = 4.0;
  double ledSpacing = 2.0;
  Color blankLedColor = blankLedColors.first;
  TextStyle textStyle = TextStyle(
    fontSize: 80,
    fontWeight: FontWeight.bold,
    color: ledColors.first,
  );
  bool mirrorMode = false;
  bool flickerMode = false;
  Duration flickerSpeed = const Duration(seconds: 1);
  bool invertColors = false;
  Alignment alignment = Alignment.center;
  double boardWidth = 500.0;
  double boardHeight = 100.0;

  [@override](/user/override)
  void initState() {
    textController.text = text;
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height;
    final isSmallScreen = screenWidth < 600;

    return Scaffold(
      appBar: AppBar(
        title: const Text('Dot Matrix Text Demo'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: isSmallScreen
            ? _buildVerticalLayout(screenWidth, screenHeight)
            : _buildHorizontalLayout(screenWidth, screenHeight),
      ),
    );
  }

  Widget _buildVerticalLayout(double screenWidth, double screenHeight) {
    return SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          _buildPreviewSection(),
          const SizedBox(height: 16),
          _buildControlsCard(),
        ],
      ),
    );
  }

  Widget _buildHorizontalLayout(double screenWidth, double screenHeight) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
          flex: 3,
          child: SingleChildScrollView(
            child: Column(
              children: [
                _buildPreviewSection(),
              ],
            ),
          ),
        ),
        const SizedBox(width: 16),
        Expanded(
          flex: 2,
          child: SingleChildScrollView(
            child: _buildControlsCard(),
          ),
        ),
      ],
    );
  }

  Widget _buildPreviewSection() {
    return Card(
      elevation: 4,
      child: Container(
        width: boardWidth,
        height: boardHeight,
        color: Colors.black,
        child: DotMatrixText(
          text: text,
          ledSize: ledSize,
          ledSpacing: ledSpacing,
          blankLedColor: blankLedColor,
          textStyle: textStyle,
          mirrorMode: mirrorMode,
          flickerMode: flickerMode,
          flickerSpeed: flickerSpeed,
          invertColors: invertColors,
          alignment: alignment,
          boardSize: Size(boardWidth, boardHeight),
        ),
      ),
    );
  }

  Widget _buildControlsCard() {
    return Card(
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _buildSection(
              'Text',
              [
                TextField(
                  controller: textController,
                  decoration: const InputDecoration(
                    labelText: 'Enter Text',
                    border: OutlineInputBorder(),
                  ),
                  onChanged: (value) => setState(() => text = value),
                ),
              ],
            ),
            _buildSection(
              'LED Properties',
              [
                _buildSlider(
                  label: 'Font Size',
                  value: textStyle.fontSize ?? 100,
                  min: 50.0,
                  max: 200.0,
                  onChanged: (value) => setState(
                      () => textStyle = textStyle.copyWith(fontSize: value)),
                ),
                _buildSlider(
                  label: 'LED Size',
                  value: ledSize,
                  min: 1.0,
                  max: 10.0,
                  onChanged: (value) => setState(() => ledSize = value),
                ),
                _buildSlider(
                  label: 'Spacing',
                  value: ledSpacing,
                  min: 1.0,
                  max: 10.0,
                  onChanged: (value) => setState(() => ledSpacing = value),
                ),
                _buildColorPicker(
                  label: 'LED Color',
                  value: textStyle.color!,
                  colors: ledColors,
                  onChanged: (color) => setState(
                      () => textStyle = textStyle.copyWith(color: color)),
                ),
                _buildColorPicker(
                  label: 'Blank LED',
                  value: blankLedColor,
                  colors: blankLedColors,
                  onChanged: (color) => setState(() => blankLedColor = color),
                ),
              ],
            ),
            _buildSection(
              'Effects',
              [
                _buildSwitch(
                  label: 'Mirror Mode',
                  value: mirrorMode,
                  onChanged: (value) => setState(() => mirrorMode = value),
                ),
                _buildSwitch(
                  label: 'Flicker Mode',
                  value: flickerMode,
                  onChanged: (value) => setState(() => flickerMode = value),
                ),
                if (flickerMode)
                  _buildSlider(
                    label: 'Flicker Speed',
                    value: flickerSpeed.inMilliseconds / 1000,
                    min: 0.1,
                    max: 3.0,
                    divisions: 29,
                    onChanged: (value) => setState(() => flickerSpeed =
                        Duration(milliseconds: (value * 1000).round())),
                  ),
                _buildSwitch(
                  label: 'Invert Colors',
                  value: invertColors,
                  onChanged: (value) => setState(() => invertColors = value),
                ),
              ],
            ),
            _buildSection(
              'Layout',
              [
                _buildDropdown<Alignment>(
                  label: 'Alignment',
                  value: alignment,
                  items: alignments,
                  itemBuilder: (alignment) =>
                      Text(alignment.toString().split('.').last),
                  onChanged: (value) {
                    if (value != null) setState(() => alignment = value);
                  },
                ),
                _buildSlider(
                  label: 'Width',
                  value: boardWidth,
                  min: 100.0,
                  max: 800.0,
                  onChanged: (value) => setState(() => boardWidth = value),
                ),
                _buildSlider(
                  label: 'Height',
                  value: boardHeight,
                  min: 50.0,
                  max: 400.0,
                  onChanged: (value) => setState(() => boardHeight = value),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSection(String title, List<Widget> children) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Text(
            title,
            style: Theme.of(context).textTheme.titleMedium,
          ),
        ),
        ...children,
        const SizedBox(height: 16),
      ],
    );
  }

  Widget _buildSlider({
    required String label,
    required double value,
    required double min,
    required double max,
    int? divisions,
    required ValueChanged<double> onChanged,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(label),
            Text(value.toStringAsFixed(1)),
          ],
        ),
        Slider(
          value: value,
          min: min,
          max: max,
          divisions: divisions,
          onChanged: onChanged,
        ),
      ],
    );
  }

  Widget _buildSwitch({
    required String label,
    required bool value,
    required ValueChanged<bool> onChanged,
  }) {
    return SwitchListTile(
      title: Text(label),
      value: value,
      onChanged: onChanged,
    );
  }

  Widget _buildDropdown<T>({
    required String label,
    required T value,
    required List<T> items,
    required Widget Function(T) itemBuilder,
    required ValueChanged<T?> onChanged,
  }) {
    return Row(
      children: [
        Expanded(child: Text(label)),
        DropdownButton<T>(
          value: value,
          items: items.map((item) {
            return DropdownMenuItem<T>(
              value: item,
              child: itemBuilder(item),
            );
          }).toList(),
          onChanged: onChanged,
        ),
      ],
    );
  }

  Widget _buildColorPicker({
    required String label,
    required Color value,
    required List<Color> colors,
    required ValueChanged<Color> onChanged,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(label),
        const SizedBox(height: 8),
        Wrap(
          spacing: 8,
          runSpacing: 8,
          children: colors.map((color) {
            return InkWell(
              onTap: () => onChanged(color),
              child: Container(
                width: 32,
                height: 32,
                decoration: BoxDecoration(
                  color: color,
                  border: Border.all(
                    color: color == value
                        ? Theme.of(context).colorScheme.primary
                        : Colors.grey,
                    width: color == value ? 2 : 1,
                  ),
                  borderRadius: BorderRadius.circular(4),
                ),
              ),
            );
          }).toList(),
        ),
      ],
    );
  }
}