Need help with storyboard?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

rodydavis
195 Stars 16 Forks MIT License 51 Commits 6 Opened issues

Description

Flutter Storyboard

Services available

!
?

Need anything else?

Contributors list

# 35,056
Flutter
Dart
Kotlin
gmail
41 commits
# 22,048
Dart
Flutter
HTML
bloc
2 commits
# 111,003
Shell
Dart
Flutter
Less
1 commit

Buy Me A Coffee Donate github pages GitHub stars flutter_storyboard

storyboard

A Flutter Debug tool to see and test all your screens at once.

Online Demo: https://rodydavis.github.io/storyboard/

screenshot

Examples

Custom Lane Builder

Dynamic Screen Sizes

Material App Example

Widget Example

Multiple Custom Lanes Example

Getting Started

Wrap your MaterialApp with 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(),
        },
      ),
    );

Wrap your WidgetsApp with Storyboard.widgets(). Wrap your CupertinoApp with Storyboard.cupertino().

Custom Routes and Widgets

You can add any number of custom widgets to the canvas, including custom routes. You can add dummy data to the constructors here as it will render all default values.

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

Misc

Now you can test all your screens with a hot reload! You can also disable the widget at any time by setting

enabled
to false. You will need to do a hot restart after you change this value.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.