UI
1. pubspec.yaml
<![CDATA[
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
carousel_slider: ^5.0.0
animate_do: ^3.3.4
fl_chart: ^0.69.0
google_fonts: ^6.2.1
provider: ^6.1.2
syncfusion_flutter_gauges: ^27.1.56
flutter_staggered_grid_view: ^0.7.0
]]>
maindart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'Screen/shop_home_page.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
textTheme: GoogleFonts.poppinsTextTheme(),
),
debugShowCheckedModeBanner: false,
home: ShopHomePage(),
);
}
}
]]>
shop_home_page.dart
<![CDATA[
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:b/Model/model.dart';
import 'package:b/Screen/item_detail.dart';
class ShopHomePage extends StatefulWidget {
const ShopHomePage({super.key});
@override
_ShopHomePageState createState() => _ShopHomePageState();
}
class _ShopHomePageState extends State<ShopHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 22,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
myAppBar(),
const SizedBox(
height: 22,
),
const Text(
"Fruits and berries",
style: TextStyle(
fontWeight: FontWeight.w900,
color: Colors.black,
fontSize: 35,
),
),
const SizedBox(
height: 15,
),
// for search bar
mySearchBar(),
const SizedBox(
height: 15,
),
Expanded(
child: MasonryGridView.builder(
crossAxisSpacing: 20,
itemCount: foodShopItems().length,
gridDelegate:
const SliverSimpleGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
itemBuilder: (context, index) {
final item = foodShopItems()[index];
return Padding(
padding: const EdgeInsets.only(bottom: 20),
child: GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ItemsDetails(item: item),
),
);
},
child: Container(
padding: const EdgeInsets.only(top: 15, left: 20),
height: item.height.toDouble(),
decoration: BoxDecoration(
color: item.bgColor,
borderRadius: BorderRadius.circular(30),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.black,
),
),
Text(
item.lb,
style: const TextStyle(
fontSize: 14,
color: Colors.black,
),
),
Text(
"\$${item.price}",
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Colors.black,
),
),
Expanded(
child: Hero(
tag: item.imageUrl,
child: Image.asset(item.imageUrl)),
),
Padding(
padding: const EdgeInsets.only(left: 110),
child: Container(
height: 41,
width: 52,
decoration: BoxDecoration(
color: item.myItems == true
? item.color
: Colors.transparent,
border: Border(
top: BorderSide(
width: 2, color: item.color),
left: BorderSide(
width: 2, color: item.color),
),
borderRadius: const BorderRadius.only(
bottomRight: Radius.circular(25),
topLeft: Radius.circular(25))),
child: Icon(
item.myItems == true
? Icons.check_sharp
: Icons.add,
color: item.myItems == true
? Colors.white
: item.color,
),
),
)
],
),
),
),
);
},
),
),
],
),
)),
);
}
TextField mySearchBar() {
return TextField(
decoration: InputDecoration(
hintText: "Search",
hintStyle: const TextStyle(
fontSize: 16,
color: Colors.black12,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15),
borderSide: BorderSide.none,
),
filled: true,
fillColor: Colors.grey[100],
contentPadding: const EdgeInsets.all(25),
prefixIcon: const Padding(
padding: EdgeInsets.only(left: 25, right: 15),
child: Icon(
Icons.search,
size: 30,
),
)),
);
}
Padding myAppBar() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 22),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: 55,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(15),
),
child: const Icon(
Icons.keyboard_arrow_left,
size: 25,
),
),
Image.asset(
"images/two line.png",
height: 30,
),
],
),
);
}
}
]]>
Screen/item_detail.dart
<![CDATA[
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:b/Model/model.dart';
class ItemsDetails extends StatelessWidget {
const ItemsDetails({super.key, required this.item});
final Item item;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: item.bgColor,
body: SizedBox(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(
left: 25,
right: 25,
bottom: 25,
top: 50,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Container(
width: 55,
height: 50,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: BorderRadius.circular(15),
),
child: const Icon(
Icons.keyboard_arrow_left,
size: 25,
),
),
),
Image.asset(
"images/two line.png",
height: 30,
),
],
),
),
Center(
child: SizedBox(
height: 300,
child: Hero(
tag: item.imageUrl,
child: Image.asset(
item.imageUrl,
),
),
),
),
const SizedBox(
height: 10,
),
Expanded(
child: Container(
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
child: Padding(
padding: const EdgeInsets.all(35),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
style: const TextStyle(
fontWeight: FontWeight.bold,
fontSize: 33,
),
),
Text(
item.lb,
style: const TextStyle(
color: Colors.black45,
fontSize: 18,
),
),
const SizedBox(
height: 25,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
bottomLeft: Radius.circular(15),
),
),
child: const Icon(
Icons.remove,
),
),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.grey[100],
),
child: const Center(
child: Text(
"1",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
)),
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Colors.grey[100],
borderRadius: const BorderRadius.only(
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: const Icon(
Icons.add,
),
),
],
),
Text(
"\$${item.price}",
style: const TextStyle(
color: Colors.black,
fontSize: 35,
),
),
],
),
const SizedBox(height: 25),
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
const Text(
"Product Description",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
const SizedBox(height: 5),
Text(
item.description,
style: const TextStyle(
color: Colors.black,
fontSize: 18,
),
),
],
),
),
),
const SizedBox(height: 22),
Row(
children: [
Container(
height: 75,
width: 80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(width: 2, color: item.color),
),
child: Icon(
Icons.favorite,
size: 45,
color: item.color,
),
),
const SizedBox(
width: 15,
),
Expanded(
child: Container(
height: 75,
decoration: BoxDecoration(
color: item.color,
borderRadius: BorderRadius.circular(20),
),
child: const Center(
child: Text(
"Add to cart",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
),
),
],
)
],
),
),
))
],
),
),
);
}
}
]]>
Model/model.dart
<![CDATA[
import 'package:flutter/material.dart';
class Item {
bool myItems;
String title;
String description;
Color color;
Color bgColor;
String price;
String lb;
String imageUrl;
int height;
Item({
required this.myItems,
required this.title,
required this.description,
required this.color,
required this.bgColor,
required this.price,
required this.lb,
required this.imageUrl,
required this.height,
});
}
List<Item> foodShopItems() {
return <Item>[
Item(
myItems: true,
title: 'Strawberries',
description:
'A strawberry is a short plant in the wild strawberry genus of the rose family. The name is also used for its very common sweet edible "fruit" and for flavors that taste like it.',
color: const Color(0xFFF0A8AF),
bgColor: const Color(0xFFFFE3E6),
price: '2.45',
lb: '1 kg',
imageUrl: 'images/strawberry.png',
height: 250),
Item(
myItems: false,
title: 'Lychee',
description:
"Lychee is a tropical fruit that is unique in appearance and flavor. It's native to China but can grow in certain warm regions of the U.S like Florida and Hawaii.",
color: const Color.fromARGB(255, 148, 248, 128),
bgColor: const Color(0xFFD8FFD0),
price: '8.22',
lb: '1 lb',
imageUrl: 'images/lychee.png',
height: 200),
Item(
myItems: true,
title: 'Dragon Fruit',
description:
'Dragon fruit, also known as pitaya or the strawberry pear, is a beautiful tropical fruit that is sweet and crunchy.',
color: const Color(0xFFEBB1E4),
bgColor: const Color(0xFFFFEEFE),
price: '5.36',
lb: 'Average 0.87 lb',
imageUrl: 'images/dragon fruit.png',
height: 250),
Item(
myItems: false,
title: 'Blueberries',
description:
'Blueberries can be eaten freshly picked or incorporated into a variety of recipes. They can also be purchased frozen.',
color: const Color(0xFFBAB9F5),
bgColor: const Color(0xFFE4E5FE),
price: '14.80',
lb: '1 lb',
imageUrl: 'images/blueberry.png',
height: 190,
),
Item(
myItems: true,
title: 'Mango',
description:
"Mango's tropical taste has a universal appeal. The meat has the sweetness of a peach. This apricot colored fruit has just enough fiber to give it some chewiness.",
color: const Color(0xFFFFB25F),
bgColor: const Color(0xFFFFE08E),
price: '1.01',
lb: 'each',
imageUrl: 'images/mango.png',
height: 250),
Item(
myItems: false,
title: 'Papaya',
description:
'Papayas grow in tropical climates and are also known as papaws or pawpaws. Their sweet taste, vibrant color, and the wide variety of health benefits they provide make them a popular fruit.',
color: const Color(0xFFF0A8AF),
bgColor: const Color(0xFFFFE3E6),
price: '1.99',
lb: '2 units',
imageUrl: 'images/papaya.png',
height: 200),
Item(
myItems: true,
title: 'Bananas',
description:
'Bananas are one of the most popular fruits worldwide. They contain essential nutrients that can have a protective impact on health.',
color: const Color(0xFFFDD284),
bgColor: const Color(0xFFFFFBD8),
price: '1.15',
lb: '1 lb',
imageUrl: 'images/bananas.png',
height: 250,
),
Item(
myItems: false,
title: 'Pineapple',
description:
'Pineapples are tropical fruits that are rich in vitamins, enzymes and antioxidants. They may help boost the immune system, build strong bones and aid indigestion.',
color: const Color(0xFFFDD284),
bgColor: const Color(0xFFFFFBD8),
price: '3.55',
lb: 'each',
imageUrl: 'images/pineapple.png',
height: 200),
];
}
]]>
MANVIA BLOG
