Proper demo app with multiple use-cases

[daadu]

This will be a separate Flutter Project within this project (like: example) named demo. This app would be a like gallery app (https://gallery.flutter.dev) provided by Flutter to demonstrate all material and cupertino widget with code snippet embedded in itself.

Check the following screenshot from gallery app for Banner widget:

mobile	desktop [mobile view]	destop [full view]

Along with the demo itself it shows other options - info, code (with copy option), documentation, full screen (toggle the widget demo for mobile screen and full screen)

We should build similar demo flutter application that will be hosted on Github Pages for user to quickly check [#12]. It should demonstrate ideally all use cases of Backdrop as mentioned in MDG.

The example would just show simplest of the use-case. But in the starting of example.dart we should add link to demo so that users form pub.dev can check the demo easily.

[daadu]

Moved from: https://gitlab.com/daadu/backdrop/-/issues/13

[daadu]

@WieFel Let me know your views.

Self-assign it to yourself if you are interested in working on this!

[WieFel]

I will be working on this in the next time!

[WieFel]

I did some brainstorming and came up with the following:
My idea would be to implement the demo app using a side drawer from where the different use-cases can be opened:

The app opens with one default use-case already on the main screen. The action bar has two buttons, one for switching to the preview of the use-case and one for showing the source code. Another idea would be to use tabs instead of the two action-buttons...

I think implementing it exactly like the Flutter Gallery would be a bit too much. Actually they exactly use backdrop to switch between preview and source code. But I think it would be strange to use backdrop for that in our case, because backdrop already appears within the actual use-cases.

For the preview of the use-cases the following package could be used: https://pub.dev/packages/device_frame. This way, one could distinguish between the app bar of the demo app and the app bar of the use-case that is being previewed. However, I don't know if this is a good idea in the web-version of the demo app.

@daadu What do you think? Any other suggestions before I start to implement this?

[daadu]

I was thinking of a MainPage which List all the use cases. Upon clicking any one, we do Navigation.push with FloatingActionButton (which would not be in source code) on the DemoPage to go back to MainPage.

check the following layout of DemoPage:

• Mobile Demo in Full Screen
  

• Full Screen Demo in Full Screen
  

• Mobile Demo in Mobile Screen
  

I think on full screen it is clear about how to toggle between source code, info. For Mobile we can showDialogue for source code and info.

@WieFel Let me know if you have better idea.

[daadu]

Instead of FloatingActionButton AppBar - leading with back button (default) is also a good option.

Check the following:

I suggest we use same colour scheme as Gallery App. We could potentially make these feature as another independent package which enable other package developer/maintainer to publish GitHub pages show casing demo of their package. This new package could be taglined as - "Create Flutter Gallery like demo app for your package."

[WieFel]

@daadu ok LGTM, I will try to implement it as you described!

[WieFel]

@daadu Actually I have an idea:
What about forking the flutter gallery app and throwing out all not-needed stuff?

[daadu]

@WieFel Go Ahead.

[WieFel]

@daadu in the end, taking the complete gallery app seems to be overkill.
So I only take the theme from it.

In terms of use cases, I found the following 4 here:

1. Back layer provides contextual information about the front layer.
   -> any simple idea here? @daadu
2. Back layer displays contextual controls that relate to the front layer.
   -> e.g. back layer allows to set number of event participants for a participants-form filled out on the front layer and maybe some other controls.
3. Back layer content can be navigational, changing the content displayed on the front layer.
   -> example app for navigation can be used and extended. e.g. for navigating between 3 different pages that show some content.
4. Back layer content can filter front layer content.
   -> e.g. filter exemplary articles of an online shop by 2-3 different categories

@daadu any other suggestions/improvements?

[daadu]

@WieFel Your suggestions look ok to start with.