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:

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:

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

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:

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:

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

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:

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:

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