1+ import 'package:day34/models/product.dart' ;
2+ import 'package:flutter/material.dart' ;
3+ 4+ class ProductViewPage extends StatefulWidget {
5+ final Product product;
6+ const ProductViewPage ({ Key ? key, required this .product }) : super (key: key);
7+ 8+ @override
9+ _ProductViewPageState createState () => _ProductViewPageState ();
10+ }
11+ 12+ class _ProductViewPageState extends State <ProductViewPage > {
13+ List <dynamic > productList = [];
14+ List <String > size = [
15+ "S" ,
16+ "M" ,
17+ "L" ,
18+ "XL" ,
19+ ];
20+ 21+ List <Color > colors = [
22+ Colors .black,
23+ Colors .purple,
24+ Colors .orange.shade200,
25+ Colors .blueGrey,
26+ Color (0xFFFFC1D9 ),
27+ ];
28+ 29+ int _selectedColor = 0 ;
30+ int _selectedSize = 1 ;
31+ 32+ @override
33+ Widget build (BuildContext context) {
34+ return Scaffold (
35+ backgroundColor: Colors .white,
36+ body: CustomScrollView (
37+ slivers: [
38+ SliverAppBar (
39+ expandedHeight: MediaQuery .of (context).size.height * 0.6 ,
40+ elevation: 0 ,
41+ snap: true ,
42+ floating: true ,
43+ stretch: true ,
44+ backgroundColor: Colors .grey.shade50,
45+ flexibleSpace: FlexibleSpaceBar (
46+ stretchModes: [
47+ StretchMode .zoomBackground,
48+ ],
49+ background: Image .network (widget.product.imageURL, fit: BoxFit .cover,)
50+ ),
51+ bottom: PreferredSize (
52+ preferredSize: Size .fromHeight (45 ),
53+ child: Transform .translate (
54+ offset: Offset (0 , 1 ),
55+ child: Container (
56+ height: 45 ,
57+ decoration: BoxDecoration (
58+ color: Colors .white,
59+ borderRadius: BorderRadius .only (
60+ topLeft: Radius .circular (30 ),
61+ topRight: Radius .circular (30 ),
62+ ),
63+ ),
64+ child: Center (
65+ child: Container (
66+ width: 50 ,
67+ height: 8 ,
68+ decoration: BoxDecoration (
69+ color: Colors .grey.shade300,
70+ borderRadius: BorderRadius .circular (10 ),
71+ ),
72+ )
73+ ),
74+ ),
75+ )
76+ ),
77+ ),
78+ SliverList (
79+ delegate: SliverChildListDelegate ([
80+ Container (
81+ height: MediaQuery .of (context).size.height * 0.55 ,
82+ color: Colors .white,
83+ padding: EdgeInsets .symmetric (horizontal: 20 , vertical: 5 ),
84+ child: Column (
85+ crossAxisAlignment: CrossAxisAlignment .start,
86+ children: [
87+ Row (
88+ crossAxisAlignment: CrossAxisAlignment .start,
89+ mainAxisAlignment: MainAxisAlignment .spaceBetween,
90+ children: [
91+ Column (
92+ crossAxisAlignment: CrossAxisAlignment .start,
93+ children: [
94+ Text (widget.product.name,
95+ style: TextStyle (color: Colors .black, fontSize: 22 , fontWeight: FontWeight .bold,),
96+ ),
97+ SizedBox (height: 5 ,),
98+ Text (widget.product.brand, style: TextStyle (color: Colors .orange.shade400, fontSize: 14 ,),),
99+ ],
100+ ),
101+ Text ("\$ " + widget.product.price.toString () + '.00' ,
102+ style: TextStyle (color: Colors .black, fontSize: 16 ),
103+ ),
104+ ],
105+ ),
106+ SizedBox (height: 20 ,),
107+ Text ("Take a break from jeans with the parker long straight pant. These lightweight, pleat front pants feature a flattering high waist and loose, straight legs." ,
108+ style: TextStyle (height: 1.5 , color: Colors .grey.shade800, fontSize: 15 ,),
109+ ),
110+ SizedBox (height: 30 ,),
111+ Text ("Color" , style: TextStyle (color: Colors .grey.shade400, fontSize: 18 ),),
112+ SizedBox (height: 10 ,),
113+ Container (
114+ height: 60 ,
115+ child: ListView .builder (
116+ scrollDirection: Axis .horizontal,
117+ itemCount: colors.length,
118+ itemBuilder: (context, index) {
119+ return GestureDetector (
120+ onTap: () {
121+ setState (() {
122+ _selectedColor = index;
123+ });
124+ },
125+ child: AnimatedContainer (
126+ duration: Duration (milliseconds: 300 ),
127+ margin: EdgeInsets .only (right: 10 ),
128+ decoration: BoxDecoration (
129+ color: _selectedColor == index ? colors[index] : colors[index].withOpacity (0.5 ),
130+ shape: BoxShape .circle
131+ ),
132+ width: 40 ,
133+ height: 40 ,
134+ child: Center (
135+ child: _selectedColor == index ? Icon (Icons .check, color: Colors .white,) : Container (),
136+ ),
137+ ),
138+ );
139+ },
140+ ),
141+ ),
142+ SizedBox (height: 20 ,),
143+ Text ('Size' , style: TextStyle (color: Colors .grey.shade400, fontSize: 18 ),),
144+ SizedBox (height: 10 ,),
145+ Container (
146+ height: 60 ,
147+ child: ListView .builder (
148+ scrollDirection: Axis .horizontal,
149+ itemCount: size.length,
150+ itemBuilder: (context, index) {
151+ return GestureDetector (
152+ onTap: () {
153+ setState (() {
154+ _selectedSize = index;
155+ });
156+ },
157+ child: AnimatedContainer (
158+ duration: Duration (milliseconds: 500 ),
159+ margin: EdgeInsets .only (right: 10 ),
160+ decoration: BoxDecoration (
161+ color: _selectedSize == index ? Colors .yellow[800 ] : Colors .grey.shade200,
162+ shape: BoxShape .circle
163+ ),
164+ width: 40 ,
165+ height: 40 ,
166+ child: Center (
167+ child: Text (size[index], style: TextStyle (color: _selectedSize == index ? Colors .white : Colors .black, fontSize: 15 ),),
168+ ),
169+ ),
170+ );
171+ },
172+ ),
173+ ),
174+ SizedBox (height: 20 ,),
175+ MaterialButton (
176+ onPressed: () {
177+ Navigator .pop (context);
178+ },
179+ height: 50 ,
180+ elevation: 0 ,
181+ splashColor: Colors .yellow[700 ],
182+ shape: RoundedRectangleBorder (
183+ borderRadius: BorderRadius .circular (10 )
184+ ),
185+ color: Colors .yellow[800 ],
186+ child: Center (
187+ child: Text ("Add to Cart" , style: TextStyle (color: Colors .white, fontSize: 18 ),),
188+ ),
189+ )
190+ ],
191+ )
192+ )
193+ 194+ ])
195+ ),
196+ ]
197+ ),
198+ );
199+ }
200+ }
0 commit comments