rodydavis / storyboard Goto Github PK

Flutter Storyboard

Home Page: https://rodydavis.github.io/storyboard/

License: MIT License

Kotlin 0.13% Swift 1.15% Objective-C 0.04% Dart 62.06% Makefile 5.90% C++ 19.51% C 2.33% HTML 1.12% Batchfile 1.41% Ruby 5.88% CMake 0.46%

flutter dart debugger-visualizer storyboards ui-design

storyboard's Introduction

storyboard

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

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

Examples

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.

storyboard's People

Contributors

Stargazers

Watchers

Forkers

onatcipli nash0x7e2 cpunion kranfix tchigher viveky259259 codegrue taipanbox arkarkyaw88 cbenhagen morristech softmarshmallow taroyuyu crackerboy maks putheng smitcham luiz158

storyboard's Issues

IDEA: Consider a way to present screens in different groups and lanes

This is just a suggestion for a new feature, but it would be useful to be able to group presented screens into different groups and lanes.

Basically a way to decided when to start a new row and also to show lane headers, maybe even headers within a lane, if you want to divide stuff on the same row in some cases too. Here is a quick mockup example:

The group and lane headers could have some default design, optionally a custom template widget could be provided for it.

Maybe this kind of layout could be done by providing some kind of heading and break "widgets" in desired order the customScreens lists. An option to hide initialRoute/home is then also needed so we do not get it shown first on a row of its own all the time. Naturally there are many ways of doing this, this was just an idea to build upon some already existing features that might be easy to extend to encompass the feature as well.

Overflow has been removed in Flutter master

See flutter/flutter#61366

I was not sure if you prefer to add the old Overflow enum to custom_stack.dart or to move everything to using clipBehaviour like in that change so I did not open a PR.

This results in build errors like this:

[+2140 ms] [+2138 ms] ../../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/custom_stack.dart:293:9: Error: Type 'Overflow' not found.
[        ] [   +1 ms]   final Overflow overflow;
[        ] [        ]         ^^^^^^^^
[        ] [        ] ../../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/custom_stack.dart:344:5: Error: Type 'Overflow' not found.
[        ] [        ]     Overflow overflow = Overflow.clip,
[        ] [        ]     ^^^^^^^^

Change customAppBar from AppBar to PreferredSizeWidget

The customAppBar property:

/// Override the default app bar of the storyboard
final AppBar customAppBar;

Should probably be a PreferredSizeWidget like in Scaffold:

/// An app bar to display at the top of the scaffold.
final PreferredSizeWidget customAppBar;

So that you can provide a totally custom app bar, instead of just an AppBar(). You can still give it an AppBar() when using PreferredSizeWidget, but also a totally custom version that implements PreferredSizeWidget itself.

Make StoryBoard and DevicePreview play nice together - [device_preview]

