8000 Add day-56 example · afgprogrammer/Flutter-examples@c714992 · GitHub
[go: up one dir, main page]
Skip to content

Commit c714992

Browse files 8000
afgprogrammerafgprogrammer
committed
Add day-56 example
1 parent ba8cf6e commit c714992

File tree

2 files changed

+134
-0
lines changed

2 files changed

+134
-0
lines changed

‎assets/screenshots/product-card.png

411 KB
Loading

‎lib/pages/product_card.dart

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
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 \nby 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 \nby 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 \nby 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(() {
< 8000 /code>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

Comments
 (0)
0