Skip to content

Commit f92d390

Browse files
deepikahrdeepikahr
authored
Merge pull request #13 from deepikahr/slider
Slider
2 parents 4e9183e + 47dae9a commit f92d390

3 files changed

Lines changed: 185 additions & 79 deletions

File tree

‎example/lib/main.dart‎

Lines changed: 79 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -55,46 +55,91 @@ class _MyHomePageState extends State<MyHomePage> {
5555
appBar: AppBar(
5656
title: Text(widget.title),
5757
),
58-
body: SingleChildScrollView(
59-
child: Column(
60-
mainAxisAlignment: MainAxisAlignment.center,
61-
crossAxisAlignment: CrossAxisAlignment.center,
62-
children: <Widget>[
63-
64-
GFSlider(
65-
viewportFraction: 0.9,
66-
aspectRatio: 2.0,
67-
autoPlay: true,
68-
enlargeMainPage: true,
69-
items: imageList.map(
70-
(url) {
71-
return Container(
72-
margin: EdgeInsets.all(5.0),
73-
child: ClipRRect(
74-
borderRadius: BorderRadius.all(Radius.circular(5.0)),
75-
child: Image.network(
76-
url,
77-
fit: BoxFit.cover,
78-
width: 1000.0,
79-
),
80-
),
81-
);
82-
},
83-
).toList(),
58+
body: DefaultTabController(
59+
length: 3,
60+
child: Scaffold(
61+
appBar: AppBar(
62+
bottom: TabBar(
63+
tabs: [
64+
Tab(icon: Icon(Icons.directions_car)),
65+
Tab(icon: Icon(Icons.directions_transit)),
66+
Tab(icon: Icon(Icons.directions_bike)),
67+
],
68+
),
69+
title: Text('Tabs Demo'),
70+
),
71+
body: TabBarView(
72+
children: [
73+
Icon(Icons.directions_car),
74+
Icon(Icons.directions_transit),
75+
Icon(Icons.directions_bike),
76+
],
77+
),
8478
),
79+
),
80+
// SingleChildScrollView(
81+
// child: Column(
82+
// mainAxisAlignment: MainAxisAlignment.center,
83+
// crossAxisAlignment: CrossAxisAlignment.center,
84+
// children: <Widget>[
85+
86+
87+
88+
// GFSlider(
89+
//// pagerSize: 12.0,
90+
//// activeIndicator: Colors.pink,
91+
//// passiveIndicator: Colors.pink.withOpacity(0.4),
92+
// viewportFraction: 0.9,
93+
// aspectRatio: 2.0,
94+
//// autoPlay: true,
95+
// enlargeMainPage: true,
96+
// pagination: true,
97+
// items: imageList.map(
98+
// (url) {
99+
// return Container(
100+
// margin: EdgeInsets.all(5.0),
101+
// child: ClipRRect(
102+
// borderRadius: BorderRadius.all(Radius.circular(5.0)),
103+
// child: Image.network(
104+
// url,
105+
// fit: BoxFit.cover,
106+
// width: 1000.0,
107+
// ),
108+
// ),
109+
// );
110+
// },
111+
// ).toList(),
112+
// onPageChanged: (index) {
113+
// setState(() {
114+
// index;
115+
// });
116+
// },
117+
// ),
118+
85119

86120
// GFSlider(
87121
// autoPlay: true,
88122
// viewportFraction: 1.0,
89123
// aspectRatio: MediaQuery.of(context).size.aspectRatio,
90124
// items: imageList.map((url) {
91-
// return Image.network(
92-
// url,
93-
// fit: BoxFit.cover,
94-
// width: 1000.0,
125+
// return Container(
126+
// margin: EdgeInsets.all(5.0),
127+
// child: ClipRRect(
128+
// borderRadius: BorderRadius.all(Radius.circular(5.0)),
129+
// child: Image.network(
130+
// url,
131+
// fit: BoxFit.cover,
132+
// width: 1000.0,
133+
// ),
134+
// ),
95135
// );
96136
// },
97137
// ).toList(),
138+
// onPageChanged: (index) {
139+
// setState(() {
140+
// index;
141+
// });
142+
// },
98143
// ),
99144

100145
// GFCard(
@@ -333,8 +378,9 @@ class _MyHomePageState extends State<MyHomePage> {
333378
//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
334379
//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
335380
// ),
336-
],
337-
),
338-
));
381+
// ],
382+
// ),
383+
// )
384+
);
339385
}
340386
}

‎lib/components/slider/gf_slider.dart‎

Lines changed: 106 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
11
import 'dart:async';
2+
import 'dart:ffi';
23
import 'package:flutter/material.dart';
34

