Skip to content

Slider #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
deepikahr merged 6 commits into from
Dec 26, 2019
+185 −79
Merged

Slider #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
95c77a3
gf_Slider pagination added
deepikahr Dec 26, 2019
f782b84
GF slider with pagination completed
deepikahr Dec 26, 2019
0e4750d
GF_slider_with_pagination animation done
deepikahr Dec 26, 2019
c744a2e
GF_slider_with_pagination completed
deepikahr Dec 26, 2019
3320d82
GFSlider component completed
deepikahr Dec 26, 2019
47dae9a
GFSlider, GFSlider with pagination completed working on GFTabs
deepikahr Dec 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 79 additions & 33 deletions example/lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,46 +55,91 @@ class _MyHomePageState extends State<MyHomePage> {
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[

GFSlider(
viewportFraction: 0.9,
aspectRatio: 2.0,
autoPlay: true,
enlargeMainPage: true,
items: imageList.map(
(url) {
return Container(
margin: EdgeInsets.all(5.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
child: Image.network(
url,
fit: BoxFit.cover,
width: 1000.0,
),
),
);
},
).toList(),
body: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
),
// SingleChildScrollView(
// child: Column(
// mainAxisAlignment: MainAxisAlignment.center,
// crossAxisAlignment: CrossAxisAlignment.center,
// children: <Widget>[



// GFSlider(
//// pagerSize: 12.0,
//// activeIndicator: Colors.pink,
//// passiveIndicator: Colors.pink.withOpacity(0.4),
// viewportFraction: 0.9,
// aspectRatio: 2.0,
//// autoPlay: true,
// enlargeMainPage: true,
// pagination: true,
// items: imageList.map(
// (url) {
// return Container(
// margin: EdgeInsets.all(5.0),
// child: ClipRRect(
// borderRadius: BorderRadius.all(Radius.circular(5.0)),
// child: Image.network(
// url,
// fit: BoxFit.cover,
// width: 1000.0,
// ),
// ),
// );
// },
// ).toList(),
// onPageChanged: (index) {
// setState(() {
// index;
// });
// },
// ),


// GFSlider(
// autoPlay: true,
// viewportFraction: 1.0,
// aspectRatio: MediaQuery.of(context).size.aspectRatio,
// items: imageList.map((url) {
// return Image.network(
// url,
// fit: BoxFit.cover,
// width: 1000.0,
// return Container(
// margin: EdgeInsets.all(5.0),
// child: ClipRRect(
// borderRadius: BorderRadius.all(Radius.circular(5.0)),
// child: Image.network(
// url,
// fit: BoxFit.cover,
// width: 1000.0,
// ),
// ),
// );
// },
// ).toList(),
// onPageChanged: (index) {
// setState(() {
// index;
// });
// },
// ),

// GFCard(
Expand Down Expand Up @@ -333,8 +378,9 @@ class _MyHomePageState extends State<MyHomePage> {
//// borderSide: BorderSide(color: Colors.pink, width: 1.0, style: BorderStyle.solid),
//// borderShape: RoundedRectangleBorder(side: BorderSide(color: Colors.pink, width: 2.0, style: BorderStyle.solid), borderRadius: BorderRadius.zero),
// ),
],
),
));
// ],
// ),
// )
);
}
}
152 changes: 106 additions & 46 deletions lib/components/slider/gf_slider.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,22 @@
import 'dart:async';
import 'dart:ffi';
import 'package:flutter/material.dart';

List<T> map<T>(List list, Function handler) {
List<T> result = [];
for (var i = 0; i < list.length; i++) {
result.add(handler(i, list[i]));
}
return result;
}

