Flutter终端模拟插件xterm的使用

xterm.dart简介

xterm.dart 是一个为Flutter应用程序提供的快速且功能齐全的终端模拟器，支持移动和桌面平台。以下是它的主要特点：

• 📦 无需特殊配置即可使用
• 🚀 60fps的渲染速度
• 😀 支持宽字符（如CJK和表情符号）
• ✂️ 可定制化
• ✔ 前端独立：终端核心可以在没有Flutter前端的情况下工作
• 3.0.0版本的新特性：
  • 手机平台增强支持
  • 集成Flutter的快捷键系统
  • 运行时更改主题
  • 更好的性能，无树重建
  • 支持输入法编辑器（IMEs）

开始使用

1. 添加依赖

在pubspec.yaml文件中添加以下内容：

dependencies:
  ...
  xterm: ^3.2.6

2. 创建终端实例

import 'package:xterm/xterm.dart';

void main() {
  final terminal = Terminal();
  
  // 监听终端输出
  terminal.onOutput = (output) {
    print('output: $output');
  };
}

3. 创建视图并关联终端

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

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: TerminalView(terminal),
    ),
  ));
}

4. 向终端写入内容

terminal.write('Hello, world!');

示例代码

下面是一个完整的示例，展示了如何创建一个简单的终端应用，并通过PTY（伪终端）与本地shell进行交互。

import 'dart:convert';
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_pty/flutter_pty.dart';
import 'package:xterm/xterm.dart';

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

bool get isDesktop {
  if (kIsWeb) return false;
  return [
    TargetPlatform.windows,
    TargetPlatform.linux,
    TargetPlatform.macOS,
  ].contains(defaultTargetPlatform);
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'xterm.dart demo',
      debugShowCheckedModeBanner: false,
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  Home({super.key});

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final terminal = Terminal(maxLines: 10000);
  final terminalController = TerminalController();

  late final Pty pty;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.endOfFrame.then((_) {
      if (mounted) _startPty();
    });
  }

  void _startPty() {
    pty = Pty.start(shell, columns: terminal.viewWidth, rows: terminal.viewHeight);

    pty.output.cast<List<int>>().transform(Utf8Decoder()).listen(terminal.write);

    pty.exitCode.then((code) {
      terminal.write('the process exited with exit code $code');
    });

    terminal.onOutput = (data) {
      pty.write(const Utf8Encoder().convert(data));
    };

    terminal.onResize = (w, h, pw, ph) {
      pty.resize(h, w);
    };
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: SafeArea(
        child: TerminalView(
          terminal,
          controller: terminalController,
          autofocus: true,
          backgroundOpacity: 0.7,
          onSecondaryTapDown: (details, offset) async {
            final selection = terminalController.selection;
            if (selection != null) {
              final text = terminal.buffer.getText(selection);
              terminalController.clearSelection();
              await Clipboard.setData(ClipboardData(text: text));
            } else {
              final data = await Clipboard.getData('text/plain');
              final text = data?.text;
              if (text != null) {
                terminal.paste(text);
              }
            }
          },
        ),
      ),
    );
  }
}

String get shell {
  if (Platform.isMacOS || Platform.isLinux) {
    return Platform.environment['SHELL'] ?? 'bash';
  }

  if (Platform.isWindows) {
    return 'cmd.exe';
  }

  return 'sh';
}

这个示例展示了如何创建一个基本的终端应用程序，并通过PTY与本地shell进行交互。它还包括了剪贴板操作和终端大小调整的功能。

希望这些信息能帮助你更好地理解和使用xterm.dart插件！如果你有任何问题或需要进一步的帮助，请随时提问。