Flutter格式化工具插件formatus的使用

FORMATUS

一个无任何依赖的Flutter富文本编辑器。

特性

• 支持所有平台运行
• 支持多种段落和内联格式
• 小巧且易于使用
• 不依赖其他包
• 包含格式化文本查看器

开始使用

在pubspec.yaml文件中添加最新版本的Formatus：

flutter:
  formatus: ^1.4.0

创建一个FormatusController和一个FormatusBar。同时为FormatusBar和TextField或TextFormField提供一个FocusNode。

使用示例

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
      theme: ThemeData(useMaterial3: true),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FormatusController controller;
  final FocusNode focusNode = FocusNode(debugLabel: 'formatus');
  String savedText = '';

  @override
  void initState() {
    super.initState();
    controller = FormatusController(
      formattedText: savedText,
      onChanged: (v) => setState(() => savedText = v),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Formatus 富文本编辑器')),
      body: SafeArea(
        minimum: const EdgeInsets.all(16),
        child: Column(
          children: [
            FormatusBar(
              controller: controller,
              textFieldFocus: focusNode,
            ),
            TextFormField(
              controller: controller,
              focusNode: focusNode,
              minLines: 3,
              maxLines: 10,
            ),
            ElevatedButton(
              onPressed: () {
                // 显示格式化后的文本
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    content: FormatusViewer(
                      formattedText: controller.formattedText,
                    ),
                  ),
                );
              },
              child: const Text('查看格式化文本'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}

说明

1. 导入必要的库：

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

2. 初始化控制器：
   FormatusController用于管理富文本的格式和内容。

   late FormatusController controller;

3. 焦点节点：
   为FormatusBar和TextField提供一个FocusNode以确保光标位置正确。

   final FocusNode focusNode = FocusNode(debugLabel: 'formatus');

4. 构建界面：
   使用FormatusBar和TextFormField来实现富文本编辑功能。

   FormatusBar(
     controller: controller,
     textFieldFocus: focusNode,
   ),
   TextFormField(
     controller: controller,
     focusNode: focusNode,
     minLines: 3,
     maxLines: 10,
   ),

5. 查看格式化后的文本：
   点击按钮后弹出对话框，显示格式化后的文本。

   ElevatedButton(
     onPressed: () {
       showDialog(
         context: context,
         builder: (context) => AlertDialog(
           content: FormatusViewer(
             formattedText: controller.formattedText,
           ),
         ),
       );
     },
     child: const Text('查看格式化文本'),
   ),