SO, I have this application that displays images, based on calendar entry text…
it has 4 data components…
the ‘viewer’ ( how often, active or not, the 'tag of the text to look for in the cal entries)
the tags. arbitrary text ids Mom, dad, Granson, christmas…whatever
a data SOURCE, file system, dropbox, google drive, one drive, … (and the root path of that source, some folder)
then the images to show, a file wildcard (from a source< or a list of image filenames.
all works great… this config data is in a mongo database
of course configuring it is a pain in the rear
enter the ionic App…
it is 4 Angular web pages, in a carousel, one page for each data type. (ionic slide, in a slider)
there is a common header… data type, column headers, and push buttons to add an element or that type, or edit one, locked at the top of the screen, .
below the header are ‘rows’ for the data items…
at the bottom of the page are carousel navigation entries back and forward. locked at the bottom if the ‘screen’, a footer
if there are more data rows than space between the header and footer, the data rows are vertically scrollable. the horizontal size is fixed, but, change with device orientation.
there are operations available on the rows, with click to select and PRESS to delete.
if the add/edit button (in the header) is pressed then a dialog pops up over the current page, with a data entry panel for this data type. some fields are single selection lists, some are entry fields, some check boxes.
if its a type that supports files, then there is a source single selection list and pressing on the file name filed brings up ANOTHER dialog over the 1st, with the list of files from that source and path. and u can navigate down and back in the file tree. select and press save to pass this back to the prior dialog., and then save to clear the 1st dialog and push the data to the database, which causes a notice to the app that its config has changed…all on the fly.
one more feature is app server discovery, which uses UDP to broadcast to a server, and get its resource api root url back. this is the initial page , once discovery is complete, the carousel is displayed. (you can save the server address and skip discovery, and u can also delete the saved address and start discovery on next startup)…
now… the ‘app’ code doesn’t really know anything about the UI design or implementation.
the code gets back and array of items, and the agnular html does ngFor to generate the data rows. the buttons cause clicks, and the dialogs have a few fields.
from what I can tell of flutter, i summarize the approach this way… like some other ui tools, I need to know the EXACT contents in the sausage before I can make dinner.
there are a lot of widgets, but they are really raw… i ‘think’ because I want to be responsive to orientation, I need some ‘material’ app. today I have a container, with the carousel, a carousel page, a container, a header with three toolbar rows, (buttons, title, headers), the content grid, and then a footer, with a row of buttons, (back and next)
there are 4 of these carousel pages
how do I figure out the layout of the pages in flutter widgets? it seems overwhelming to try to learn and distinguish all the myriad parts. oh, i made a carousel demo app, but it uses a non-native widget, and only displays a different image per page, with auto navigation.
