Flutter Furniture App UI – App UI Design using Flutter with Free Source Code
- admin
- 0
- on Oct 20, 2022
This section will show you how to use flutter to design a furniture app UI step by step.
We can use the flutter widget to create app UI in a fast way, as a result above you will see the source code to create furniture app UI.
- furniture_home_screen
import 'package:flutter/material.dart';
import 'package:learn_flutter_pro/screen/furniture/furniture_model.dart';
class FurnitureHomeScreen extends StatelessWidget {
List furnutureList = [
FurnitureModel(
title: 'Wingback Chair',
cost: '1,512',
description: 'Modern wingback chair with 8 colors choices',
thumbnail:
'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180011959_1445x.png?v=1652975728'),
FurnitureModel(
title: 'Nashville chair',
cost: '1,512',
description: 'Modern wingback chair with 8 colors choices',
thumbnail:
'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180013753_1445x.png?v=1652975973'),
FurnitureModel(
title: 'Nashville chair',
cost: '1,512',
description: 'Modern wingback chair with 8 colors choices',
thumbnail:
'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180015062_1445x.png?v=1652975740')
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
width: 100,
decoration: BoxDecoration(
color: Colors.blueAccent.withOpacity(0.1)
),
),
SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 60,),
Row(
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.menu)),
Spacer(),
IconButton(onPressed: () {}, icon: Icon(Icons.search)),
IconButton(
onPressed: () {},
icon: CircleAvatar(
radius: 35,
backgroundImage: NetworkImage(
'https://d2rd7etdn93tqb.cloudfront.net/wp-content/uploads/2018/07/girl-with-curly-hair-laughing-unsplash-071318.jpg'),
)),
],
),
SizedBox(
height: 20,
),
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 0.2,
blurRadius: 7,
offset: Offset(0, 1))
]),
child: Padding(
padding: EdgeInsets.all(20),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(child: Text("Colection".toUpperCase())),
RichText(
text: TextSpan(children: [
TextSpan(
text: "New\n",
style: TextStyle(
fontSize: 28,
color: Colors.blueAccent,
fontWeight: FontWeight.bold)),
TextSpan(
text: "Arrivals",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black)),
])),
Text(
"we provide all modern furniture \ncollection for modern life in 2022 ",
style: TextStyle(
fontSize: 10, color: Colors.black54),
),
Column(
children: [
Text(
"Shop Now".toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2,
),
Container(
width: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
width: 1.5,
color: Colors.blueAccent)),
)
],
)
],
),
SizedBox(
width: 15,
),
Expanded(
child: Image.network(
'https://www.godrejinterio.com/imagestore/B2C/56101502SD00944/56101502SD00944_01_803x602.png'))
],
)),
),
SizedBox(
height: 20,
),
Text(
"BEST SELLING",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
SizedBox(
height: 10,
),
Container(
height: 300,
child: ListView.separated(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (context, index) {
return _buildFurnitureCard(furnutureList[index]);
},
separatorBuilder: (context, index) {
return SizedBox(
width: 20,
);
},
itemCount: furnutureList.length),
),
SizedBox(
height: 25,
),
Text(
"TRENDING",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
),
SizedBox(
height: 10,
),
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.2),
spreadRadius: 0.2,
blurRadius: 7,
offset: Offset(0, 1))
]),
child: Padding(
padding: EdgeInsets.all(20),
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(child: Text("Colection".toUpperCase())),
RichText(
text: TextSpan(children: [
TextSpan(
text: "New\n",
style: TextStyle(
fontSize: 28,
color: Colors.blueAccent,
fontWeight: FontWeight.bold)),
TextSpan(
text: "Arrivals",
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: Colors.black)),
])),
Text(
"we provide all modern furniture \ncollection for modern life in 2022 ",
style: TextStyle(
fontSize: 10, color: Colors.black54),
),
Column(
children: [
Text(
"Shop Now".toUpperCase(),
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 2,
),
Container(
width: 65,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
width: 1.5,
color: Colors.blueAccent)),
)
],
)
],
),
SizedBox(
width: 15,
),
Expanded(
child: Image.network(
'https://www.godrejinterio.com/imagestore/B2C/56101502SD00944/56101502SD00944_01_803x602.png'))
],
)),
),
],
),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.indigoAccent,
child: Icon(Icons.bookmark_border),
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Container(
padding: EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.home,
color: Colors.indigoAccent,
size: 25,
)),
SizedBox(
width: 40,
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.shopping_bag_rounded,
color: Colors.grey,
size: 25,
))
],
),
),
),
);
}
_buildFurnitureCard(FurnitureModel furniture) {
return Container(
width: 165,
child: Stack(
children: [
Container(
width: double.infinity,
height: 290,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 5,
spreadRadius: 5,
offset: Offset(0, 2))
]),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Image.network(
'${furniture.thumbnail}',
height: 140,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"${furniture.title}",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
Text(
'${furniture.description}',
style: TextStyle(color: Colors.black54, fontSize: 11),
),
Text(
"\$${furniture.cost}",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blueAccent),
),
],
)
],
),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.blueAccent),
child: Icon(
Icons.bookmark_border,
color: Colors.white,
),
),
)
],
));
}
}
2. furniture_detail_screen
import 'package:flutter/material.dart';
import 'package:learn_flutter_pro/screen/furniture/furniture_model.dart';
class FurnitureDetailScreen extends StatelessWidget {
List furnitureGallary = [
'https://cdn.pixabay.com/photo/2019/03/21/03/29/chair-4070161__340.png',
'https://i.ebayimg.com/images/g/PjIAAOSwOKtieN73/s-l500.png',
'https://images.thdstatic.com/productImages/973bcdb6-62a3-4231-a1bd-780c278ba269/svn/navy-wetiny-gaming-chairs-sd-w24417915-e1_600.jpg',
'https://images.thdstatic.com/productImages/1d3a69c0-8936-48e2-b205-9f1148639b00/svn/blue-athmile-gaming-chairs-gz-w24417915-64_300.jpg',
'https://images.thdstatic.com/productImages/973bcdb6-62a3-4231-a1bd-780c278ba269/svn/navy-wetiny-gaming-chairs-sd-w24417915-e1_600.jpg',
'https://i.ebayimg.com/images/g/PjIAAOSwOKtieN73/s-l500.png',
];
_buildCircle({required Color circleColor}) {
return Container(
width: 20,
height: 20,
padding: EdgeInsets.symmetric(horizontal: 20),
margin: EdgeInsets.only(right: 15),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15), color: circleColor),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Container(
width: 100,
decoration:
BoxDecoration(color: Colors.blueAccent.withOpacity(0.1)),
),
SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 60,
),
Row(
children: [
IconButton(
onPressed: () {}, icon: Icon(Icons.arrow_back_ios_new)),
Spacer(),
IconButton(
onPressed: () {}, icon: Icon(Icons.bookmark_border)),
],
),
SizedBox(
height: 2,
),
Container(
width: double.infinity,
height: 280,
child: Padding(
padding: EdgeInsets.all(20),
child: Image.network(
'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180015062_1445x.png?v=1652975740',
fit: BoxFit.fitHeight,
)),
),
SizedBox(
height: 20,
),
Container(
height: 80,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white),
height: 40,
width: 80,
padding: EdgeInsets.all(10),
child: Image.network(furnitureGallary[index]),
);
},
separatorBuilder: (context, index) {
return SizedBox(
width: 10,
);
},
itemCount: furnitureGallary.length),
),
SizedBox(
height: 20,
),
Container(
height: 230,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Nashville Armechair",
style:
TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
),
Text(
"\$1895",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 22,
color: Colors.indigoAccent),
),
Container(
child: Row(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Color: ",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18),
),
SizedBox(
height: 8,
),
Row(
children: [
Container(
width: 34,
height: 34,
decoration: BoxDecoration(
border: Border.all(
width: 2, color: Colors.indigo),
borderRadius:
BorderRadius.circular(20)),
padding: EdgeInsets.all(5),
child: Container(
alignment: Alignment.center,
width: 20,
height: 20,
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(10),
color: Colors.indigo),
),
),
SizedBox(
width: 15,
),
_buildCircle(circleColor: Colors.red),
_buildCircle(circleColor: Colors.orange),
_buildCircle(circleColor: Colors.green)
],
)
],
),
Spacer(),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Quantity: ",
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 18),
),
SizedBox(
height: 8,
),
Row(
children: [
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color:
Colors.blueAccent.withOpacity(0.2),
borderRadius:
BorderRadius.circular(10)),
child: Center(
child: Icon(Icons.remove),
),
),
SizedBox(
width: 10,
),
Text(
"1",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold),
),
SizedBox(
width: 10,
),
Container(
height: 40,
width: 40,
decoration: BoxDecoration(
color:
Colors.blueAccent.withOpacity(0.2),
borderRadius:
BorderRadius.circular(10)),
child: Center(
child: Icon(Icons.add),
),
),
],
)
],
)
],
),
),
Text(
"Today modern technology furniture has develop with many benefit and also comfortable. so to get more confortable modern technology furniture has develop with many benefit and also comfortable."),
],
),
)
],
),
),
],
),
bottomSheet: Container(
height: 80,
width: double.infinity,
decoration: BoxDecoration(
color: Colors.indigo
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.shopping_cart_outlined,color: Colors.white,),
SizedBox(width: 10,),
Text("ADD TO CARD",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 22,color: Colors.white),),
],
),
),
);
}
}
3. Furniture cart screen
import 'package:flutter/material.dart';
import 'package:learn_flutter_pro/screen/furniture/furniture_model.dart';
class FurnitureCartScreen extends StatelessWidget {
List furnutureList = [
FurnitureModel(
title: 'Wingback Chair',
cost: '1,512',
description: 'Modern wingback chair with 8 colors choices',
thumbnail:
'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180011959_1445x.png?v=1652975728'),
FurnitureModel(
title: 'Nashville chair',
cost: '1,512',
description: 'Modern wingback chair with 8 colors choices',
thumbnail:
'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180013753_1445x.png?v=1652975973'),
FurnitureModel(
title: 'Nashville chair',
cost: '1,512',
description: 'Modern wingback chair with 8 colors choices',
thumbnail:
'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180015062_1445x.png?v=1652975740'),
FurnitureModel(
title: 'Modern chair',
cost: '1,512',
description: 'Modern wingback chair with 8 colors choices',
thumbnail:
'https://cdn.pixabay.com/photo/2019/03/21/03/29/chair-4070161__340.png'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {}, icon: Icon(Icons.arrow_back_ios_new,color: Colors.black)),
Text(
"CARD",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18,color: Colors.black),
),
IconButton(onPressed: () {}, icon: Icon(Icons.more_horiz,color: Colors.black)),
],
),
),
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 20,vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
ListView.separated(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context, index) {
return _buildFurnitureCard(furnutureList[index]);
},
separatorBuilder: (context, index) {
return SizedBox(
height: 20,
);
},
itemCount: furnutureList.length),
],
),
),
bottomSheet: Container(
height: 100,
width: double.infinity,
decoration: BoxDecoration(color: Colors.blueAccent.withOpacity(0.2)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Total Price for 4 Item(s)"),
Text(
"\$99,240",
style: TextStyle(
color: Colors.indigo,
fontSize: 26,
fontWeight: FontWeight.w600),
)
],
),
SizedBox(
width: 25,
),
Container(
height: 50,
width: 160,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.indigo),
child: Center(
child: Text(
"BUY NOW",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
color: Colors.white),
)),
)
],
),
),
);
}
_buildFurnitureCard(FurnitureModel furniture) {
return Container(
width: double.infinity,
height: 120,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
blurRadius: 5,
spreadRadius: 5,
offset: Offset(0, 2))
]),
padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Image.network(
'${furniture.thumbnail}',
width: 80,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Text(
"${furniture.title}",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Text(
'Quantity: 1',
style: TextStyle(color: Colors.black54, fontSize: 14),
),
Text(
'Color: Reyal Blue',
style: TextStyle(color: Colors.black54, fontSize: 14),
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(
Icons.delete_forever,
size: 18,
color: Colors.indigo,
),
Text(
"REMOVE",
style: TextStyle(
color: Colors.indigo, fontWeight: FontWeight.bold),
)
],
)
],
),
Text(
"\$${furniture.cost}",
style: TextStyle(color: Colors.indigo,fontWeight: FontWeight.bold,fontSize: 18),
)
],
),
);
}
}
4. furniture model
class FurnitureModel{
late String title;
late String cost;
late String description;
late String thumbnail;
FurnitureModel({required this.title,required this.cost,required this.description,required this.thumbnail});
}Result:
I would like to thnkx for the efforts you have put in writing this blog. I am hoping the same high-grade blog post from you in the upcoming as well. In fact your creative writing abilities has inspired me to get my own blog now. Really the blogging is spreading its wings quickly. Your write up is a good example of it.