Updated Gentelella Admin Dashboard for Flutter

 On a previous post, I created an administration dashboard with Flutter using the Gentelella Admin Template as inspiration for the design. However, it wasn't responsive and the routing was badly made. In order to fix those things, instead of creating things from scratch, I grabbed the following code:

https://github.com/MaikuB/responsive_navigationdrawer_demo

I'm just going to explain the few modifications that I did, since the original author of the project explains everything in his blog:

https://dexterx.dev/creating-a-responsive-flutter-application-with-a-navigation-drawer/

After downloading the project, I made some slight color and font modifications:

theme: ThemeData(
textTheme: TextTheme(
subtitle1: TextStyle(
color: Color(0xffE7E7E7),
fontSize: 14,
)),
iconTheme:
new IconThemeData(color: Colors.black, opacity: 1.0, size: 30.0),
fontFamily: 'Quicksand',
appBarTheme: AppBarTheme(
color: Color(0xffEDEDED),
),
primaryTextTheme: TextTheme(
title: TextStyle(
color: Color(0xff73879C),
fontWeight: FontWeight.bold,
),
),
// primaryColor: Color(0xff2A3F54),
pageTransitionsTheme: PageTransitionsTheme(
// makes all platforms that can run Flutter apps display routes without any animation
builders: Map<TargetPlatform,
_InanimatePageTransitionsBuilder>.fromIterable(
TargetPlatform.values.toList(),
key: (dynamic k) => k,
value: (dynamic _) => const _InanimatePageTransitionsBuilder()),
),
),
view raw main_theme.dart hosted with ❤ by GitHub


In the app_drawer.dart, I changed the custom drawer header that it had, with the one from the previous version of the gentelella theme:

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


I also wrapped the Drawer inside a Container because I needed to change from the original color to one that matched the Gentelella theme:

return Container(
color: Color(0xff2A3F54),
child: Drawer(
....
),
);


In each page, a content box was added, replacing the Text() widget from the original project, so that you can start building your own app with this template. This content box is the same from the previous Gentelella project:

return AppScaffold(
pageTitle: PageTitles.home,
body: SingleChildScrollView(
child: Container(
color: Color(0xffF5F6F5),
child: Column(
children: <Widget>[
SizedBox(
height: 10,
),
Container(
width: double.infinity,
margin:
EdgeInsets.symmetric(vertical: 20.0, horizontal: 26.0),
child: Column(children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
color: Color(0xffffffff),
padding: EdgeInsets.symmetric(
vertical: 30.0, horizontal: 30.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Homepage',
style: TextStyle(
color: Color(0xff313945),
fontSize: 14.08,
fontWeight: FontWeight.w200),
),
Divider(),
Text(
'Use this page to add custom content',
style: TextStyle(
color: Color(0xff313945),
fontSize: 12.0,
fontWeight: FontWeight.w100),
),
SizedBox(
height: 28.0,
),
],
),
)
]),
)
],
),
),
));


I created a copy of one of the pages, and renamed to "forms_page.dart". It has a stateful Widget, and also several forms fields, including a datepicker. Since this page is going to have text fields, the keyboard needs to go away when the user taps anywhere on the page. So, let's wrap the SingleChildScrollView in a GestureDetector, and call the FocusScope.of method to hide the soft keyboard:

new GestureDetector(
onTap: () {
// call this method here to hide soft keyboard
FocusScope.of(context).requestFocus(new FocusNode());
},
child: SingleChildScrollView(
...
),
);


Inside the content box, I added a two textfields: One for the first name, and another one for the last name:

TextField(
style:
TextStyle(color: Color(0xff313945)),
decoration: InputDecoration(
labelText: 'First Name *',
prefixIcon: Icon(Icons.person_add)),
),
SizedBox(
height: 28,
),
TextField(
style:
TextStyle(color: Color(0xff313945)),
decoration: InputDecoration(
labelText: 'Last Name *',
prefixIcon: Icon(Icons.person)),
),
SizedBox(
height: 28,
),


Now onto the datepicker, I used a simple approach nothing fancy since I just want to let the user pick his birthday. Create a DateTime variable, a function to show the datepicker (with initial and last date), and added a text controller to set the date picked:

DateTime selectedDate = DateTime.now();
var birthdate = TextEditingController();
Future<Null> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: selectedDate,
firstDate: DateTime(1940, 8),
lastDate: DateTime(2101));
if (picked != null && picked != selectedDate)
setState(() {
selectedDate = picked;
birthdate.text = selectedDate.toIso8601String().split('T')[0];
});
}

Then, since I wanted to keep the "Gentelella" look, I wrapped a TextField inside a Gesture Detector to display the DatePicker when the user taps on the field:

GestureDetector(
onTap: () => _selectDate(context),
child: AbsorbPointer(
child: TextField(
style: TextStyle(
color: Color(0xff313945)),
controller: birthdate,
decoration: InputDecoration(
labelText: 'Date Of Birth *',
prefixIcon: Icon(Icons.cake)),
),
),
),

And that's it! Our form is ready to be used!

This concludes the Updated Gentelella Admin Dashboard for Flutter.

Get the code here: https://github.com/rjcalifornia/flutter_gentelella

Demo: http://development.milocker.com/gentelella/

(Just click on the sign in button)


No comments

Powered by Blogger.