Flutter代码高亮显示插件flutter_highlight_extended的使用

Flutter代码高亮显示插件flutter_highlight_extended的使用

介绍

flutter_highlight_extended 是一个用于在 Flutter 应用程序中进行代码高亮显示的插件。该插件允许你轻松地将代码片段以高亮的形式展示出来。

使用方法

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

dependencies:
  flutter:
    sdk: flutter
  flutter_highlight_extended: ^x.x.x

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

以下是一个简单的示例代码，展示了如何使用 flutter_highlight_extended 插件来高亮显示代码：

import 'package:flutter/material.dart';
import 'package:flutter_highlight_extended/flutter_highlight_extended.dart';
import 'package:flutter_highlight_extended/themes/github.dart'; // 导入主题

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var code = '''main() {
  print("Hello, World!");
}
'''; // 需要高亮显示的代码

    return HighlightView(
      // 原始代码
      code,

      // 指定语言
      // 性能考虑，建议给它一个值
      language: 'dart',

      // 指定高亮主题
      // 所有可用的主题都列在 `themes` 文件夹中
      theme: githubTheme,

      // 指定填充
      padding: EdgeInsets.all(12),

      // 指定文本样式
      textStyle: TextStyle(
        fontFamily: 'My awesome monospace font',
        fontSize: 16,
      ),
    );
  }
}

完整示例

以下是一个完整的示例代码，展示了一个带有下拉菜单选择语言和主题的页面：

import 'package:flutter/material.dart';
import 'package:flutter_highlight_extended/flutter_highlight_extended.dart';
import 'package:flutter_highlight_extended/themes/a11y_dark.dart'; // 导入主题
import 'package:flutter_highlight_extended/themes/github.dart';

void main() => runApp(MyApp());

final title = 'Flutter Highlight Gallery';

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: title,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String language = 'dart';
  String theme = 'a11y-dark';

  Widget _buildMenuContent(String text) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 12),
      child: Row(children: [
        Text(text, style: TextStyle(fontSize: 16)),
        Icon(Icons.arrow_drop_down)
      ]),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        actions: [
          PopupMenuButton(
            child: _buildMenuContent(language),
            itemBuilder: (context) {
              return ['dart', 'java', 'python'].map((key) {
                return CheckedPopupMenuItem(
                  value: key,
                  child: Text(key),
                  checked: language == key,
                );
              }).toList();
            },
            onSelected: (selected) {
              if (selected != null) {
                setState(() {
                  language = selected;
                });
              }
            },
          ),
          PopupMenuButton<String>(
            child: _buildMenuContent(theme),
            itemBuilder: (context) {
              return ['a11y-dark', 'github', 'material'].map((key) {
                return CheckedPopupMenuItem(
                  value: key,
                  child: Text(key),
                  checked: theme == key,
                );
              }).toList();
            },
            onSelected: (selected) {
              if (selected != null) {
                setState(() {
                  theme = selected;
                });
              }
            },
          ),
          IconButton(
            icon: const Icon(Icons.code),
            tooltip: 'Source Code',
            onPressed: () {
              // 打开源代码链接
              // launch('https://github.com/pd4d10/highlight');
            },
          )
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            HighlightView(
              // 示例代码
              '''main() {
  print("Hello, World!");
}
''',
              language: language,
              theme: themeMap[theme],
              padding: EdgeInsets.all(12),
              textStyle: TextStyle(
                  fontFamily:
                      'SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace'),
            )
          ],
        ),
      ),
    );
  }
}