From b77a83b9e50c47913e4c2ffb0b701129ecd8b032 Mon Sep 17 00:00:00 2001
From: Kelvin Samuel <kelvinbalkes@gmail.com>
Date: Sun, 15 May 2022 16:46:39 +0700
Subject: [PATCH] add carousel slider in home page
---
lib/components/carouselwithindicatordemo.dart | 65 +++++++++++++++++++
lib/screens/home.dart | 2 +
pubspec.lock | 7 ++
pubspec.yaml | 1 +
4 files changed, 75 insertions(+)
create mode 100644 lib/components/carouselwithindicatordemo.dart
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