MANVIA BLOGUI ICE CREAM PARLER
-
Screen 1
UI
1. cart quntity event
main.dart
import 'package:flutter/material.dart'; import 'package:b/Screen/home_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return const MaterialApp( debugShowCheckedModeBanner: false, home: HomeScreen(), ); } } constants.dart
import 'package:flutter/material.dart'; Color primaryColor = const Color(0xFF811B83); Color titleTextColor = const Color(0xFF100E34); Color bodyTextColor = const Color(0xFF100E34).withOpacity(0.5); Color backgroundColor = const Color(0xFFF5F6F6); Color secondaryColor = const Color(0xFFFA5019); Utils/color.dart
import 'package:flutter/material.dart'; Color primaryColor = const Color(0xff91E7DC); Color secondaryColor = const Color(0xffFFC2AB); Color cardColor = const Color(0xff39AEA0); Screen/home_screen.dart
import 'package:flutter/material.dart'; import 'package:b/Model/model.dart'; import 'package:b/Screen/icecream_detail_screen.dart'; import 'package:b/Utils/colors.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; return Scaffold( body: Stack( children: [ Row( children: [ // side part sideBar(), // body parts Container( width: size.width * 0.83, color: Colors.white, child: SingleChildScrollView( child: Padding( padding: const EdgeInsets.only( left: 25, top: 100, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const Text( "Ice Parlor", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 30), ), Text( "Ice cream", style: TextStyle( color: primaryColor, fontWeight: FontWeight.bold, fontSize: 20), ), // for search bar mySearchBar(), Padding( padding: const EdgeInsets.only(left: 10), child: SizedBox( height: size.height * 0.4, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: iceCreamList.length, itemBuilder: (context, index) { final iceCream = iceCreamList[index]; return GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => IceCreamDetail(iceCream: iceCream), ), ); }, child: SizedBox( height: size.height * 0.35, width: size.width * 0.46, child: Stack( children: [ Positioned( bottom: 10, child: Material( borderRadius: const BorderRadius.only( topLeft: Radius.circular(40), topRight: Radius.circular(40), bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30), ), elevation: 5, color: iceCream.color, child: Container( height: size.height * 0.27, width: size.width * 0.42, decoration: BoxDecoration( color: iceCream.color, borderRadius: const BorderRadius.only( topLeft: Radius.circular(40), topRight: Radius.circular(40), bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30), ), ), child: Padding( padding: const EdgeInsets.only( left: 18), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ const SizedBox(height: 100), Text( iceCream.name, style: const TextStyle( fontWeight: FontWeight.bold, height: 1.1, fontSize: 25, color: Colors.white, ), ), const SizedBox(height: 20), Text( "\$${iceCream.price}", style: const TextStyle( fontWeight: FontWeight.bold, height: 1.1, fontSize: 25, color: Colors.white, ), ), const Align( alignment: Alignment.bottomRight, child: Padding( padding: EdgeInsets.only( right: 20, bottom: 5, ), child: Icon( Icons.favorite_border, color: Colors.black26, ), ), ) ], ), ), ), ), ), Positioned( top: 40, left: 35, child: Container( height: size.height * 0.17, width: size.width * 0.25, decoration: BoxDecoration( image: DecorationImage( image: AssetImage(iceCream.image), fit: BoxFit.cover, ), borderRadius: BorderRadius.circular(80), color: Colors.white, ), ), ), ], ), ), ); }, ), ), ), const Padding( padding: EdgeInsets.only(top: 30, bottom: 20), child: Text( "Popular Flavours", style: TextStyle( fontWeight: FontWeight.bold, fontSize: 22, ), ), ), SizedBox( height: size.height * 0.22, child: ListView.builder( scrollDirection: Axis.horizontal, itemCount: popularFlavours.length, itemBuilder: (context, index) { return Column( children: [ Padding( padding: const EdgeInsets.only(right: 10), child: Container( height: size.height * 0.18, width: size.width * 0.3, decoration: BoxDecoration( color: Colors.amberAccent, borderRadius: BorderRadius.circular(20), image: DecorationImage( image: AssetImage( popularFlavours[index].image, ), fit: BoxFit.fill), ), ), ), Text( popularFlavours[index].name, style: const TextStyle( fontSize: 22, fontWeight: FontWeight.bold, ), ) ], ); }), ) ], ), ), ), ), ], ), Positioned( top: size.height * 0.47, left: size.width * 0.13, child: Container( height: 60, width: 50, decoration: BoxDecoration( color: primaryColor, borderRadius: const BorderRadius.only( topRight: Radius.circular(60), bottomRight: Radius.circular(60), ), ), child: const Center( child: Padding( padding: EdgeInsets.only(left: 20), child: CircleAvatar( backgroundColor: Colors.white, radius: 6, ), ), ), ), ), const Positioned( top: 50, right: 20, child: Icon( Icons.shopping_cart_outlined, color: Colors.black, size: 25, ), ), ], ), ); } Padding mySearchBar() { return Padding( padding: const EdgeInsets.only(right: 25, top: 25), child: SizedBox( height: 40, child: TextField( decoration: InputDecoration( contentPadding: const EdgeInsets.only( left: 30, ), fillColor: Colors.black12.withOpacity(0.08), filled: true, border: OutlineInputBorder( borderSide: BorderSide.none, borderRadius: BorderRadius.circular(50), ), hintText: "Search", hintStyle: const TextStyle(fontSize: 19, color: Colors.black45), suffixIcon: const Icon( Icons.search, color: Colors.black26, ), ), ), ), ); } Expanded sideBar() { return Expanded( child: Container( color: primaryColor, child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: const EdgeInsets.only(left: 8, top: 50), child: Image.asset( "images/icon.png", width: 25, ), ), const SizedBox(height: 40), rotatableText("Chocolate"), rotatableText("All"), rotatableText("Exocotic"), rotatableText("Vanilla"), const SizedBox(height: 50), ], ), ), ); } Padding rotatableText(text) { return Padding( padding: const EdgeInsets.only(left: 15), child: RotatedBox( quarterTurns: 3, child: Text( text, style: const TextStyle( fontSize: 25, ), ), ), ); } } Screen/icecream_detail_screen.dart
import 'package:flutter/material.dart'; import 'package:flutter/widgets.dart'; import 'package:b/Model/model.dart'; import 'package:b/Screen/star_rating.dart'; import 'package:b/Utils/colors.dart'; class IceCreamDetail extends StatefulWidget { const IceCreamDetail({super.key, required this.iceCream}); final IceCream iceCream; @override State<IceCreamDetail> createState() => _IceCreamDetailState(); } class _IceCreamDetailState extends State<IceCreamDetail> { int quantity = 1; @override Widget build(BuildContext context) { Size size = MediaQuery.of(context).size; return Scaffold( body: Stack( children: [ Container( height: size.height, width: size.width, color: Colors.white, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 25), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SizedBox( height: size.height * 0.63, ), Text( widget.iceCream.name, style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 25, ), ), // for rating const SizedBox(height: 10), Row( children: [ StarRating( rating: widget.iceCream.star, ), const SizedBox(width: 5), Text("${widget.iceCream.star}.0") ], ), const SizedBox(height: 30), // for price and quantity Row( children: [ Text( "\$${widget.iceCream.price}", style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 25, ), ), const SizedBox(width: 40), Container( height: 40, width: 1, color: Colors.black45, ), const SizedBox(width: 40), Container( decoration: BoxDecoration( color: cardColor, borderRadius: BorderRadius.circular(10), ), height: 30, width: 130, child: Row( children: [ const SizedBox(width: 15), GestureDetector( onTap: () { setState(() { if (quantity > 1) { quantity--; } }); }, child: const Icon( Icons.remove, color: Colors.white, ), ), const SizedBox(width: 20), Text( quantity.toString(), style: const TextStyle( color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold, ), ), const SizedBox(width: 20), GestureDetector( onTap: () { setState(() { quantity++; }); }, child: Container( padding: const EdgeInsets.symmetric(horizontal: 3), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(5), ), child: Icon( Icons.add, color: cardColor, ), ), ), ], ), ) ], ), const SizedBox(height: 20), const Text( "Cold and Creamy icecream filled with crunchy oreo, so thick and chocolaty that wil make your day.", style: TextStyle( fontSize: 16, color: Colors.black54, ), ), const SizedBox(height: 30), Row( children: [ GestureDetector( onTap: () { Navigator.pop(context); }, child: Container( padding: const EdgeInsets.all(10), decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), border: Border.all( width: 1, color: Colors.black54, ), ), child: const Icon( Icons.arrow_back_ios, color: Colors.black54, ), ), ), const SizedBox(width: 30), Expanded( child: Container( padding: const EdgeInsets.all(15), decoration: BoxDecoration( borderRadius: BorderRadius.circular(20), color: secondaryColor), child: const Center( child: Text( "Order Now", style: TextStyle( fontWeight: FontWeight.w500, fontSize: 18, ), ), ), ), ) ], ) ], ), ), ), Align( alignment: Alignment.topCenter, child: Container( height: size.height * 0.6, width: size.width, decoration: BoxDecoration( color: widget.iceCream.color, borderRadius: const BorderRadius.only( bottomLeft: Radius.circular(40), bottomRight: Radius.circular(40), ), ), child: Column( children: [ SafeArea( child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Image.asset( "images/icon.png", width: 25, ), const Icon( Icons.shopping_cart_outlined, color: Colors.black, size: 25, ), ], ), ), ), Padding( padding: const EdgeInsets.symmetric( horizontal: 30, ), child: Text( widget.iceCream.name, style: const TextStyle( fontWeight: FontWeight.w900, fontSize: 40, color: Colors.black26, ), ), ), Center( child: Image.asset( widget.iceCream.image, fit: BoxFit.cover, height: 300, ), ) ], ), ), ), ], ), ); } } Screen/star_rating.dart
import 'package:flutter/material.dart'; class StarRating extends StatefulWidget { const StarRating({super.key, required this.rating}); final int rating; @override State<StarRating> createState() => _StarRatingState(); } class _StarRatingState extends State<StarRating> { Widget star(bool fill) { return Icon( Icons.star, size: 22, color: fill ? Colors.deepOrange : Colors.black45, ); } // push the video and see it you can understand easily @override Widget build(BuildContext context) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: List.generate(5, (index) { if (index < (widget.rating).round()) { return star(true); } else { return star(false); } }), ); } } Model/model.dart
import 'package:flutter/material.dart'; class IceCream { String image; String name; String price; int star; Color? color; IceCream({ required this.price, required this.image, required this.name, this.color, required this.star, }); } List<IceCream> iceCreamList = [ IceCream( image: "images/image1.png", price: "5", name: "Chocolate Icecream", star: 4, color: const Color(0xffEFD3A8), ), IceCream( image: "images/image13.png", price: "5", name: "Strawbery Icecream", star: 5, color: const Color(0xffFFB9CB)), IceCream( image: "images/image1.png", price: "2", name: "Mango Icecream", star: 3, color: const Color(0xff91E7DC)), IceCream( image: "images/image8.png", price: "10", name: "Oreo Icecream", star: 5, color: const Color(0xffF2DA54)), IceCream( image: "images/image5.png", price: "7", name: "Apple Icecream", star: 4, color: const Color(0xffFFC2AB)), IceCream( image: "images/image6.png", price: "9", name: "Orange Icecream", star: 4, color: const Color(0xffB1D1FF)), ]; List<IceCream> popularFlavours = [ IceCream( image: "images/image6.png", price: "10", name: "Oreo", star: 5, ), IceCream( image: "images/image12.png", price: "2", name: "Mango", star: 5, ), IceCream( image: "images/image11.png", price: "9", name: "Orange", star: 5, ), IceCream( image: "images/image9.png", price: "5", name: "Chocolate", star: 5, ), IceCream( image: "images/image4.png", price: "5", name: "Strawbery", star: 5, ), IceCream( image: "images/image5.png", price: "7", name: "Apple", star: 5, ), ];