If you wrap your Material app in a DevicePreview (https://pub.dev/packages/device_preview) and then in a StoryBoard, the screens presented in the story board do not get the correct media size.

This happens also if the DevicePreview enabled property is set to false and StoryBoard is set true.

It would be great if DevicePreview and StoryBoard could play nicely together, at least when they are not enabled at the same time.

Issue with: StoryBoard() with empty children: [] and customLanes: [...]

When using StoryBoard() as a widget in a MaterialApp app with customLanes: [...] you often want children: [] to be empty as they are set via the customLanes: [...].
However, if children is empty, a lane is still drawn for it and it lane heading text "children" is written out, and actually on top of the first customLane.

Tested in version: 0.1.2+1

Can't install lib because of version conflict

$ flutter pub get
Running "flutter pub get" in lending...                         
Because flutter_storyboard >=0.1.5 depends on device_frame ^0.1.1 which depends on freezed_annotation ^0.7.1, flutter_storyboard >=0.1.5 requires freezed_annotation ^0.7.1.

So, because xx depends on both freezed_annotation ^0.12.0 and flutter_storyboard ^0.1.6, version solving failed.
pub get failed (1; So, because xx depends on both freezed_annotation ^0.12.0 and flutter_storyboard ^0.1.6, version solving failed.)
exit code 1

Ehancement: customLanes - Children cannot have a label

When using StoryBoard() and the customLanes, the children in a CustomLane cannot have a label!
Consider possibility to add a custom label text for each child.

When using StoryBoard.material() and wrapping a material app in it, each screen automatically get a nice label corresponding to the route by default. In customLanes there is no way to add a similar label even manually when defining the custom content of the lanes, by e.g. providing one for selected/all children in a CustomLane. Would be nice if this was possible.

Feature: Passing Route Arguments

Looks like a really cool package but having an issue with using it as it doesn't allow for passing test arguments to each route.

I have multiple routes the fetch arguments passed to the Route from the Navigator, so for those screens I don't get a good preview. It looks like each route is being built with a RouteSettings widget, so perhaps adding something like this would work?

Map<String, dynamic> routeArguments;

Then those could be used to match the route name in that Map, grab the arguments and pass them to the RouteSettings in flutter_storyboard.dart:267?

Storyboard() use in MaterialApp as widget, does not pick up theme

When using Storyboard() in a MaterialApp as a widget, like in example "complete_custom_lanes_builder.dart", it does not pick up the theme of the MaterialApp it is used in.

Tested in version: 0.1.2+1

Compiler type errors

Hi, I added the package to a brand new Flutter project and get these errors when building:

Compiler message:
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:120:13: Error: Expected 0 type arguments.
  Map<Type, Action<Intent>> get actions {
            ^
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:121:51: Error: A value of type 'Map<LocalKey, Action Function()>' can't be assigned to a variable of type 'Map<Type, invalid-type>'.
 - 'Map' is from 'dart:core'.
 - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../../dev/flutter/packages/flutter/lib/src/foundation/key.dart').
 - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../../dev/flutter/packages/flutter/lib/src/widgets/actions.dart').
 - 'Type' is from 'dart:core'.
    if (widget.materialApp != null) return widget.materialApp?.actions;
                                                  ^
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:122:50: Error: A value of type 'Map<LocalKey, Action Function()>' can't be assigned to a variable of type 'Map<Type, invalid-type>'.
 - 'Map' is from 'dart:core'.
 - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../../dev/flutter/packages/flutter/lib/src/foundation/key.dart').
 - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../../dev/flutter/packages/flutter/lib/src/widgets/actions.dart').
 - 'Type' is from 'dart:core'.
    if (widget.widgetsApp != null) return widget.widgetsApp?.actions;
                                                 ^
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:123:52: Error: A value of type 'Map<LocalKey, Action Function()>' can't be assigned to a variable of type 'Map<Type, invalid-type>'.
 - 'Map' is from 'dart:core'.
 - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../../dev/flutter/packages/flutter/lib/src/foundation/key.dart').
 - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../../dev/flutter/packages/flutter/lib/src/widgets/actions.dart').
 - 'Type' is from 'dart:core'.
    if (widget.cupertinoApp != null) return widget.cupertinoApp?.actions;
                                                   ^
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:179:18: Error: The argument type 'Map<Type, invalid-type>' can't be assigned to the parameter type 'Map<LocalKey, Action Function()>'.
 - 'Map' is from 'dart:core'.
 - 'Type' is from 'dart:core'.
 - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../../dev/flutter/packages/flutter/lib/src/foundation/key.dart').
 - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../../dev/flutter/packages/flutter/lib/src/widgets/actions.dart').
        actions: actions,
                 ^
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:209:18: Error: The argument type 'Map<Type, invalid-type>' can't be assigned to the parameter type 'Map<LocalKey, Action Function()>'.
 - 'Map' is from 'dart:core'.
 - 'Type' is from 'dart:core'.
 - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../../dev/flutter/packages/flutter/lib/src/foundation/key.dart').
 - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../../dev/flutter/packages/flutter/lib/src/widgets/actions.dart').
        actions: actions,
                 ^
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:236:18: Error: The argument type 'Map<Type, invalid-type>' can't be assigned to the parameter type 'Map<LocalKey, Action Function()>'.
 - 'Map' is from 'dart:core'.
 - 'Type' is from 'dart:core'.
 - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../../dev/flutter/packages/flutter/lib/src/foundation/key.dart').
 - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../../dev/flutter/packages/flutter/lib/src/widgets/actions.dart').
        actions: actions,
                 ^
../../.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.1.6/lib/src/nested_app.dart:262:18: Error: The argument type 'Map<Type, invalid-type>' can't be assigned to the parameter type 'Map<LocalKey, Action Function()>'.
 - 'Map' is from 'dart:core'.
 - 'Type' is from 'dart:core'.
 - 'LocalKey' is from 'package:flutter/src/foundation/key.dart' ('../../dev/flutter/packages/flutter/lib/src/foundation/key.dart').
 - 'Action' is from 'package:flutter/src/widgets/actions.dart' ('../../dev/flutter/packages/flutter/lib/src/widgets/actions.dart').
        actions: actions,
                 ^

This seems... weird. My initial thought was there's something up with my Flutter install, but I've repaired it and tried the beta channel with no luck.

Flutter doctor output seems okay...

[✓] Flutter (Channel stable, v1.17.5, on Mac OS X 10.15.5 19F101, locale en-GB)
    • Flutter version 1.17.5 at /Users/tom/dev/flutter
    • Framework revision 8af6b2f038 (7 days ago), 2020-06-30 12:53:55 -0700
    • Engine revision ee76268252
    • Dart version 2.8.4


[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at /Users/tom/Library/Android/sdk
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = /Users/tom/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.5, Build version 11E608c
    • CocoaPods version 1.9.1

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.46.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.1

[✓] Connected device (1 available)
    • iPad Pro (12.9-inch) (4th generation) • 387D6D2C-B752-4CBA-BB2E-14C69420A7E9 • ios •
      com.apple.CoreSimulator.SimRuntime.iOS-13-5 (simulator)

• No issues found!

...any ideas? Thank you :-)

Error when deploying

Compiler message:
../../../flutter/.pub-cache/hosted/pub.dartlang.org/flutter_storyboard-0.0.1/lib/flutter_storyboard.dart:187:21: Error: No named parameter with the name 'onGenerateInitialRoutes'.
                    onGenerateInitialRoutes: base.onGenerateInitialRoutes,
                    ^^^^^^^^^^^^^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/material/app.dart:165:9: Context: Found this candidate, but the arguments don't match.
  const MaterialApp({
        ^^^^^^^^^^^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
Failed to build bundle.
Error launching application on iPhone 11 Pro Max.

Code

StoryBoard(
            child: MaterialApp(
          debugShowCheckedModeBanner: false,
          title: "App",
          theme: Styles.lightTheme,
          onGenerateRoute: Navigation.router.generator,
        ))

Flutter doctor


Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4
    19E287, locale en-CA)
 
[✓] Android toolchain - develop for Android devices (Android SDK 
    version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
[✓] Android Studio (version 3.6)
[✓] Android Studio (version 3.6)
[!] IntelliJ IDEA Ultimate Edition (version 2020.1)
    ✗ Flutter plugin not installed; this adds Flutter specific
      functionality.
    ✗ Dart plugin not installed; this adds Dart specific
      functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2020.1.1 Preview)
    ✗ Flutter plugin not installed; this adds Flutter specific
      functionality.
    ✗ Dart plugin not installed; this adds Dart specific
      functionality.
[✓] VS Code (version 1.44.2)
[✓] Connected device (2 available)

! Doctor found issues in 2 categories.

About memory management and experience issues?

Rendering consumes resources, is there a way to manage resources? This way, the use of page interaction is very stuck and the experience is very poor! ! ! !

Join forces with dashbook?

Let's make one great flutter dev-tool instead of many!

Hi! first of all, I want to say that I really appreciate the works in this open-source project, I installed it and all other similar packages, and I think it can be great if the work is unified into a single tool which can become popular and a standard for flutter development.

I will list all the projects that I found here:

These 3 have the same goal, a storybookjs inspired package to showcase flutter widgets.

But there are also these projects that if combined with a flutter storybook, can really become a standard tool for every flutter developer:

https://github.com/jamesblasco/flutter_preview (preview any widget in vs code)
https://github.com/aloisdeniel/flutter_device_preview (emulate any device size)
https://github.com/rodydavis/storyboard (see all routes at once)

I am pasting this same issue to all of these projects, if you don't want it, feel free to close it :D

Tell me what you think!

DarkMode: Consider some border around the screens

In light theme mode the elevation of the screens works well on the presentation canvas:

However, in dark mode the screens may become a bit too "embedded" with the canvas background:

Especially in a "true black" mode:

SOLUTION PROPOSAL 1:

Add optional separate border styles for the light/dark theme that can be provided/turned on, if so desired.

SOLUTION PROPOSAL 2:

Provide color properties where user can specify background colors for the light and and dark theme modes, for the background canvas that presents the screens.
This would allow users to specify a background color for the presentation canvas in light and/or dark modes, that are different from the canvas background color used in the theme for the application itself. It then becomes possible to use light/dark background colors that are slightly different from light/dark colors used in the presented application. It of course also allows for totally custom silly background colors of course, which could also be useful in some cases.

Options 1 and 2 are of course not mutually exclusive, they could both be useful alternatives individually or together.

Couple of Bugs I found

Wonderfull package.

Understanding that this package is still in its infancy, just sharing a couple of bugs I encountered.

Responsive pages are breaking, as the Mediaquery isnt adhering the size from the screenSize property of the Storyboard package, I think that the size given in the screenSize property should override all the mediaquery calls.

Broken themeMode property of MaterialApp, causing darkmode/lightmode switching to not work
Storyboard Behaviour

Expected Behaviour

Expose properties for the built-in app bar

To reduce the need to frequently be forced to build an entirely new custom app bar, when using the Storyboard() within a material app as a widget, also consider exposing some of properties for the built in app bar, like:

Widget title
double elevation
Color backgroundColor

To allow for complete custom themeing of the built in appbar also consider exposing:

IconThemeData iconTheme
IconThemeData actionsIconTheme
TextTheme textTheme
Brightness brightness

Alternatively, for using a custom app bar, consider showing an example that implements a custom app bar, with re-implementation of the controls on the built in one. I had a quick look at this as an alternative to get it themed the way I wanted that way. While I could get it themed the way I wanted it to look, by making a completely custom one, I could not figure out how to re-implement the controls of the built-in appbar, so that they would actually work in the custom appbar as well. Is this supported? How?

Reset scaling and offset is reset to coded defaults

When you use the reset button to reset the view port settings, it resets to the "hard coded" defaults. It would be nice if it would reset to value(s) that were provided in the widget constructor first, for scaling and offset, and only if such values where not provided in the constructor, would it reset to hard coded defaults.

Issue: Built in AppBar click on scale resets to hard coded default

The reset button in the built in app bar now nicely does this:

updateScale(widget?.initialScale ?? 0.75, true);

but the InkWell onTap on discplayed scale does:

updateScale(0.75, true),

change it to:

updateScale(widget?.initialScale ?? 0.75, true),

as well.

Changing constructor values for initialScale or initialOffset does not trigger a rebuild

StoryBoard version 0.1.3

If the constructor values initialScale or initialOffset are modified, a rebuild of Storyboard() is not triggered.

Consider adding:

    if (oldWidget.initialScale != widget.initialScale) {
      updateScale(widget.initialScale, true);
    }
    if (oldWidget.initialOffset != widget.initialOffset) {
      updateOffset(widget.initialOffset, true);
    }

void didUpdateWidget(StoryBoard oldWidget) {...}

About mobile pages

Sometimes you need to compare two mobile phones (model comparison, interactive comparison, page comparison) to check the effect of the widget, so can you make the page moveable, mobile viewing, convenient for discussion and intuitiveness.

___Personally think this storyboard is very powerful.Come on and improve

Dialogs show up in the StoryBoard "host" window

When an app screen in a story board show a dialog, it shows up in the story boards "host" canvas and is not constrained to the "screen" it originated from. This might or might not be a desirable feature, mostly it is probably not desired if you are presenting a mobile app UI:

Storyboard() use in MaterialApp as widget, does not use size

When using Storyboard() in a MaterialApp as a widget, like in example "complete_custom_lanes_builder.dart", it does not pick up the size set for the screens in storyboard, they get the size of the host app.

Tested in version: 0.1.2+1

Add device frames - [device_preview]

Wild idea for a new feature, add an option to show/select different device frames around the presented screens.

Maybe code for the device frames could be borrowed from DevicePreview.(https://pub.dev/packages/device_preview)

rodydavis / storyboard Goto Github PK

storyboard's Introduction

storyboard

Examples

Getting Started

Custom Routes and Widgets

Misc

storyboard's People

Contributors

Stargazers

Watchers

Forkers

storyboard's Issues

Recommend Projects

Recommend Topics

Recommend Org