Help, trying to port Ionic app to flutter

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.

here are screen shots from android phone

carousel for viewer data type (portrait mode)

carousel view for image data type (landscape mode)

add new for image data type (landscape)

file selection list dialog over add image type dialog (portrait)

top of viewer page in ionic angular

<ion-content (ionFocus)="focusChanged('focus')" ng-focus="focusChanged('focus')" (ionBlur)="focusChanged('blur')" style="max-height:93%"> 
<ion-slides [options]="slideOptions" id="loopSlider" #mySlider style="height:100%; display:block;">
  <ion-slide class="header" width="100%" style="height:100%; display:block; " >	
  <ion-header >			
 <ion-toolbar>
  <ion-row>
    <ion-col size="1">
			<button ion-button icon-only (click)="addeditClicked(1,getselectedRow('viewer'),'viewer',{true:'add',false:'edit'}[getselectedRow('viewer')<0])">
				<ion-icon    [name]="getselectedRow('viewer')==-1 ? 'ios-add':'ios-search'" ></ion-icon > 
			</button>					
		</ion-col>
		<ion-col size="10">Viewers</ion-col> 
	  <ion-col size="1">
			<button ion-button  icon-only (click)="menu()">
				<ion-icon [ios]="'ios-menu'" [md]="'md-menu'"></ion-icon> 
			</button>				
		</ion-col>		
	 </ion-row> 
</ion-toolbar>
 <ion-toolbar>  
	<ion-row>	
		<ion-col size="4" class=" center">Name</ion-col>
		<ion-col size="3" class=" center">Tags</ion-col>
		<ion-col size="2" class=" center">Advance</ion-col>
		<ion-col size="1" class=" center">Rate</ion-col>
		<ion-col size="2" class=" center">Active</ion-col>
	</ion-row>		
 </ion-toolbar> 
  </ion-header>
<ion-content  >   
  <ion-refresher slot="fixed" #refresherRef (ionRefresh)="doRefresh($event);">
    <ion-refresher-content 
      refreshingSpinner="circles"
      refreshingText="refreshing data, please wait">
    </ion-refresher-content>
 </ion-refresher > 
<!-- ion-grid style="back-ground-color:red; ion-grid-padding:0px;"  -->
	<ion-row  *ngFor="let viewer of data.Viewers;let i=index" 
			[ngClass]="{true:'selected',false:'not-selected'}[i ==  getselectedRow('viewer',viewer.Name)]"                        
			(dblTap)="addeditClicked(2,i,'viewer','edit')" nowrap
			(press)="deleterow(i,'viewer')"			 
			 >