Advertisement
ak133720

carousel-slider

Oct 10th, 2019
177
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.33 KB | None | 0 0
  1. import 'package:carousel_slider/carousel_slider.dart';
  2.  
  3. // This is class file for call main.dart :)
  4.  
  5. class CarouselDemo extends StatefulWidget {
  6. CarouselDemo() : super();
  7.  
  8. final String title = "Carousel Slider";
  9.  
  10. @override
  11. CarouselDemoState createState() => CarouselDemoState();
  12. }
  13.  
  14. class CarouselDemoState extends State<CarouselDemo> {
  15. //
  16. CarouselSlider carouselSlider;
  17. int _current = 0;
  18. List imgList = [
  19. 'https://images.unsplash.com/photo-1502117859338-fd9daa518a9a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
  20. 'https://images.unsplash.com/photo-1554321586-92083ba0a115?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
  21. 'https://images.unsplash.com/photo-1536679545597-c2e5e1946495?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
  22. 'https://images.unsplash.com/photo-1543922596-b3bbaba80649?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
  23. 'https://images.unsplash.com/photo-1502943693086-33b5b1cfdf2f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=668&q=80'
  24. ];
  25.  
  26. List<T> map<T>(List list, Function handler) {
  27. List<T> result = [];
  28. for (var i = 0; i < list.length; i++) {
  29. result.add(handler(i, list[i]));
  30. }
  31. return result;
  32. }
  33.  
  34. @override
  35. Widget build(BuildContext context) {
  36. return Scaffold(
  37. appBar: AppBar(
  38. title: Text(widget.title),
  39. ),
  40. body: Container(
  41. child: Column(
  42. mainAxisAlignment: MainAxisAlignment.center,
  43. crossAxisAlignment: CrossAxisAlignment.center,
  44. children: <Widget>[
  45. carouselSlider = CarouselSlider(
  46. height: 400.0,
  47. initialPage: 0,
  48. enlargeCenterPage: true,
  49. autoPlay: true,
  50. reverse: false,
  51. enableInfiniteScroll: true,
  52. autoPlayInterval: Duration(seconds: 4),
  53. autoPlayAnimationDuration: Duration(milliseconds: 2000),
  54. pauseAutoPlayOnTouch: Duration(seconds: 10),
  55. scrollDirection: Axis.horizontal,
  56. onPageChanged: (index) {
  57. setState(() {
  58. _current = index;
  59. });
  60. },
  61. items: imgList.map((imgUrl) {
  62. return Builder(
  63. builder: (BuildContext context) {
  64. return Container(
  65. width: MediaQuery.of(context).size.width,
  66. margin: EdgeInsets.symmetric(horizontal: 10.0),
  67. decoration: BoxDecoration(
  68. color: Colors.grey,
  69. ),
  70. child: Image.network(
  71. imgUrl,
  72. fit: BoxFit.fill,
  73. ),
  74. );
  75. },
  76. );
  77. }).toList(),
  78. ),
  79. SizedBox(
  80. height: 20,
  81. ),
  82. Row(
  83. mainAxisAlignment: MainAxisAlignment.center,
  84. children: map<Widget>(imgList, (index, url) {
  85. return Container(
  86. width: 10.0,
  87. height: 10.0,
  88. margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 2.0),
  89. decoration: BoxDecoration(
  90. shape: BoxShape.circle,
  91. color: _current == index ? Colors.cyan : Colors.yellow,
  92. ),
  93. );
  94. }),
  95. ),
  96. SizedBox(
  97. height: 20.0,
  98. ),
  99. Row(
  100. mainAxisAlignment: MainAxisAlignment.center,
  101. children: <Widget>[
  102. OutlineButton(
  103. onPressed: goToPrevious,
  104. child: Text("<"),
  105. ),
  106. OutlineButton(
  107. onPressed: goToNext,
  108. child: Text(">"),
  109. ),
  110. ],
  111. ),
  112. ],
  113. ),
  114. ),
  115. );
  116. }
  117. //slide page arr
  118. goToPrevious() {
  119. carouselSlider.previousPage(
  120. duration: Duration(milliseconds: 300), curve: Curves.ease);
  121. }
  122.  
  123. goToNext() {
  124. carouselSlider.nextPage(
  125. duration: Duration(milliseconds: 300), curve: Curves.decelerate);
  126. }
  127. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement