Proper demo app with multiple use-cases about backdrop HOT 11 CLOSED

@WieFel Let me know your views.

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

from backdrop.

I will be working on this in the next time!

from backdrop.

@WieFel Your suggestions look ok to start with.

from backdrop.

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

from backdrop.

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?

from backdrop.

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.

from backdrop.

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."

from backdrop.

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

from backdrop.

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

from backdrop.

@WieFel Go Ahead.

from backdrop.

@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?

from backdrop.