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:

	import 'package:flutter/material.dart';
	import 'package:gentelella_flutter/apps/home.dart';
	void main() => runApp(GentelellaAdmin());

view raw gentelella_main.dart hosted with ❤ by GitHub

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:

	import 'package:flutter/material.dart';
	import 'package:gentelella_flutter/widgets/ui/dashboard.dart';
	class GentelellaAdmin extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return MaterialApp(
	title: 'Gentelella Flutter Template',
	debugShowCheckedModeBanner: false,
	theme: ThemeData(
	fontFamily: 'Quicksand',
	//primarySwatch: Colors.purple,
	appBarTheme: AppBarTheme(
	color: Color(0xffEDEDED),
	),
	primaryTextTheme: TextTheme(
	title: TextStyle(
	color: Color(0xff73879C),
	fontWeight: FontWeight.bold,
	),
	)
	),
	home: DashboardWidget(),
	);
	}
	}

view raw gentelella_home_.dart hosted with ❤ by GitHub

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())

	class DashboardWidget extends StatefulWidget {
	@override
	_DashboardWidgetState createState() => _DashboardWidgetState();
	}
	class _DashboardWidgetState extends State<DashboardWidget> {
	int _currentPage = 0;
	final List<Widget> _pages = [
	HomePage(),
	ReceiptForm(),
	];

view raw dashboard_widget.dart hosted with ❤ by GitHub

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):

	return Row(
	children: <Widget>[
	Container(
	),
	Expanded(
	child: Scaffold(
	),
	),
	]
	),

view raw gentelella_layout.dart hosted with ❤ by GitHub

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:

	Container(
	color: Color(0xff2A3F54),
	width: 231,
	child:
	Drawer(
	child:
	Container(
	color: Color(0xff2A3F54),
	child: ListView(
	children: <Widget>[
	DrawerHeader(
	//padding: EdgeInsets.zero,
	padding: EdgeInsets.symmetric(vertical: 15.0, horizontal: 15.0),
	child: Column(
	children: <Widget>[
	Row(
	children: <Widget>[
	SizedBox(
	height: 130,
	),
	ClipRRect(
	borderRadius: BorderRadius.circular(25.0),
	child: Image.network(
	"https://colorlib.com/polygon/gentelella/images/img.jpg",
	width: 56,
	),
	),
	SizedBox(
	width: 20,
	),
	Flexible(
	child: Stack(
	children: <Widget>[
	Row(
	children: <Widget>[
	Text('Welcolme',
	style: TextStyle(
	fontSize: 13,
	color: Color(0xffBAB8B8))),
	],
	),
	Row(
	children: <Widget>[
	SizedBox(
	height: 48,
	),
	Text(
	'John Doe',
	style: TextStyle(
	fontWeight: FontWeight.bold,
	color: Color(0xffECF0F1)),
	),
	],
	)
	],
	),
	)
	],
	),
	],
	),
	decoration: BoxDecoration(
	color: Color(0xff2A3F54),
	),
	),
	ListTile(
	leading: const Icon(Icons.home, color: Color(0xffE7E7E7),),
	title: Text('Home', style: TextStyle(color: Color(0xffE7E7E7), fontSize: 14,),),
	onTap: () {
	// HomePage();
	setState(() {
	_currentPage = 0;
	});
	},
	),
	ListTile(
	leading: const Icon(Icons.person_add, color: Color(0xffE7E7E7)),
	title: Text('Add users',style: TextStyle(color: Color(0xffE7E7E7), fontSize: 14,) ),
	onTap: () {
	// HomePage();
	setState(() {
	_currentPage = 1;
	});
	},
	),
	],
	),
	),
	),
	),

view raw gentelella_sidebar_menu.dart hosted with ❤ by GitHub

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:

	Expanded(
	child: Scaffold(
	appBar: AppBar(
	automaticallyImplyLeading:
	MediaQuery.of(context).size.width < 600,
	title: Text('Gentelella Dashboard Template'),
	actions: <Widget>[IconButton(
	icon: const Icon(Icons.exit_to_app, color: Color(0xff2A3F54),),
	tooltip: 'Logout',
	onPressed: () {
	},
	),],
	),
	body: _pages[_currentPage],
	),
	),

view raw gentella_main_body.dart hosted with ❤ by GitHub

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:

	import 'package:flutter/material.dart';
	import 'package:gentelella_flutter/api/users_list_api.dart';
	import 'package:gentelella_flutter/models/users.dart';
	import 'dart:async';
	import 'dart:convert';
	class HomePage extends StatefulWidget {
	// name({Key key}) : super(key: key);
	@override
	_HomePageState createState() => _HomePageState();
	}
	class _HomePageState extends State<HomePage> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: SingleChildScrollView(child: Column(
	children: <Widget>[
	SizedBox(height: 10,),
	Text('Homepage'),
	SizedBox(height: 50,)
	],
	),
	),
	);
	}
	}

view raw principal.dart hosted with ❤ by GitHub

	import 'package:flutter/material.dart';
	import 'package:gentelella_flutter/widgets/forms/add_new_user.dart';
	class ReceiptForm extends StatefulWidget {
	ReceiptForm({Key key}) : super(key: key);
	@override
	_ReceiptFormState createState() => _ReceiptFormState();
	}
	class _ReceiptFormState extends State<ReceiptForm> {
	@override
	Widget build(BuildContext context) {
	return Scaffold(
	body: SingleChildScrollView(
	child:
	Column(
	children: <Widget>[
	Text('Add users page'),
	],
	),),
	);
	}
	}

view raw add_users.dart hosted with ❤ by GitHub

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