Create a Responsive Admin Template for Flutter

Flutter is an open-source UI software development kit created by Google that lets you create Android/iOS apps, as well as Web applications. If you want to create a web application, Flutter already offers some starter apps, however its source code is not actually easy to follow for beginners. Well, I wanted to use the Responsive Layout Starter app, but to use it I had to major code refactoring, which was a letdown. That's why I decided to create a Responsive Admin Template for Flutter

Overview

The design selected for the template is the Gentelella Admin Dashboard Template by ColorlibHQ:

I settled for this design because is the one I always use for my Symfony projects for its clean design, and also because I already made a port for the elgg framework. Yeah, I really like this design.

Getting Started:

1. Start Visual Studio Code. Go to menu “View -> Command Palette” and select the  “Flutter: New Project” option:

2. Open the main.dart file, remove everything and use this code:
3.Create a folder apps and make a home.dart file:

4. Open the home.dart file. We will define the AppBar background color, the text color, and also we will be defining the home content, which will see soon:
5. Now, create a widgets folder, an inside it create two more folders: screens and ui:

6. Inside the ui folder, create a dashboard.dart file. Create a stateful widget, and create two variables:

_currentPage: An int variable that will hold the page index
_pages: List widget variable which will hold the pages of the app (Homepage() and ReceiptForm())

7. To accomplish the same look as the Gentelella Admin Template, the first thing that we need to work on is how to display both the sidebar and content in the same line. For that, we are going to return a row, and inside the row we will be having as Children a Container class (for the sidebar) and a Expanded Class (for the AppBar and the page content):
8. Inside the Container class, we will add the Drawer because we need to define the sidebar color and also the width. The drawer will contain the DrawerHeader with the user information, and also a ListTile with links to each page that our app will have, which will set/change the index of the _currentPage variable:
9. The Expanded Class will have the AppBar with some action icons, and also the body of the page, which will change every time you click on a menu link:
10. Now, in the screens folder, create two files: add_users.dart and also principal.dart which will be the pages of our web app. Both are very simple, with the main difference the body of each one will hold its content inside a SingleChildScrollView class:

11. And that's it! We just created a responsive admin dashboard for Flutter:

Grab the source code here: Gentelella Flutter

You can also see it in action here: Flutter Responsive Demo