Flutter UI展示插件flutter_ui_presenter的使用

简介

flutter_ui_presenter 是一个用于在多个设备上展示 Flutter UI 的插件，支持通过 Web 或桌面平台进行展示。它非常适合用于开发阶段，可以快速预览不同页面的设计效果。

开始使用

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 flutter_ui_presenter 依赖：

dependencies:
  flutter_ui_presenter: ^0.1.0

然后运行以下命令安装依赖：

flutter pub get

2. 创建模板页面

flutter_ui_presenter 提供了一个 UIPresenter 小部件，允许你定义不同的模板页面，并在界面上切换查看。每个模板页面都需要定义一个名称和构建函数。

以下是示例代码中定义的两个模板页面 Template1 和 Template2：

class Template1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Template1'),
      ),
      body: Center(
        child: FlutterLogo(), // 中心显示 Flutter Logo
      ),
    );
  }
}

class Template2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Template2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator.adaptive(), // 进度指示器
            Switch.adaptive( // 开关控件
              value: true,
              onChanged: (value) {},
            ),
          ],
        ),
      ),
    );
  }
}

3. 配置 UIPresenter

接下来，在应用的主入口文件中配置 UIPresenter，并传入模板列表。每个模板包含名称和对应的构建函数。

import 'package:example/src/counter_page.dart'; // 引入计数页面
import 'package:example/src/scroll_page.dart'; // 引入滚动页面
import 'package:flutter/material.dart';
import 'package:flutter_ui_presenter/flutter_ui_presenter.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UIPresenter(
        templates: [
          Template(
            name: 'Template 1', // 模板名称
            builder: (context) => Template1(), // 模板页面构建函数
          ),
          Template(
            name: 'Template 2',
            builder: (context) => Template2(),
          ),
          Template(
            name: 'Counter',
            builder: (context) => CounterPage(), // 自定义计数页面
          ),
          Template(
            name: 'Scroll',
            builder: (context) => ScrollPage(), // 自定义滚动页面
          ),
        ],
      ),
    );
  }
}

4. 查看效果

运行应用后，你会看到一个带有模板选择功能的界面。点击不同的模板名称即可预览其 UI 效果。

示例代码完整结构

以下为完整的示例代码，包括 main.dart 和模板页面的实现：

// main.dart
import 'package:example/src/counter_page.dart';
import 'package:example/src/scroll_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_ui_presenter/flutter_ui_presenter.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UIPresenter(
        templates: [
          Template(
            name: 'Template 1',
            builder: (context) => Template1(),
          ),
          Template(
            name: 'Template 2',
            builder: (context) => Template2(),
          ),
          Template(
            name: 'Counter',
            builder: (context) => CounterPage(),
          ),
          Template(
            name: 'Scroll',
            builder: (context) => ScrollPage(),
          ),
        ],
      ),
    );
  }
}

// Template1 页面
class Template1 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Template1'),
      ),
      body: Center(
        child: FlutterLogo(),
      ),
    );
  }
}

// Template2 页面
class Template2 extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Template2'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircularProgressIndicator.adaptive(),
            Switch.adaptive(
              value: true,
              onChanged: (value) {},
            ),
          ],
        ),
      ),
    );
  }
}