5+
List<T> map<T>(List list, Function handler) {
6+
List<T> result = [];
7+
for (var i = 0; i < list.length; i++) {
8+
result.add(handler(i, list[i]));
9+
}
10+
return result;
11+
}
12+
413
class GFSlider extends StatefulWidget {
514
GFSlider(
615
{@required this.items,
16+
this.pagerSize,
17+
this.passiveIndicator,
18+
this.activeIndicator,
19+
this.pagination,
720
this.height,
821
this.aspectRatio: 16 / 9,
922
this.viewportFraction: 0.8,
@@ -26,6 +39,18 @@ class GFSlider extends StatefulWidget {
2639
initialPage: enableInfiniteScroll ? realPage + initialPage : initialPage,
2740
);
2841

42+
/// The pagination dots size can be defined using [double].
43+
final double pagerSize;
44+
45+
/// The slider pagination's active color.
46+
final Color activeIndicator;
47+
48+
/// The slider pagination's passive color.
49+
final Color passiveIndicator;
50+
51+
/// The [GFSlider] shows pagination on state true.
52+
final bool pagination;
53+
2954
/// The widgets to be shown as sliders.
3055
final List<Widget> items;
3156

@@ -177,56 +202,91 @@ class _GFSliderState extends State<GFSlider> with TickerProviderStateMixin {
177202
timer?.cancel();
178203
}
179204

205+
int _current = 0;
206+
180207
@override
181208
Widget build(BuildContext context) {
182-
return getPageWrapper(PageView.builder(
183-
physics: widget.scrollPhysics,
184-
scrollDirection: widget.scrollDirection,
185-
controller: widget.pageController,
186-
reverse: widget.reverse,
187-
itemCount: widget.enableInfiniteScroll ? null : widget.items.length,
188-
onPageChanged: (int index) {
189-
int currentPage = _getRealIndex(index + widget.initialPage, widget.realPage, widget.items.length);
190-
if (widget.onPageChanged != null) {
191-
widget.onPageChanged(currentPage);
192-
}
193-
},
194-
itemBuilder: (BuildContext context, int i) {
195-
final int index =
196-
_getRealIndex(i + widget.initialPage, widget.realPage, widget.items.length);
197-
198-
return AnimatedBuilder(
199-
animation: widget.pageController,
200-
child: widget.items[index],
201-
builder: (BuildContext context, child) {
202-
// on the first render, the pageController.page is null,
203-
// this is a dirty hack
204-
if (widget.pageController.position.minScrollExtent == null ||
205-
widget.pageController.position.maxScrollExtent == null) {
206-
Future.delayed(Duration(microseconds: 1), () {
207-
setState(() {});
208-
});
209-
return Container();
210-
}
211-
double value = widget.pageController.page - i;
212-
value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);
213-
214-
final double height =
215-
widget.height ?? MediaQuery.of(context).size.width * (1 / widget.aspectRatio);
216-
final double distortionValue =
217-
widget.enlargeMainPage ? Curves.easeOut.transform(value) : 1.0;
218-
219-
if (widget.scrollDirection == Axis.horizontal) {
220-
return Center(child: SizedBox(height: distortionValue * height, child: child));
221-
} else {
222-
return Center(
223-
child: SizedBox(
224-
width: distortionValue * MediaQuery.of(context).size.width, child: child));
209+
return Stack(
210+
children: <Widget>[
211+
getPageWrapper(PageView.builder(
212+
physics: widget.scrollPhysics,
213+
scrollDirection: widget.scrollDirection,
214+
controller: widget.pageController,
215+
reverse: widget.reverse,
216+
itemCount: widget.enableInfiniteScroll ? null : widget.items.length,
217+
onPageChanged: (int index) {
218+
219+
int currentPage = _getRealIndex(index + widget.initialPage, widget.realPage, widget.items.length);
220+
if (widget.onPageChanged != null) {
221+
widget.onPageChanged(currentPage);
222+
_current = currentPage;
225223
}
224+
_current = currentPage;
226225
},
227-
);
228-
},
229-
));
226+
itemBuilder: (BuildContext context, int i) {
227+
final int index =
228+
_getRealIndex(i + widget.initialPage, widget.realPage, widget.items.length);
229+
230+
return AnimatedBuilder(
231+
animation: widget.pageController,
232+
child: widget.items[index],
233+
builder: (BuildContext context, child) {
234+
// on the first render, the pageController.page is null,
235+
// this is a dirty hack
236+
if (widget.pageController.position.minScrollExtent == null ||
237+
widget.pageController.position.maxScrollExtent == null) {
238+
Future.delayed(Duration(microseconds: 1), () {
239+
setState(() {});
240+
});
241+
return Container();
242+
}
243+
double value = widget.pageController.page - i;
244+
value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);
245+
246+
final double height =
247+
widget.height ?? MediaQuery.of(context).size.width * (1 / widget.aspectRatio);
248+
final double distortionValue =
249+
widget.enlargeMainPage ? Curves.easeOut.transform(value) : 1.0;
250+
251+
if (widget.scrollDirection == Axis.horizontal) {
252+
return Center(child: SizedBox(height: distortionValue * height, child: child));
253+
} else {
254+
return Center(
255+
child: SizedBox(
256+
width: distortionValue * MediaQuery.of(context).size.width, child: child));
257+
}
258+
},
259+
);
260+
},
261+
)),
262+
widget.pagination == true ? Positioned(
263+
left: 0.0,
264+
right: 0.0,
265+
bottom: 0.0,
266+
child: Container(
267+
child: Row(
268+
mainAxisAlignment: MainAxisAlignment.center,
269+
children: map<Widget>(
270+
widget.items,
271+
(indexx, url) {
272+
return Container(
273+
width: widget.pagerSize == null ? 8.0 : widget.pagerSize,
274+
height: widget.pagerSize == null ? 8.0 : widget.pagerSize,
275+
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
276+
decoration: BoxDecoration(
277+
shape: BoxShape.circle,
278+
color: _current == indexx
279+
? widget.activeIndicator == null ? Color.fromRGBO(0, 0, 0, 0.9) : widget.activeIndicator
280+
: widget.passiveIndicator == null ? Color.fromRGBO(0, 0, 0, 0.4) : widget.passiveIndicator,
281+
),
282+
);
283+
},
284+
),
285+
),
286+
),
287+
) : Container(),
288+
],
289+
);
230290
}
231291
}
232292

‎lib/components/tabs/gf_tabs.dart‎

Whitespace-only changes.

0 commit comments

Comments
 (0)