1+ import 'package:carousel_slider/carousel_slider.dart' ;
2+ import 'package:flutter/material.dart' ;
3+ 4+ class ProductCard extends StatefulWidget {
5+ const ProductCard ({ Key ? key }) : super (key: key);
6+ 7+ @override
8+ _ProductCardState createState () => _ProductCardState ();
9+ }
10+ 11+ class _ProductCardState extends State <ProductCard > {
12+ int _current = 0 ;
13+ dynamic _selectedIndex = {};
14+ 15+ CarouselController _carouselController = new CarouselController ();
16+ 17+ List <dynamic > _products = [
18+ {
19+ 'title' : 'Adidas Originals \n by Alexander Wang' ,
20+ 'image' : 'https://images.unsplash.com/photo-1606107557195-0e29a4b5b4aa?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzV8fGFkaWRhc3xlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=60' ,
21+ 'description' : 'Limited collection'
22+ },
23+ {
24+ 'title' : 'Adidas Originals \n by Alexander Wang' ,
25+ 'image' : 'https://images.unsplash.com/photo-1582588678413-dbf45f4823e9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2265&q=80' ,
26+ 'description' : 'Limited collection'
27+ },
28+ {
29+ 'title' : 'Adidas Originals \n by Alexander Wang' ,
30+ 'image' : 'https://images.unsplash.com/photo-1589188056053-28910dc61d38?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2264&q=80' ,
31+ 'description' : 'Limited collection'
32+ }
33+ ];
34+ 35+ @override
36+ Widget build (BuildContext context) {
37+ return Scaffold (
38+ floatingActionButton: _selectedIndex.length > 0 ? FloatingActionButton (
39+ onPressed: () {},
40+ child: Icon (Icons .arrow_forward_ios),
41+ ) : null ,
42+ appBar: AppBar (
43+ elevation: 0 ,
44+ backgroundColor: Colors .transparent,
45+ title: Text ('@theflutterlover' , style: TextStyle (
46+ color: Colors .black,
47+ ),),
48+ ),
49+ body: Container (
50+ width: double .infinity,
51+ height: double .infinity,
52+ child: CarouselSlider (
53+ carouselController: _carouselController,
54+ options: CarouselOptions (
55+ height: 450.0 ,
56+ aspectRatio: 16 / 9 ,
57+ viewportFraction: 0.70 ,
58+ enlargeCenterPage: true ,
59+ pageSnapping: true ,
60+ onPageChanged: (index, reason) {
61+ setState (() {
62+ _current = index;
63+ });
64+ }
65+ ),
66+ items: _products.map ((movie) {
67+ return Builder (
68+ builder: (BuildContext context) {
69+ return GestureDetector (
70+ onTap: () {
71+ setState (() {
72+ if (_selectedIndex == movie) {
73+ _selectedIndex = {};
74+ } else {
75+ _selectedIndex = movie;
76+ }
77+ });
78+ },
79+ child: AnimatedContainer (
80+ duration: Duration (milliseconds: 300 ),
81+ width: MediaQuery .of (context).size.width,
82+ decoration: BoxDecoration (
83+ color: Colors .white,
84+ borderRadius: BorderRadius .circular (20 ),
85+ border: _selectedIndex == movie ? Border .all (color: Colors .blue.shade500, width: 3 ) : null ,
86+ boxShadow: _selectedIndex == movie ? [
87+ BoxShadow (
88+ color: Colors .blue.shade100,
89+ blurRadius: 30 ,
90+ offset: Offset (0 , 10 )
91+ )
92+ ] : [
93+ BoxShadow (
94+ color: Colors .grey.withOpacity (0.2 ),
95+ blurRadius: 20 ,
96+ offset: Offset (0 , 5 )
97+ )
98+ ]
99+ ),
100+ child: SingleChildScrollView (
101+ child: Column (
102+ children: [
103+ Container (
104+ height: 320 ,
105+ margin: EdgeInsets .only (top: 10 ),
106+ clipBehavior: Clip .hardEdge,
107+ decoration: BoxDecoration (
108+ borderRadius: BorderRadius .circular (20 ),
109+ ),
110+ child: Image .network (movie['image' ], fit: BoxFit .cover),
111+ ),
112+ SizedBox (height: 20 ,),
113+ Text (movie['title' ], style: TextStyle (
114+ fontSize: 16 ,
115+ fontWeight: FontWeight .bold
116+ ),),
117+ SizedBox (height: 20 ,),
118+ Text (movie['description' ], style: TextStyle (
119+ fontSize: 14 ,
120+ color: Colors .grey.shade600
121+ ),),
122+ ],
123+ ),
124+ ),
125+ ),
126+ );
127+ },
128+ );
129+ }).toList ()
130+ ),
131+ ),
132+ );
133+ }
134+ }
0 commit comments