Flutter代码编辑器插件pluto_code_editor的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter代码编辑器插件pluto_code_editor的使用

功能介绍

这是一个包含行号、语法高亮和输出窗口的完整代码编辑器。它专门用于Python编程，特别是在Pluto（一个模块化的机器人套件）内部运行的bonicPython。

演示图

特点

  • 带有行号的编辑器
  • 语法高亮
  • 包括darcula、android_studio等在内的多种主题
  • 监听流的输出窗口
  • 便于编码的特殊字符键盘栏

开始使用

提供的示例基本上包含了所有你需要开始使用的部分。

使用方法

以下是一个完整的示例代码，展示了如何在你的Flutter项目中使用pluto_code_editor插件。

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:pluto_code_editor/pluto_code_editor.dart';
import 'package:flutter_highlight/themes/an-old-hope.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Pluto Code Editor Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PlutoCodeEditorDemo(),
    );
  }
}

class PlutoCodeEditorDemo extends StatefulWidget {
  const PlutoCodeEditorDemo({Key? key}) : super(key: key);

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

class _PlutoCodeEditorDemoState extends State<PlutoCodeEditorDemo> {
  PlutoCodeEditorController controller = PlutoCodeEditorController(
      theme: EditorTheme(syntaxTheme: anOldHopeTheme));
  StreamController streamController = StreamController.broadcast();
  bool isRunning = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: const Color(0xff0088CC),
        elevation: 0,
        title: const Text("Pluto Code Editor"),
      ),
      endDrawer: PlutoOutputViewer(
        controller: controller,
        output: streamController.stream,
        onInputSend: (input) {
          print(input);
        },
      ),
      body: PlutoCodeEditor(
        controller: controller,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: PlutoEditorBottomBar(
        controller: controller,
        keys: const [
          ':',
          '#',
          '(',
          ')',
          '[',
          ']',
          '.',
          "'",
        ],
        onCodeRun: () {
          isRunning = true;
          void showHelloWorld() async {
            if (!isRunning) return;
            streamController.sink.add("Hello world\n");
            await Future.delayed(const Duration(milliseconds: 200));
            showHelloWorld();
          }

          showHelloWorld();
        },
        onPause: () {
          isRunning = false;
        },
      ),
    );
  }
}

更多关于Flutter代码编辑器插件pluto_code_editor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter代码编辑器插件pluto_code_editor的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用pluto_code_editor插件的一个示例代码案例。pluto_code_editor是一个功能强大的代码编辑器插件，适用于Flutter应用。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加pluto_code_editor依赖：

dependencies:
  flutter:
    sdk: flutter
  pluto_code_editor: ^x.y.z  # 请替换为最新版本号

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

2. 导入包

在你的Dart文件中导入pluto_code_editor包：

import 'package:flutter/material.dart';
import 'package:pluto_grid/pluto_grid.dart';
import 'package:pluto_code_editor/pluto_code_editor.dart';

3. 使用PlutoCodeEditor

以下是一个简单的示例，展示如何在Flutter应用中使用PlutoCodeEditor：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('PlutoCodeEditor Demo'),
        ),
        body: Center(
          child: PlutoCodeEditorDemo(),
        ),
      ),
    );
  }
}

class PlutoCodeEditorDemo extends StatefulWidget {
  @override
  _PlutoCodeEditorDemoState createState() => _PlutoCodeEditorDemoState();
}

class _PlutoCodeEditorDemoState extends State<PlutoCodeEditorDemo> {
  String _code = '''
void main() {
  print('Hello, World!');
}
  ''';

  @override
  Widget build(BuildContext context) {
    return PlutoCodeEditor(
      value: _code,
      language: Language.dart, // 你可以根据需要选择其他语言，例如Language.java, Language.cpp等
      onChanged: (String newCode) {
        setState(() {
          _code = newCode;
        });
      },
      height: 400,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.grey.shade300),
      ),
    );
  }
}

4. 运行应用

确保你已经正确设置了Flutter开发环境，然后运行你的应用：

flutter run

解释

  • PlutoCodeEditor: 这是主要的代码编辑器组件。
  • value: 初始化代码内容。
  • language: 设置代码高亮的语言，这里设置为Dart。
  • onChanged: 当代码内容发生变化时的回调函数。
  • height: 编辑器的高度。
  • decoration: 装饰器，可以设置边框、圆角等样式。

这个示例展示了如何使用pluto_code_editor在Flutter应用中嵌入一个功能丰富的代码编辑器。你可以根据需要进一步自定义和扩展这个示例。

回到顶部