/
image_slider.dart
96 lines (84 loc) · 2.31 KB
/
image_slider.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
import 'package:flutter/material.dart';
//
// An Instagram like Image Slider Widget
//
class ImageSlider extends StatefulWidget {
final List images;
final double height;
final bool showPointers;
ImageSlider({this.images, this.height = 300, this.showPointers = true});
@override
State<StatefulWidget> createState() {
return _ImageSliderState();
}
}
class _ImageSliderState extends State<ImageSlider> {
int selectedImageIndex = 0;
int maxImageIndex = 0;
@override
Widget build(BuildContext context) {
// check if no images given
if (widget.images.length == 0) {
return Container();
}
// set max index
maxImageIndex = widget.images.length - 1;
PageController pageController = PageController(initialPage: 0);
List<Widget> listOfImages = [];
for (var i = 0; i < widget.images.length; i++) {
Map image = widget.images[i];
listOfImages.add(
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(image['url']),
fit: BoxFit.cover,
),
),
),
);
}
return Column(
children: <Widget>[
Container(
height: widget.height,
child: PageView(
controller: pageController,
children: listOfImages,
onPageChanged: (int page) {
setState(() {
selectedImageIndex = page;
});
},
),
),
widget.images.length > 1 && widget.showPointers ? _buildImagePointers() : Container()
],
);
}
Widget _buildImagePointers() {
List<Widget> listItems = [];
for (int i = 0; i < widget.images.length; i++) {
listItems.add(
Container(
margin: EdgeInsets.only(left: 2, right: 2),
width: 10,
height: 10,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(8)),
color:
this.selectedImageIndex == i ? Colors.black : Colors.grey[300],
),
child: null /* add child content here */,
),
);
}
return Container(
margin: EdgeInsets.only(top: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: listItems,
),
);
}
}