Flutter代码查看与展示插件kode_view的使用

kode_view介绍

Flutter语法高亮小部件，基于Highlights库。

kode_view的安装

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

flutter pub add kode_view

kode_view的使用

CodeTextView

CodeTextView用于展示代码片段，并支持语法高亮。

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

@override
Widget build(BuildContext context) {
  final codeSnippet = "class HelloWorld {}";
  
  return MaterialApp(
    home: Scaffold(
      appBar: ...,
      body: CodeTextView(
        code: codeSnippet, // 要展示的代码
        language: "Java",  // 代码语言（支持多种语言）
        theme: "darcula",  // 主题样式
        options: TextSelectionOptions(
          copy: true,       // 是否允许复制
          selectAll: true,  // 是否允许全选
          share: true,      // 是否允许分享
        ),
      ),
    ),
  );
}

CodeEditText

CodeEditText是一个可编辑的代码输入框，支持语法高亮和实时更新。

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

class _MyAppState extends State<MyApp> {
  final SyntaxHighlightingController controller =
      SyntaxHighlightingController(text: codeSnippet);

  @override
  Widget build(BuildContext context) {
    final codeSnippet = "class HelloWorld {}";

    return MaterialApp(
      home: Scaffold(
        appBar: ...,
        body: CodeEditText(
          code: codeSnippet, // 初始代码
          controller: controller, // 控制器
          showCursor: true, // 是否显示光标
        ),
      ),
    );
  }
}

示例代码

以下是完整的示例代码，展示了如何使用kode_view来实现代码展示和编辑功能。

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

const codeSnippet =
    "class HelloWorld {\n\tpublic static void main(String[] args) {\n\t\tSystem.out.println(\"Hello, World!\"); \n}}";

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final SyntaxHighlightingController controller =
      SyntaxHighlightingController(text: codeSnippet);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Kode View example'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const Text("CodeTextView"), // 标题
              const SizedBox(
                height: 12,
              ),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: CodeTextView(
                  code: codeSnippet, // 展示的代码
                  language: "Java",  // 代码语言
                  theme: "darcula",  // 主题样式
                  options: TextSelectionOptions(
                    copy: true,       // 允许复制
                    selectAll: true,  // 允许全选
                    share: true,      // 允许分享
                  ),
                ),
              ),
              const SizedBox(height: 24),
              const Text("CodeEditText"), // 标题
              const SizedBox(height: 12),
              Padding(
                padding: const EdgeInsets.all(16.0),
                child: CodeEditText(
                  code: codeSnippet, // 初始代码
                  controller: controller, // 控制器
                  showCursor: true, // 显示光标
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

功能

• 支持17种编程语言（如Kotlin、Dart、Swift、PHP等）。
• 提供浅色和深色模式。
• 内置6种主题样式。
• 支持代码短语加粗（强调）。
• 结果缓存和增量更改支持。

支持平台

• Android ✅
• iOS ✅
• macOS 🔴 （尚未支持）
• Linux 🔴 （尚未支持）
• Windows 🔴 （尚未支持）
• Web 🔴 （尚未支持）

许可证

Copyright 2024 Tomasz Kądziołka.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.