Skip to content

Commit 505cd6f

Browse files
deepikahrdeepikahr
committed
gf slider split view port completed
1 parent b1b0e5f commit 505cd6f

3 files changed

Lines changed: 143 additions & 117 deletions

File tree

‎example/lib/main.dart‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -80,49 +80,55 @@ class _MyHomePageState extends State<MyHomePage> {
8080
children: <Widget>[
8181

8282
Carousel(
83-
rowCount: 3,
84-
children: [
85-
'Item 1',
86-
'Item 2',
87-
'Item 3',
88-
'Item 4',
89-
'Item 5',
90-
'Item 6',
91-
].map((String itemText) {
92-
return DefaultCarouselItem(itemText);
93-
}).toList()
83+
rowCount: 2,
84+
children: imageList.map(
85+
(url) {
86+
return Container(
87+
margin: EdgeInsets.all(5.0),
88+
child: ClipRRect(
89+
borderRadius: BorderRadius.all(Radius.circular(5.0)),
90+
child: Image.network(
91+
url,
92+
fit: BoxFit.cover,
93+
width: 1000.0
94+
),
95+
),
96+
);
97+
},
98+
).toList(),
9499
),
95100

96-
// GFSlider(
97-
// pagerSize: 12.0,
98-
// activeIndicator: Colors.pink,
99-
// passiveIndicator: Colors.pink.withOpacity(0.4),
100-
// viewportFraction: 0.9,
101-
// aspectRatio: 2.0,
102-
//// autoPlay: true,
103-
// enlargeMainPage: true,
104-
// pagination: true,
105-
// items: imageList.map(
106-
// (url) {
107-
// return Container(
108-
// margin: EdgeInsets.all(5.0),
109-
// child: ClipRRect(
110-
// borderRadius: BorderRadius.all(Radius.circular(5.0)),
111-
// child: Image.network(
112-
// url,
113-
// fit: BoxFit.cover,
114-
// width: 1000.0
115-
// ),
116-
// ),
117-
// );
118-
// },
119-
// ).toList(),
120-
// onPageChanged: (index) {
121-
// setState(() {
122-
// index;
123-
// });
124-
// },
125-
// ),
101+
GFSlider(
102+
rowCount: 2,
103+
pagerSize: 12.0,
104+
activeIndicator: Colors.pink,
105+
passiveIndicator: Colors.pink.withOpacity(0.4),
106+
viewportFraction: 1.0,
107+
aspectRatio: 2.0,
108+
// autoPlay: true,
109+
enlargeMainPage: true,
110+
pagination: true,
111+
items: imageList.map(
112+
(url) {
113+
return Container(
114+
margin: EdgeInsets.all(5.0),
115+
child: ClipRRect(
116+
borderRadius: BorderRadius.all(Radius.circular(5.0)),
117+
child: Image.network(
118+
url,
119+
fit: BoxFit.cover,
120+
width: 1000.0
121+
),
122+
),
123+
);
124+
},
125+
).toList(),
126+
onPageChanged: (index) {
127+
setState(() {
128+
index;
129+
});
130+
},
131+
),
126132

127133
// GFButton(
128134
// color: Colors.orange,

‎lib/components/slider/carousel.dart‎

Lines changed: 53 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,6 @@ class Carousel extends StatefulWidget {
3535
/// Count of visible cells
3636
int rowCount;
3737

38-
/// Customize widget by left/right arrows
39-
CarouselArrow leftArrow, rightArrow;
40-
4138
List<Widget> children;
4239

4340
/// Signature for when a pointer has contacted the screen and has begun to move.
@@ -54,8 +51,6 @@ class Carousel extends StatefulWidget {
5451
Carousel({
5552
this.rowCount,
5653
this.children,
57-
this.leftArrow,
58-
this.rightArrow,
5954
this.onDragStart,
6055
this.onDrag,
6156
this.onDragEnd
@@ -96,20 +91,8 @@ class _CarouselState extends State<Carousel> with TickerProviderStateMixin {
9691

9792
new Future.delayed(Duration.zero, () {
9893
this.setState(() {
99-
/// Calculate cells container width
100-
CarouselArrow leftArrow = widget.leftArrow;
101-
CarouselArrow rightArrow = widget.rightArrow;
10294

10395
double width = MediaQuery.of(context).size.width;
104-
105-
if (leftArrow != null && leftArrow.constraints != null) {
106-
width -= leftArrow.constraints.constrainWidth();
107-
}
108-
109-
if (rightArrow != null && rightArrow.constraints != null) {
110-
width -= rightArrow.constraints.constrainWidth();
111-
}
112-
11396
this.width = width;
11497
this.size = this.width / widget.rowCount;
11598
});
@@ -213,67 +196,63 @@ class _CarouselState extends State<Carousel> with TickerProviderStateMixin {
213196
child: Container(
214197
width: double.infinity,
215198
height: this.size,
216-
child: Container(
217-
width: this.width,
218-
height: this.size,
219-
child: Stack(
220-
children: [
221-
Positioned(
222-
left: this.offset,
223-
child: Row(
224-
children: widget.children.map((child) {
225-
return Container(
226-
width: this.size,
227-
height: this.size,
228-
child: child,
229-
);
230-
}).toList(),
231-
),
199+
child: Stack(
200+
children: [
201+
Positioned(
202+
left: this.offset,
203+
child: Row(
204+
children: widget.children.map((child) {
205+
return Container(
206+
width: this.size,
207+
height: this.size,
208+
child: child,
209+
);
210+
}).toList(),
232211
),
233-
]
234-
),
212+
),
213+
]
235214
),
236215
),
237216
);
238217
}
239218
}
240219

241-
class CarouselArrow extends Container {
242-
243-
CarouselArrow({ Key key, double width, Widget child })
244-
: super(key: key, width: width, child: child);
245-
}
246-
247-
248-
class DefaultCarouselItem extends StatelessWidget {
249-
String text;
250-
251-
DefaultCarouselItem(String text) {
252-
this.text = text;
253-
}
254-
255-
@override
256-
Widget build(BuildContext context) {
257-
return Container(
258-
margin: EdgeInsets.all(6.0),
259-
alignment: Alignment.center,
260-
decoration: new BoxDecoration(
261-
color: Colors.blue,
262-
),
263-
child: Padding(
264-
padding: EdgeInsets.all(6.0),
265-
child: Column(
266-
mainAxisAlignment: MainAxisAlignment.center,
267-
children: <Widget>[
268-
Text(
269-
this.text,
270-
style: TextStyle(
271-
color: Colors.white
272-
),
273-
),
274-
],
275-
),
276-
),
277-
);
278-
}
279-
}
220+
//class CarouselArrow extends Container {
221+
//
222+
// CarouselArrow({ Key key, double width, Widget child })
223+
// : super(key: key, width: width, child: child);
224+
//}
225+
//
226+
//
227+
//class DefaultCarouselItem extends StatelessWidget {
228+
// String text;
229+
//
230+
// DefaultCarouselItem(String text) {
231+
// this.text = text;
232+
// }
233+
//
234+
// @override
235+
// Widget build(BuildContext context) {
236+
// return Container(
237+
// margin: EdgeInsets.all(6.0),
238+
// alignment: Alignment.center,
239+
// decoration: new BoxDecoration(
240+
// color: Colors.blue,
241+
// ),
242+
// child: Padding(
243+
// padding: EdgeInsets.all(6.0),
244+
// child: Column(
245+
// mainAxisAlignment: MainAxisAlignment.center,
246+
// children: <Widget>[
247+
// Text(
248+
// this.text,
249+
// style: TextStyle(
250+
// color: Colors.white
251+
// ),
252+
// ),
253+
// ],
254+
// ),
255+
// ),
256+
// );
257+
// }
258+
//}

‎lib/components/slider/gf_slider.dart‎

Lines changed: 43 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ class GFSlider extends StatefulWidget {
3232
this.enlargeMainPage = false,
3333
this.onPageChanged,
3434
this.scrollPhysics,
35+
this.rowCount,
3536
this.scrollDirection: Axis.horizontal})
3637
: this.realPage =
3738
enableInfiniteScroll ? realPage + initialPage : initialPage,
@@ -41,6 +42,9 @@ class GFSlider extends StatefulWidget {
4142
enableInfiniteScroll ? realPage + initialPage : initialPage,
4243
);
4344

45+
/// Count of visible cells
46+
int rowCount;
47+
4448
/// The pagination dots size can be defined using [double].
4549
final double pagerSize;
4650

@@ -164,10 +168,26 @@ class GFSlider extends StatefulWidget {
164168
class _GFSliderState extends State<GFSlider> with TickerProviderStateMixin {
165169
Timer timer;
166170

171+
/// Size of cell
172+
double size = 0;
173+
174+
/// Width of cells container
175+
double width = 0;
176+
167177
@override
168178
void initState() {
169179
super.initState();
170180
timer = getPlayTimer();
181+
182+
new Future.delayed(Duration.zero, () {
183+
this.setState(() {
184+
185+
double width = MediaQuery.of(context).size.width;
186+
this.width = width;
187+
this.size = this.width / widget.rowCount;
188+
});
189+
});
190+
171191
}
172192

173193
Timer getPlayTimer() {
@@ -261,8 +281,29 @@ class _GFSliderState extends State<GFSlider> with TickerProviderStateMixin {
261281

262282
if (widget.scrollDirection == Axis.horizontal) {
263283
return Center(
264-
child: SizedBox(
265-
height: distortionValue * height, child: child));
284+
// child: SizedBox(
285+
// height: distortionValue * height, child: child),
286+
child: Container(
287+
width: double.infinity,
288+
height: this.size,
289+
child: Stack(
290+
children: [
291+
Positioned(
292+
left: 0,
293+
child: Row(
294+
children: widget.items.map((child) {
295+
return Container(
296+
width: this.size,
297+
height: this.size,
298+
child: child,
299+
);
300+
}).toList(),
301+
),
302+
),
303+
]
304+
),
305+
),
306+
);
266307
} else {
267308
return Center(
268309
child: SizedBox(

0 commit comments

Comments
 (0)