class GFSlider extends StatefulWidget {
GFSlider(
{@required this.items,
this.pagerSize,
this.passiveIndicator,
this.activeIndicator,
this.pagination,
this.height,
this.aspectRatio: 16 / 9,
this.viewportFraction: 0.8,
Expand All @@ -26,6 +39,18 @@ class GFSlider extends StatefulWidget {
initialPage: enableInfiniteScroll ? realPage + initialPage : initialPage,
);

/// The pagination dots size can be defined using [double].
final double pagerSize;

/// The slider pagination's active color.
final Color activeIndicator;

/// The slider pagination's passive color.
final Color passiveIndicator;

/// The [GFSlider] shows pagination on state true.
final bool pagination;

/// The widgets to be shown as sliders.
final List<Widget> items;

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

int _current = 0;

@override
Widget build(BuildContext context) {
return getPageWrapper(PageView.builder(
physics: widget.scrollPhysics,
scrollDirection: widget.scrollDirection,
controller: widget.pageController,
reverse: widget.reverse,
itemCount: widget.enableInfiniteScroll ? null : widget.items.length,
onPageChanged: (int index) {
int currentPage = _getRealIndex(index + widget.initialPage, widget.realPage, widget.items.length);
if (widget.onPageChanged != null) {
widget.onPageChanged(currentPage);
}
},
itemBuilder: (BuildContext context, int i) {
final int index =
_getRealIndex(i + widget.initialPage, widget.realPage, widget.items.length);

return AnimatedBuilder(
animation: widget.pageController,
child: widget.items[index],
builder: (BuildContext context, child) {
// on the first render, the pageController.page is null,
// this is a dirty hack
if (widget.pageController.position.minScrollExtent == null ||
widget.pageController.position.maxScrollExtent == null) {
Future.delayed(Duration(microseconds: 1), () {
setState(() {});
});
return Container();
}
double value = widget.pageController.page - i;
value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);

final double height =
widget.height ?? MediaQuery.of(context).size.width * (1 / widget.aspectRatio);
final double distortionValue =
widget.enlargeMainPage ? Curves.easeOut.transform(value) : 1.0;

if (widget.scrollDirection == Axis.horizontal) {
return Center(child: SizedBox(height: distortionValue * height, child: child));
} else {
return Center(
child: SizedBox(
width: distortionValue * MediaQuery.of(context).size.width, child: child));
return Stack(
children: <Widget>[
getPageWrapper(PageView.builder(
physics: widget.scrollPhysics,
scrollDirection: widget.scrollDirection,
controller: widget.pageController,
reverse: widget.reverse,
itemCount: widget.enableInfiniteScroll ? null : widget.items.length,
onPageChanged: (int index) {

int currentPage = _getRealIndex(index + widget.initialPage, widget.realPage, widget.items.length);
if (widget.onPageChanged != null) {
widget.onPageChanged(currentPage);
_current = currentPage;
}
_current = currentPage;
},
);
},
));
itemBuilder: (BuildContext context, int i) {
final int index =
_getRealIndex(i + widget.initialPage, widget.realPage, widget.items.length);

return AnimatedBuilder(
animation: widget.pageController,
child: widget.items[index],
builder: (BuildContext context, child) {
// on the first render, the pageController.page is null,
// this is a dirty hack
if (widget.pageController.position.minScrollExtent == null ||
widget.pageController.position.maxScrollExtent == null) {
Future.delayed(Duration(microseconds: 1), () {
setState(() {});
});
return Container();
}
double value = widget.pageController.page - i;
value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);

final double height =
widget.height ?? MediaQuery.of(context).size.width * (1 / widget.aspectRatio);
final double distortionValue =
widget.enlargeMainPage ? Curves.easeOut.transform(value) : 1.0;

if (widget.scrollDirection == Axis.horizontal) {
return Center(child: SizedBox(height: distortionValue * height, child: child));
} else {
return Center(
child: SizedBox(
width: distortionValue * MediaQuery.of(context).size.width, child: child));
}
},
);
},
)),
widget.pagination == true ? Positioned(
left: 0.0,
right: 0.0,
bottom: 0.0,
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: map<Widget>(
widget.items,
(indexx, url) {
return Container(
width: widget.pagerSize == null ? 8.0 : widget.pagerSize,
height: widget.pagerSize == null ? 8.0 : widget.pagerSize,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: _current == indexx
? widget.activeIndicator == null ? Color.fromRGBO(0, 0, 0, 0.9) : widget.activeIndicator
: widget.passiveIndicator == null ? Color.fromRGBO(0, 0, 0, 0.4) : widget.passiveIndicator,
),
);
},
),
),
),
) : Container(),
],
);
}
}

Expand Down
Empty file added lib/components/tabs/gf_tabs.dart
View file
Open in desktop
Empty file.