Flutter UI管理插件commander_ui的使用

Flutter UI管理插件commander_ui的使用

Commander 是一个 Dart 库，用于在终端中创建用户界面。它提供了交互式组件，如选项选择和文本输入，并且具有高级用户输入管理。

安装

要在您的Dart项目中使用Commander，请将以下内容添加到pubspec.yaml文件中：

dependencies:
  commander_ui: ^2.0.0

然后运行pub get以安装依赖项。

使用示例

Ask 组件

一个简单的使用Commander创建Ask组件的例子：

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final value = await commander.ask('What is your email ?',
    validate: (validator) =&gt; validator
      ..notEmpty(message: 'Name cannot be empty :)')
      ..email(message: 'Please enter a valid email'));

  // 自定义验证器
  final value = await commander.ask(' What is your name ?',
    validate: (validator) =&gt; validator
      ..validate((value) =&gt; value == 'Bob' 
          ? 'Bob is not allowed' 
          : null));

  print(value);
}

Number 组件

一个简单的使用Commander创建Number组件的例子：

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final value = await commander.number('What is your age ?',
      interval: 1,
      onDisplay: (value) => value?.toStringAsFixed(2),
      validate: (validator) => validator
        ..greaterThan(18, message: 'You must be at least 18 years old')
        ..lowerThan(99, message: 'You must be at most 99 years old'));

  print(value);
}

Select 组件

一个简单使用Commander创建Option Selection组件的例子：

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final value = await commander.select(' What is your name ?',
      onDisplay: (value) => value,
      placeholder: 'Type to search',
      defaultValue: 'Charlie',
      options: ['Alice', 'Bob', 'Charlie', 'David', 'Eve', 'Frank', 'John']);

  print(value);
}

Swap 组件

一个简单使用Commander创建Swap组件的例子：

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final value = await commander.swap('Do you love cats', 
    defaultValue: true, 
    placeholder: '🐈'
  );
  
  final str = switch (value) {
    true => 'I love cats 😍',
    false => 'I prefer dogs 😕',
  };

  print(str);
}

Task 组件

一个简单使用Commander创建Task组件的例子：

Future<void> sleep() => Future.delayed(Duration(seconds: 1));

Future<String> sleepWithValue() =>
    Future.delayed(Duration(seconds: 1), () => 'Hello World !');

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final successTask = await commander.task();
  await successTask.step('Success step 1', callback: sleepWithValue);
  await successTask.step('Success step 2', callback: sleep);
  successTask.success('Success task data are available !');

  final warnTask = await commander.task();
  await warnTask.step('Warn step 1', callback: sleepWithValue);
  await warnTask.step('Warn step 2', callback: sleep);
  await warnTask.step('Warn step 3', callback: sleep);
  warnTask.warn('Warn task !');

  final errorTask = await commander.task();
  await errorTask.step('Error step 1', callback: sleepWithValue);
  await errorTask.step('Error step 2', callback: sleep);
  await errorTask.step('Error step 3', callback: sleep);
  errorTask.error('Error task !');
}

Checkbox 组件

一个简单使用Commander创建Checkbox组件的例子：

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final value = await commander.checkbox(
    'What is your favorite pet ?',
    defaultValue: 'Charlie',
    options: ['cat', 'dog', 'bird'],
  );

  print(value);
}

Table 组件

一个简单使用Commander创建Table组件的例子：

Future<void> main() async {
  final commander = Commander(level: Level.verbose);
  commander.table(
    columns: ['Name', 'Age', 'Country', 'City'],
    lineSeparator: false,
    columnSeparator: false,
    data: [
      ['Alice', '20', 'USA', 'New York'],
      ['Bob', '25', 'Canada', 'Toronto'],
      ['Charlie', '30', 'France', 'Paris'],
      ['David', '35', 'Germany', 'Berlin'],
      ['Eve', '40', 'Italy', 'Rome'],
      ['Frank', '45', 'Japan', 'Tokyo'],
      ['John', '50', 'China', 'Beijing'],
    ],
  );
}

Alternative Screen 组件

一个简单使用Commander创建Alternative Screen组件的例子：

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final screen = commander.screen(title: 'First screen');
  screen.enter();

  await sleep();
  print('Hello screen !');
  await sleep();

  screen.leave();

  print('Goodbye screen !');
}

Future<void> wait() =>
    Future.delayed(Duration(seconds: Random().nextInt(3) + 1));

主题化

Commander 提供了一个主题系统来自定义组件的外观。 可以为所有组件定义一个全局主题，或者为每个组件定义一个特定的主题。

Future<void> main() async {
  final commander = Commander(
    level: Level.verbose,
    componentTheme: ComponentTheme(
      askTheme: DefaultAskTheme.copyWith(askPrefix: '🤖')
    ));

  final value = await commander.ask(' What is your email ?',
    validate: (validator) => validator
      ..notEmpty(message: 'Name cannot be empty :)')
      ..email(message: 'Please enter a valid email'));

  print(value);
}

每个与用户交互的组件都有一个 theme 属性，允许自定义其外观。

Future<void> main() async {
  final commander = Commander(level: Level.verbose);

  final value = await commander.ask(' What is your email ?',
    theme: DefaultAskTheme.copyWith(askPrefix: '🤖'),
    validate: (validator) => validator
      ..notEmpty(message: 'Name cannot be empty :)')
      ..email(message: ' Please enter a valid email'));
  
  print(value);
}