flutter如何用flutter_highlight展示代码并实现效果展示

在Flutter项目中，我想使用flutter_highlight包来展示代码块并实现语法高亮效果，但不太清楚具体如何实现。请问该如何正确配置flutter_highlight的依赖，并设置适合的代码主题？另外，如何控制代码块的显示样式，比如字体大小、背景色等？最好能提供一个完整的示例代码，包括代码高亮和效果展示的实现步骤。

2 回复

在Flutter中使用flutter_highlight展示代码并实现效果，步骤如下：

  1. 添加依赖：在pubspec.yaml中添加：
dependencies:
  flutter_highlight: ^版本号
  flutter_highlight/themes/主题名: ^版本号
  1. 基本使用：
import 'package:flutter_highlight/flutter_highlight.dart';
import 'package:flutter_highlight/themes/github.dart';

HighlightView(
  '''// 示例代码
void main() {
  print("Hello World");
}''',
  language: 'dart',
  theme: githubTheme,
  padding: EdgeInsets.all(12),
  textStyle: TextStyle(fontFamily: 'Monospace'),
)

  1. 自定义主题：可从内置主题选择或自定义颜色方案

  2. 结合效果展示：可配合Container、Card等组件美化布局，添加交互按钮实现代码运行效果演示

  3. 支持语言：内置Dart、Java、Python等主流语言高亮

注意：如需展示运行效果，需配合其他插件或自行实现代码执行功能。

更多关于flutter如何用flutter_highlight展示代码并实现效果展示的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 flutter_highlight 库可以方便地展示代码并实现语法高亮效果。以下是具体实现步骤：

1. 添加依赖

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_highlight: ^2.0.0
  flutter_highlight/themes/github: ^2.0.0  # 选择主题

2. 基本使用

import 'package:flutter_highlight/flutter_highlight.dart';
import 'package:flutter_highlight/themes/github.dart';

class CodeDisplayWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return HighlightView(
      // 要显示的代码
      '''void main() {
  runApp(MyApp());
}''',
      // 语言类型
      language: 'dart',
      // 主题
      theme: githubTheme,
      // 文本样式
      textStyle: TextStyle(
        fontFamily: 'Monospace',
        fontSize: 16,
      ),
    );
  }
}

3. 常用属性说明

  • language：代码语言（dart、java、python等）
  • theme：高亮主题，可从预置主题中选择
  • padding：内边距设置
  • textStyle：文本样式

4. 效果展示组合

Column(
  children: [
    // 代码展示
    Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: githubTheme['root']?.backgroundColor,
      ),
      child: HighlightView(...),
    ),
    // 效果展示区域
    Container(
      child: YourActualWidget(), // 你的实际组件
    ),
  ],
)

5. 注意事项

  • 支持的语言需要导入对应语言包
  • 可通过自定义主题修改颜色方案
  • 建议使用等宽字体保证对齐效果

这样就能在 Flutter 应用中实现代码高亮显示和实际效果并排展示的功能。

回到顶部