diff --git a/lib/components/carouselwithindicatordemo.dart b/lib/components/carouselwithindicatordemo.dart new file mode 100644 index 0000000..aa8a636 --- /dev/null +++ b/lib/components/carouselwithindicatordemo.dart @@ -0,0 +1,65 @@ +import 'package:flutter/material.dart'; +import 'package:carousel_slider/carousel_slider.dart'; + +class CarouselWithIndicatorDemo extends StatefulWidget { + @override + State<StatefulWidget> createState() { + return _CarouselWithIndicatorState(); + } +} + +class _CarouselWithIndicatorState extends State<CarouselWithIndicatorDemo> { + int _current = 0; + final CarouselController _controller = CarouselController(); + final List<String> imageSliders = [ + 'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80', + 'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80', + 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80', + 'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80', + 'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80', + 'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80' + ]; + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text('Carousel with indicator controller demo')), + body: Column(children: [ + Expanded( + child: CarouselSlider( + items: imageSliders, + carouselController: _controller, + options: CarouselOptions( + autoPlay: true, + enlargeCenterPage: true, + aspectRatio: 2.0, + onPageChanged: (index, reason) { + setState(() { + _current = index; + }); + }), + ), + ), + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: imageSliders.asMap().entries.map((entry) { + return GestureDetector( + onTap: () => _controller.animateToPage(entry.key), + child: Container( + width: 12.0, + height: 12.0, + margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0), + decoration: BoxDecoration( + shape: BoxShape.circle, + color: (Theme.of(context).brightness == Brightness.dark + ? Colors.white + : Colors.black) + .withOpacity(_current == entry.key ? 0.9 : 0.4)), + ), + ); + }).toList(), + ), + ]), + ); + } +} diff --git a/lib/screens/home.dart b/lib/screens/home.dart index 64b4f8e..bcb27aa 100644 --- a/lib/screens/home.dart +++ b/lib/screens/home.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import 'package:nekoya_flutter/components/carouselwithindicatordemo.dart'; import 'package:nekoya_flutter/utils/utils.dart'; import 'package:nekoya_flutter/components/categories.dart'; @@ -42,6 +43,7 @@ class Home extends StatelessWidget { child: SearchForm(), ), const Categories(), + const CarouselWithIndicatorDemo(), const NewArrivalProducts(), const PopularProducts(), ], diff --git a/pubspec.lock b/pubspec.lock index 2f726a9..38f7cce 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -57,6 +57,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.0.1" + carousel_slider: + dependency: "direct main" + description: + name: carousel_slider + url: "https://pub.dartlang.org" + source: hosted + version: "4.1.1" characters: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index ee80913..68f3ec6 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -43,6 +43,7 @@ dependencies: page_transition: ^2.0.5 shared_preferences: ^2.0.13 universal_html: ^2.0.8 + carousel_slider: ^4.1.1 dev_dependencies: flutter_lints: ^2.0.1