In this episode of Flutter Thursday, we would make a banking account Ui taken from Dribble.

Getting started

Let’s start by creating a new flutter project

flutter create banking_app_account_ui cd banking_app_account_ui

We begin by getting rid of the content inside main.dart file, then include the code below:

We started by importing material.dart and app_drawer.dart. The app_drawer.dart will contain the side drawer. Create and save the files inside the lib folder. The runApp() function inflates MyApp widget and attaches it to the screen for display.

Thereafter we defined some properties for the materialApp(), this is pretty the flutter way of getting started. Home specifies widget for the default route of the application in this case Home(). Home is a stateful widget that returns a Scaffold widget. ThemeData defines the theme of your application, inside you can specify the color, font and text theme etc.

We also added an AppBar, set the color theme to blue, background color to white, centered the title, set the elevation to zero and added the search icon.

Next, open the app_drawer.dart file and insert the following:

The AppDrawer widget simply returns a SixedBox() with a width of 160.0 and a Drawer child for now.

Test

Now is a good time to test the app. Open your terminal and execute the following:

flutter run

App display so far

The Top Section

Next, let’s focus on the body of the app. We will create the top section, the side drawer, refresh icon section, account items and finally bottom section in that order. The top area refers to this section:

Create a method topArea() that returns a Card as shown below

Above, we set the margin of the card, defined the shape as RoundedRectangleBordeer with a radius 50.0 and also added a child container with a gradient. The container has Column widget which contains two children: a Row and Container widgets for the arrow and amount respectively. The Row widget contains three children with MainsAlignment.spaceBetween value to properly space each widget

Then add the following code to the body of the Scaffold

Save your changes and hit reload, you should see the following changes

The side drawer

Next is the side drawer. Open app_drawer.dart file and apply the following changes. The explanation follows thereafter

The AppDrawer widget returns a SizedBox widget with a width of 160.0. and in turn, returns the Drawer widget. We want to list the items vertically, the Column widget comes handy for this. Set crossAxisAlignment to center, to align the children at the center.

The first child is the back arrow button, in this case, we will make use of FlatButton.icon. the following code defines it

This is a padding widget with a child FlatButton.icon. The FlatButton.icon widget takes an icon, label, and the mandatory onPressed() method. We applied Color(0xFF015FFF) to the icon and Colors.black to the text as specified on the design.

Next are the remaining menu items. They basically the same except the active menu item. We will use Opacity widget to differentiate them. The active menu item will have an opacity value of 1.0 while others will default 0.3. Hence create a method that will take the following parameters: IconData, title, color and opacity value (the last two are optional named parameters with default values) and it will return the Opacity widget. Below is to define and use said buildMenuItem Metho

# Method defination Opacity buildMenuItem(IconData icon, String title, {double opacity = 0.3, Color color = Colors.black})

# method call for active menu item buildMenuItem(Icons.account_balance, "ACCOUNTS", opacity: 1.0, color: Color(0xFF015FFF)), # method call for non active menu items buildMenuItem(Icons.compare_arrows, "TRANSFER")

Above we used the Center widget to place the children at the middle. Then it takes Column with following children: SizedBox() for the vertical spacing between each widget, Icon and Text widget for the Menu Item title. For the none active menu items, we will ignore the opacity and color properties. The Divider() insert the separation line.

Finally, we implemented each menu item calls as shown below

Save the changes and then reload the app

The side drawer

The refresh section

This is pretty easy. We add a SizexBox widget with an Icon child. Set the appropriate height, size, and color.

The refresh section

The body

Add a method displayAccountList() the returns a container. The container will have a child Column with a list of Children: accountItems.

accountItems Container takes background color or defaults to white, item, charge and a dateString as parameters. The container has the padding value of EdgeInsets.only(top: 20.0, bottom: 20.0, left: 5.0, right: 5.0) and a child Column. The child column has three children widget: two Row and a SizedBox() widgets.

For each of the Row widgets, the mainAxisAlignment is set to MainAxisAlignment.spaceBetween

Save the changes and reload the application

The bottom section

Finally, the bottom sections. We will use a bottomNavigationBar property of the Scaffold widget and set it BottomAppBar(). Set the elevation to 0.0 and vertical padding for the container. The Container will take a Row widget child with the three buttons.

For each button, we set the shape to RoundedRectangleBorder() with borderRadius of BorderRadius.circular(0.0).

Save the changes and refresh You should get a view similar to the screen below:

The bottom section without the side drawer

App with opened side drawer

You can find the source code on GitHub: https://github.com/shubie/banking_app_account_ui

Thank you for reading this far. Let me know if you find errors, typos or better ways to do this. You can hit me up on Twitter @afegbuas

Keep fluttery and keep the claps coming