Thinking & coding: the Custom Navigation icons

October 15, 2020

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

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()
          )
        ],
      ),
    );
  }
}

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

Comments

MaxOctober 15, 2020 at 10:23 PM
Hi Stefan,

Congratulations on your achievements so far! I read through your article and have some questions.

1. What problems did you have with the icons, have been the images not visible as SVG?
You could try to open it up with a tool like Inkscape, it's for free and should open all the .svg files. Additionally, you could check out the following link: https://medium.com/flutterpub/how-to-use-custom-icons-in-flutter-834a079d977.

2. I would recommend to put the Container inside of the Scaffold and give it a width and height of double.infinity. A container will only span as large as its content. That is the reason why it expands the image as soon as you put the Scaffold inside (because a Scaffold uses the full screen).

I am looking forward to seeing the next goal you achieved :).
Happy coding!
ReplyDelete
Replies