Flutter界面原型设计插件flutter_storyboard的使用

storyboard

一个用于在Flutter应用中快速查看和测试所有屏幕的调试工具。

演示: https://rodydavis.github.io/storyboard/

示例

自定义车道构建器

自定义车道构建器代码

动态屏幕尺寸

动态屏幕尺寸代码

Material App 示例

Material App 示例代码

小部件示例

小部件示例代码

多个自定义车道示例

多个自定义车道示例代码

开始使用

将您的 MaterialApp 包裹在 Storyboard 中。

return StoryBoard.material(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Storyboard Example',
        theme: ThemeData.light().copyWith(
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        darkTheme: ThemeData.dark().copyWith(
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        themeMode: ThemeMode.light,
        home: HomeScreen(),
        routes: {
          '/home': (_) => HomeScreen(),
          '/about': (_) => AboutScreen(),
          '/settings': (_) => SettingsScreen(),
        },
      ),
    );

将您的 WidgetsApp 包裹在 Storyboard.widgets() 中。
将您的 CupertinoApp 包裹在 Storyboard.cupertino() 中。

自定义路由和小部件

您可以向画布中添加任意数量的自定义小部件，包括自定义路由。可以在构造函数中添加虚拟数据，因为它会渲染所有默认值。

customScreens: [
  SettingsScreen(),
  AboutScreen(),
  CustomWidget(title: 'Dummy Data'),
],
customRoutes: [
  RouteSettings(name: '/about'),
],

其他

现在您可以使用热重载来测试所有屏幕！您还可以通过将 enabled 设置为 false 来随时禁用该小部件。更改此值后，您需要执行热重启。

完整示例代码

以下是一个完整的示例代码，展示如何使用 flutter_storyboard 插件。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_storyboard/flutter_storyboard.dart';
import 'package:random_color/random_color.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return StoryBoard.material(
      enabled: true, // 启用Storyboard
      usePreferences: true, // 使用偏好设置
      crossAxisCount: 7, // 横轴数量
      canPanAndScrollWithGesture: true, // 支持手势缩放和平移
      cupertinoDevice: Devices.ios.iPhone11, // iOS设备类型
      screenSize: Size(400, 700), // 屏幕大小
      customScreens: [
        for (var i = 0; i < 25; i++)
          _generateScreen(
            title: Text('Screen$i'),
            color: RandomColor(i + 25).randomColor(),
          ),
      ],
      customRoutes: [
        RouteSettings(name: '/about'),
        RouteSettings(name: '/counter'),
        RouteSettings(name: '/screen_2'),
        RouteSettings(name: '/screen_5'),
        RouteSettings(
          name: '/screen_8',
          arguments: {"id": 1234}, // 路由参数
        ),
      ],
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Storyboard Example',
        theme: ThemeData.light().copyWith(
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        darkTheme: ThemeData.dark().copyWith(
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        themeMode: ThemeMode.light,
        initialRoute: '/settings', // 初始路由
        routes: {
          '/': (_) => HomeScreen(), // 主页
          '/counter': (_) => CounterScreen(), // 计数器页面
          '/settings': (_) => SettingsScreen(), // 设置页面
          for (var i = 0; i < 25; i++)
            '/screen_$i': (_) => _generateScreen(
                  title: Text('Screen$i'),
                  color: RandomColor(i).randomColor(),
                ),
        },
        onGenerateRoute: (settings) {
          return MaterialPageRoute(
            settings: settings,
            builder: (context) {
              if (settings.name == '/about') return AboutScreen(); // 关于页面
              return UnknownScreen(); // 未知页面
            },
          );
        },
      ),
    );
  }
}

// 生成屏幕的小部件
Widget _generateScreen({
  Text title,
  FloatingActionButton fab,
  Color color,
}) {
  return Builder(
    builder: (context) {
      final Map<String, dynamic> args =
          ModalRoute.of(context).settings.arguments;
      return Scaffold(
        appBar: AppBar(title: title),
        backgroundColor: color,
        body: args == null ? null : Center(child: Text(args.toString())),
        floatingActionButton: fab,
      );
    },
  );
}

// 主页
class HomeScreen extends StatelessWidget {
  const HomeScreen({Key key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    final _size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text(_size.toString()),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.info),
        onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(
            builder: (_) => SettingsScreen(),
          ));
        },
      ),
    );
  }
}

// 计数器页面
class CounterScreen extends StatefulWidget {
  const CounterScreen({Key key}) : super(key: key);

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

class _CounterScreenState extends State<CounterScreen> {
  int _counter = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Counter Example'),
      ),
      body: Center(
        child: Text('Counter: $_counter'),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          if (mounted)
            setState(() {
              _counter++;
            });
        },
      ),
    );
  }
}

// 设置页面
class SettingsScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Settings'),
      ),
      backgroundColor: Colors.blue.shade300,
    );
  }
}

// 关于页面
class AboutScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('About'),
      ),
      backgroundColor: Colors.purple.shade300,
    );
  }
}

// 未知页面
class UnknownScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('404'),
      ),
      backgroundColor: Colors.red.shade300,
    );
  }
}