I was personally working on a Furniture app for a local store when I saw this design and I decided to code it out and share the code with you.

Coding time: 2h32 Minutes.

Source Code: https://github.com/cybdom/furniture_app_ui

options Option 1 $1.00 USD Option 2 $5.99 USD Option 3 $10.00 USD

Home page:

Let’s start with the easy part.

Bottom Navigation bar:

bottomNavigationBar: BottomNavigationBar( selectedItemColor: Colors.grey[500], unselectedItemColor: Colors.grey[400], items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text("Home")), BottomNavigationBarItem( icon: Icon(Icons.star), title: Text("Favorite")), BottomNavigationBarItem( icon: Icon(Icons.shopping_basket), title: Text("Basket")), BottomNavigationBarItem( icon: Icon(Icons.person_outline), title: Text("Profile")), ], ),

Then we have the shop categories:

class CategoryContainer extends StatelessWidget { @override Widget build(BuildContext context) { return Container( child: Column( children: <Widget>[ Row( children: <Widget>[ Text( "Shop for", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 19), ), Spacer(), FlatButton( child: Text( "See All", style: TextStyle(color: Colors.blueAccent, fontSize: 15), ), onPressed: () {}, ) ], ), SizedBox( height: 9, ), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Flexible( child: Column( children: <Widget>[ Image.asset( "assets/imgs/chair.png", width: 50, ), SizedBox(height: 15), Text("Chair") ], ), ), Flexible( child: Column( children: <Widget>[ Image.asset("assets/imgs/bed.png", width: 50), SizedBox(height: 15), Text("Bed") ], ), ), Flexible( child: Column( children: <Widget>[ Image.asset("assets/imgs/sofa.png", width: 50), SizedBox(height: 15), Text("Sofa") ], ), ), Flexible( child: Column( children: <Widget>[ Image.asset("assets/imgs/table.png", width: 50), SizedBox(height: 15), Text("Table") ], ), ), ], ), ], ), ); } }

In this example, we have a limited number of categories so we can use a row, but if we were to get it from Firestore we would use a ListView.builder.

Now for a little more complicated code, we have the Today’s Deals:

class SingleItem extends StatelessWidget { @override Widget build(BuildContext context) { return Container( width: 251, margin: EdgeInsets.symmetric(vertical: 5.0, horizontal: 15.0), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15.0), boxShadow: [ BoxShadow(color: Colors.grey[300], blurRadius: 3.0), ], ), child: Stack( children: <Widget>[ Positioned( bottom: 0, right: 0, child: Container( child: Image.asset( "assets/imgs/chair.png", width: 121, ), ), ), Container( padding: EdgeInsets.all(15.0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( "Chairs Starting from", style: TextStyle(fontWeight: FontWeight.bold), ), Text( "\$ 39.99", style: TextStyle(fontWeight: FontWeight.bold), ), Spacer(), Text( "Ends in 02:00:25", ), ], ), ), ], ), ); } }

I used a Stack to differentiate between the item image and the item details. Then I put this in another container named DealsContainer:

class DealsContainer extends StatelessWidget { @override Widget build(BuildContext context) { return GestureDetector( onTap: () { Navigator.pushNamed(context, '/details'); }, child: Container( child: Column( children: <Widget>[ Row( children: <Widget>[ Text( "Today's Deals", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 19), ), Spacer(), FlatButton( child: Text( "See All", style: TextStyle(color: Colors.blueAccent, fontSize: 15), ), onPressed: () {}, ) ], ), SizedBox( height: 9, ), Container( height: 171, child: ListView.builder( itemCount: 3, scrollDirection: Axis.horizontal, itemBuilder: (context, id) { return SingleItem(); }, ), ) ], ), ), ); } }

As you can see I gave it a GestureDetector, I did that to be able to move to the next part which is:

Details Page:

For the purpose of saving time, I created a whole new Scaffold with another BottomNavigationBar, whereas I should’ve used a PageView to host the pages together.

The BottomNavigation bar is exactly the same as the first one, so just copy and paste.

Buy Now button is a FloatingActionButton as follow:

floatingActionButton: FloatingActionButton.extended( label: Text( "Buy Now!", style: TextStyle(color: Colors.white), ), onPressed: () {}, backgroundColor: Colors.blue, ), floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

AppBar is a simple part too:

appBar: AppBar( elevation: 0, backgroundColor: Color(0xfff7f7f7), leading: IconButton( icon: Icon( Icons.arrow_back, color: Colors.grey, ), onPressed: () { Navigator.pop(context); }, ), actions: <Widget>[ IconButton( icon: Icon( Icons.star_border, color: Colors.grey, ), onPressed: () {}, ), ], ),

Inside a column we have a PageView hosting the product Images:

Flexible( flex: 1, child: PageView( children: <Widget>[ Image.network( "https://luxloungeefr.com/wp-content/uploads/2015/03/blue-custom.png"), Image.network( "https://luxloungeefr.com/wp-content/uploads/2015/03/blue-custom.png"), Image.network( "https://luxloungeefr.com/wp-content/uploads/2015/03/blue-custom.png"), ], ), ),

The bottom part is inside another Flexible with flex of 1, I did that in order to divide the Screen into two parts. Inside the Flexible we have a SingleChildScrollView to prevent the content from being invisible in case the description is very long.

Flexible( flex: 1, child: SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Row( children: <Widget>[ Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Text( "Yellow Chair", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 29, ), ), SizedBox( height: 11.0, ), Text( "Dimensions: H 33 x W 19 x D 21: Seating Height: Height-17.9", style: TextStyle(color: Colors.grey), ), Text( "All dimensions are in INCH", style: TextStyle(color: Colors.grey), ), SizedBox( height: 11.0, ), Row( children: <Widget>[ Icon( Icons.favorite, color: Colors.orange, ), SizedBox( width: 5.0, ), Text("4.9 | 239 Reviews"), ], ) ], ) ], ), SizedBox( height: 11.0, ), Divider(), SizedBox( height: 11.0, ), Container( height: 31, child: ListView( scrollDirection: Axis.horizontal, children: <Widget>[ Container( child: Text( "Specifications", style: TextStyle(color: Colors.blue), ), decoration: BoxDecoration( border: Border( bottom: BorderSide(color: Colors.blue), )), ), SizedBox( width: 15.0, ), Text("Care"), SizedBox( width: 15.0, ), Text("FAQ's"), SizedBox( width: 15.0, ), Text("Shipping"), SizedBox( width: 15.0, ), Text("Terms"), SizedBox( width: 15.0, ), Text("Warrenty"), ], ), ), SizedBox( height: 11.0, ), Text( "Dimensions:", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 19), ), SizedBox( height: 5.0, ), Text( "Dimensions: H 33 x W 19 x D 21: Seating Height: Height-17.9, All dimensions are in INCH", style: TextStyle(color: Colors.grey), ), SizedBox( height: 11.0, ), Text( "Material:", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 19), ), SizedBox( height: 5.0, ), Text( "PolyPurulent Fabric, High Quality Wood, High Quality Leather", style: TextStyle(color: Colors.grey), ), ], ), ), ),

I have done a little trick here in order to save time ( as always, #lazyCoding). If you can see the ListView here is used for this “Menu”:

This is done by using a Container with a bottom border with blue color for the first item and the other items are just Text Widgets. I know it’s not how it should be and we can create our own interactive menu but am too lazy for that ;).

Other than that we only have Text Widgets and SizedBox to create the margins.

And there you go a very nice Furniture app design made in flutter

Do you like what you see? Have you benefited from checking out my code? Please share the article with your friends, follow me on twitter ( It’s a new account where I share pretty designs like this one ).