Thinking & coding: the Custom Navigation icons

Starting is always difficult because I am out of my think rhythm. Those older brains need to heat up for a while. A glass of wine sometimes helps ;-)

Icons

Today I want to bring the icons, which I used in my Figma prototype (which you can find here), into my project. You can find what I programmed last time here.

Since I actually had no idea how to get started, I started searching on Youtube. And there I got a very clear explanation via the channel of Reso Coder. The link to the corresponding video can be found at the bottom in the thank you section.

I can therefore export my icons from Figma as SVG. Then I can have them mapped via the website Fluttericons.com for use in Flutter. A wonderful tool, especially for large libraries of icons. But it did'nt work for my icons that i exported out of Figma. I have no idea why. For the moment i used standard material icons.

Background image

I exported the background of my prototype(Figma) to my project.  I got my background in as a png. For the moment i have put the background image in a container, within an Expanded Widget. To be sure that i have the complete second half of the Row() to my disposal. To fit in the background image i used the Boxfit.cover.

Now i have to figure out what widget i will use to hold the screens. So if i navigate i will get a new screen.

The theory sounds always clear, but a small mistake can take hours. Especially for a Newbie like me. I have a lot of problems to understand the errormessages i get in the IDE.

New screen

I have created a new "screens" map in the project tree. And in it a new folder for my first screen, the navigation screen.

Now I start building the first screen. Since I am working with a background in this screen, I have chosen to place the Scaffold() as a child in a Container(). Now I can put my background image in the container, and make the background color of the Scaffold() transparent. Now I have a Scaffold () for my navigation screen with a background. De background of the container is changed to white. Maybe I need to change this, but we will see if problems arise.

The last thing i did this code session is to bring my background code, from the container in the homescreen, over to the new navigation screen. Et Voila!

Im happy to read your comments. CU in the next post!

Do, believe and be happy,

Stefaan

A big thank you to:

Flutter Explained and the community.

Reso Coder    https://www.youtube.com/watch?v=qZYqmM3daO0&t=173s

Fluttericons.com

Figma

hilite.me

The Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

import 'package:flutter/material.dart'; import 'package:my_first_production/screens/navigation_screen.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } class HomeScreen extends StatefulWidget { HomeScreen({Key key}) : super(key: key); @override _HomeScreenState createState() => _HomeScreenState(); } class _HomeScreenState extends State<HomeScreen> { int selectedIndex = 0; @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ NavigationRail( onDestinationSelected: (newIndex) { setState(() { selectedIndex = newIndex; }); }, elevation: 1, backgroundColor: Colors.green[100], groupAlignment: 0, selectedIndex: selectedIndex, destinations: [ NavigationRailDestination( icon: Icon(Icons.home_outlined), label: Text('Home')), NavigationRailDestination( icon: Icon(Icons.event_available), label: Text('Events')), NavigationRailDestination( icon: Icon(Icons.local_parking_outlined), label: Text('Parking')), NavigationRailDestination( icon: Icon(Icons.fastfood_outlined), label: Text('Food')), NavigationRailDestination( icon: Icon(Icons.medical_services_outlined), label: Text('S.O.S.')), ], ), Expanded( child: NavigationScreen() ) ], ), ); } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

import 'package:flutter/material.dart'; class NavigationScreen extends StatelessWidget { const NavigationScreen({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Container( decoration: BoxDecoration( color: Colors.white, image: DecorationImage( image: AssetImage('assets/images/Background.png'), fit: BoxFit.cover), ), child: Scaffold( backgroundColor: Colors.transparent, ), ); } }