Scribd
Upload
25 views5 pages

Screen 2

The document contains a Flutter widget implementation for a product detail screen, including an app bar with a back button and a notification icon. It features a product card displaying an image, title, and subtitle, along with options to select sizes and a button to add the product to the cart. The layout is designed for scrolling and includes price information and user reviews.

Uploaded by

solankisatyraj84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
25 views5 pages

Screen 2

The document contains a Flutter widget implementation for a product detail screen, including an app bar with a back button and a notification icon. It features a product card displaying an image, title, and subtitle, along with options to select sizes and a button to add the product to the cart. The layout is designed for scrolling and includes price information and user reviews.

Uploaded by

solankisatyraj84
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

import 'package:flutter/material.

dart';

class ScreenTwo extends StatelessWidget {


const ScreenTwo({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Padding(
padding: EdgeInsets.only(top: 10),
child: IconButton(
icon: Icon(Icons.arrow_back,size: 35,),
onPressed: () {
Navigator.pop(context);
},
),
),
title: Padding(
padding: EdgeInsets.only(top: 17),
child: Center(child: Text('Details',style: TextStyle(fontSize:
30,fontWeight: FontWeight.bold),)),
),
actions: [
Padding(
padding:EdgeInsets.only(top: 10),
child: IconButton(
icon: Icon(Icons.notifications_none_sharp,size:37,),
onPressed: () {},
),
),
],
),
body: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top: 40,right: 25,left: 25),
child: ProductCard(
title: "OBATU",
imageUrl: 'assets/images/download (2).jpg',
subtitle: 'A Line Skirt with Elasticated Waistband',
),
),
SizedBox(height: 8),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Padding(
padding: const EdgeInsets.only(left: 25),
child: Row(
// mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(Icons.star,
color: Colors.amber,
),
SizedBox(width: 4),
Text(
'4.0/5',
style:
TextStyle(
fontSize: 25),
),
SizedBox(width: 8),
Text(
'(45 REVIEWS)',
style: TextStyle(
fontSize: 20,color: Colors.grey
),
),
],
),
),
),
SizedBox(height:8),
Padding(
padding:EdgeInsets.only(left: 30,bottom: 5,top: 5),
child: Row(
children: [
Text(
'Choose Size',
style:
TextStyle(
fontSize: 23,fontWeight: FontWeight.bold
),
),
],
),
),
SizedBox(height: 8),
Padding(
padding: EdgeInsets.only(left: 30),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
foregroundColor: Colors.black87,
shape:RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
backgroundColor: Colors.grey[100],
padding: EdgeInsets.symmetric(
horizontal: 20,vertical: 20),
),
child: Text('S',style: TextStyle(fontSize: 20),),
),
SizedBox(width: 8),
Padding(
padding: EdgeInsets.only(left: 10,right: 10),
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
foregroundColor: Colors.black87,
shape:RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(8))),backgroundColor: Colors.black87,
padding: EdgeInsets.symmetric(vertical: 20,horizontal:
20),
),
child: Text('M',style: TextStyle(fontSize: 20,color:
Colors.white),),
),
),
SizedBox(width: 8),
Padding(
padding: EdgeInsets.only(right: 10),
child: ElevatedButton(onPressed: () {},
style: ElevatedButton.styleFrom(
foregroundColor:
Colors.black87,shape:RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(8))),backgroundColor: Colors.grey[100],
padding: EdgeInsets.symmetric(horizontal: 20,vertical:
20),
),
child:
Text('L',style: TextStyle(fontSize: 20),),
),
),
SizedBox(width: 8),
ElevatedButton(onPressed: () {},
style: ElevatedButton.styleFrom(
foregroundColor:
Colors.black87,shape:RoundedRectangleBorder(borderRadius:
BorderRadius.all(Radius.circular(8))),backgroundColor: Colors.grey[100],
padding: EdgeInsets.symmetric(vertical: 20,horizontal: 20),
),
child:
Text('XL',style: TextStyle(fontSize: 20),),
),
],
),
),
),
Padding(
padding: EdgeInsets.only(top: 27),
child: Center(child: Text('Price',style: TextStyle(fontSize:
27,fontWeight: FontWeight.bold,color: Colors.grey),)),
),
Padding(
padding: EdgeInsets.only(top:0),
child: Center(child: Text('₹1999',style: TextStyle(fontSize:
35,fontWeight: FontWeight.bold,color: Colors.black87),)),
),
Padding(
padding: EdgeInsets.only(left: 20,top: 18,right: 20),
child: Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
padding: EdgeInsets.symmetric(horizontal: 35,
vertical: 20),
textStyle: TextStyle(fontSize: 16, color:
Colors.white),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.shopping_cart_outlined,
color: Colors.white, size: 30),
SizedBox(width: 10),
Text('Add to cart',
style: TextStyle(fontSize: 16, color:
Colors.white)),
],
),
),
),
),
],
),
),
);
}
}

class ProductCard extends StatelessWidget {


final String title;
final String imageUrl;
final String subtitle;

ProductCard({
required this.title,
required this.imageUrl,
required this.subtitle,
});
@override
Widget build(BuildContext context) {
return Card(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Stack(
children: [
Container(
height: 270,
width: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage(imageUrl),fit:
BoxFit.cover),
borderRadius: BorderRadius.circular(20),
),
),
Positioned(
top: 8.0,
right: 8.0,
child: Icon(
Icons.favorite_sharp,size: 25,
color: Colors.white,

),
),
],
),
Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 35,
),
),
SizedBox(height: 8.0),
Text(
subtitle,
style: TextStyle(
fontSize: 22,
color: Colors.black87,
),
),
],
),
),
],
),
);

}
}

You might also like