Cybdom is back with yet another beautiful UI, continuing on the Ecommerce theme our today’s flutter tutorial is about a Furniture Selling APP.

As always we start by getting the source code for free from my Github.

Then we pay a coffee to Cybdom at BMC. (I used to share 2 screen apps but today you got 3 screens, so it’s worth it to leave a tip).

You can also follow me on Twitter if it’s not already the case.

Now we are all set, let’s start the show!

Main:

In this app I implemented a bottom navigation system, this is one way of doing it, I am pretty sure there are other ways but this is how I have done it.

First, we have a list of widgets, those widgets are our screens.

List<Widget> _pageList = [ HomeScreen(), CatalogueScreen(), ];

Then we declare am “_activeIndex” integer and set it to “0” initially.

int _currentIndex = 0; List<Widget> _pageList = [ HomeScreen(), CatalogueScreen(), ];

Our Scaffold’s takes _pageList[_currentIndex] as a body.

Finally, we set our BottomNavigationBar as follows:

bottomNavigationBar: BottomNavigationBar( currentIndex: _currentIndex, onTap: (i) { setState(() { _currentIndex = i; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("Home")), BottomNavigationBarItem( icon: Icon(Icons.list), title: Text("Catalogue")), ], ), ),

Home:

GridView.builder:

Starting from the bottom, we have an expanded GridView.builder that shows our products, this time I didn’t use a List<Map> of products, I just went straight ahead and made it all static.

GridView.builder( padding: EdgeInsets.symmetric(horizontal: 15.0), itemCount: 5, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 15.0, mainAxisSpacing: 15.0, childAspectRatio: 2 / 3),

Our product container has some boxShadow and a borderRadius of 9.0, as a child we have a Column with expanded Image.network on top. and another column of text on the bottom, I had to use another column because I wanted to have some padding around the text.

Custom Menu:

Looks pretty neat! right?

So here we’ve got a full-width container with a grey color. As a child, it has a Row containing two Text widgets. These two Text widgets are wrapped inside GestureDetector(s) and because this is a stateful widget we can change the active state onTap.

Top Bar:

I should’ve placed this inside its own widget, but I didn’t.

Hmm, where should I start?

Let’s say we have a Container that contains everything, which has a cyan color.

Inside of it, we have a Column.

The first child of the column is a Container with some padding (I should’ve used the Padding widget), inside of this container we have the Row that contains the CircleAvatar and the Username, Bio Text Widgets.

The second child of the Column is a Stack. Inside of it, we have a Positioned.Fill Column with two expanded containers, the first container has no color, the second one has a white color.

I did this in order to make the “stats” container look like it’s on top of the other container, I’d say this is not the best approach, I already did this in a better way as I came to realize that this leaves a small cyan line just under the Stack, but I left it because it looks like an intentional HorizontalDivider 😂

Stats Container

This one is pretty straight forward, after giving it the required padding and margin, we give it a white color, some shadow to look cool and a border-radius so that it looks a bit cleaner.

To be continued:

Now that we finished with the home screen we can go to the shopping cart and the “shop” screen, however, those will require another article since this one is getting too long.

So stay tuned on my twitter account to be notified when those will be shared.

I hope you like this format of Tutorialish articles, I know that I don’t go through all the details and step by step recreation of the apps but this gives you more flexibility to improve the code or change it altogether to fit your use case the best.