Creating Multi Cloud Mobile app clone in FlutterAjay SinghBlockedUnblockFollowFollowingJan 2In this short tutorial we are going to learn how to create a Multi Cloud Connecting Mobile UI using Flutter which should look like the bottom screenshotsBottom Navigation BarCreating Bottom Navigation Bar is straightforward we are going to use Material Scaffold widget which provides out of box property bottomNavigationBar which expects a widget, we are going to use BottomAppBar as BottomNavigationBarAs you see in above picture we are using BottomAppBar , the circular shape in the center of the AppBar is made possible with shape property being CircularNotchedRectangle widget passing notch margin of 4FloatingActionButtonWe are using Floating action button as part of scaffold widget which will navigate us to the new screen on tap , the property which makes it possible to embed the floating action button inside the AppBar is floatingActionButtonLocation which we have set to FloatingActionButtonlocation.
centerDocked, you can try to play around with number of other enums available in FloatingActionButtonlocation other then centerDocked, so adding the whole code in picture will make it look like the app bar in original screenshots.
BodyThe Scaffold widget body is a list view with children being a Column with many children widget which we are going to discuss one by oneFrequently Connected To SectionThis is the bottom most section of the page if you see in the first screenshot of the page we are going to use following widgets to create this layoutPaddingContainerListViewRowSo if we see the section in the original picture it is a horizontal scroll list with fixed height container boxes so we are going to wrap a ListView within a container widget with some fixed height (Fixed px i have put random 185) so the code should look like this so if you see we are wrapping ListView inside the container widget of fixed height 185 and adding 3 cards to the horizontal scroll list which we are going explain in bottomfrequentCard is a function takes image name and title which returns a widgetFrequent widget is Container widget with fixed width of 200 as show in sample code above.
Container uses a BoxDecoration with border radius of 8 pt and grey Color so it looks like a card with grey border, the child of container being Column Widget which arranges our card elements in vertical direction the first child of column widget being Image Widget which is being used as Image.
assset(asset, height:40), the next child being TextWidget which displays the name of the cloud service which used standard TextWidget , the next child being Row Widget which displays the count of existing services and locations the main AxisAlignment is set as MainAxisAligment.
center so the child widgets are centered horizontally , the row widget have two column widgets which display the services count and locations count detail code is shown in attached screenshot , the last child being button looking connect widget which is actually a container widget with BoxDecoration you can also wrap the widget inside InkWell widget to give ripple effect on click , so by end of this section you should have horizontal scrolling FrequentCards.
The detailed code is in above screenshot and Gist file which I going to copy at the end of article.
Recent Connections SectionRecentConnection sectioned is formed of Vertically scrolling Material Card Widgets provided by flutter out of box , we are are going to leverage this card widget to build this sectionSo as you see in the above image we are using ItemCard widget passing the service name and status of connection itemCard is a function which returns a ItemCard WidgetItem Card is a Card with many child widgets placed inside the Column widget with sample code listed in above screenshots and something like this Card(child: Column(mainAxisSize: MainAxisSize.
min, the first child of column being a Row with a child one column which displays the service name and the status of the connection , if you are putting a column inside a row widget and do not set crossAxisAlignment the alignment will default to the center of the column widget so if you want to start from the beginning please set CrossAxisAlignment.
start on the column widget , the next child being a Row Widget with three child beingContainerExpandedRow WidgetContainer widget wraps another row widget with first child being Image.
Asset widget displaying the server image and other child being a Column displaying text like California and origin.
Expanded widget is used so it takes the remaining space which is left after using the first and third widget, A container widget has a fixed height of 6pt shown in blue colour shows like a connection from source to destination.
The Last child in the Card being a ButtonTheme.
Bar with two buttons Accept and Delete .
So using above code you should see Recent Connections like section in the first two main screenshotsAll Connections SectionAll connections section is almost similar to the Frequently Connected section since this is also a horizontal scrolling list of Cards , here to draw cards I have used standard Material Widget with elevation 2 instead of putting box decoration and shadow on the container container objectTop SectionThe topmost and final section being the Yellow Colour section which displays welcome messages and list of cloud providers you would like to connectThe top section being a Stack widget with first child being a container of height 180 with background colour as yellow, the second child being a Column widgets which displays the text and the last widget being a Container widget with fixed height and box decoration setting border radius and background colour.
The child of containers being a Row widget with MainAxisAlignment.
spaceEvenly and the child of row widget are three container widget with fixed height of 75 and width of MediaQuery.
of(context).
size.
width / 4.
These container use column widget as children using Image widget and Text widget and there direct childSo at the end I would like to say flutter is very powerful for building prototypes and real apps using Widget Composition and Most of the complex layouts can be build using the out of box widgets present in flutterThe full source can be found in the gistDisclaimer: All Icons are picked up from Icons8.
com and this is just for learning layout purpose and should not be used for any commercial purpose and it does not relate to any company work or actual real word app.
.