From 2f83e246e32608cee364fff4fa1850550e0d0c04 Mon Sep 17 00:00:00 2001
From: Moe <moe@chocola.dev>
Date: Sun, 15 May 2022 22:21:27 +0700
Subject: [PATCH] Update carousel
---
lib/components/carousel.dart | 74 +++++++++++++++++++
lib/components/carouselwithindicatordemo.dart | 68 -----------------
lib/screens/home.dart | 4 +-
3 files changed, 76 insertions(+), 70 deletions(-)
create mode 100644 lib/components/carousel.dart
delete mode 100644 lib/components/carouselwithindicatordemo.dart
diff --git a/lib/components/carousel.dart b/lib/components/carousel.dart
new file mode 100644
index 0000000..9a4db11
--- /dev/null
+++ b/lib/components/carousel.dart
@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:carousel_slider/carousel_slider.dart';
+
+class Carousel extends StatefulWidget {
+ Carousel({Key? key}) : super(key: key);
+
+ @override
+ State<Carousel> createState() => _CarouselState();
+}
+
+final List<String> imgList = [
+ 'assets/Carousel_1.webp',
+ 'assets/Carousel_2.webp',
+ 'assets/Carousel_3.webp'
+];
+
+class _CarouselState extends State<Carousel> {
+ final List<Widget> imageSliders = imgList
+ .map((item) => Container(
+ child: Container(
+ margin: EdgeInsets.all(5.0),
+ child: ClipRRect(
+ borderRadius: BorderRadius.all(Radius.circular(5.0)),
+ child: Stack(
+ children: <Widget>[
+ Image.asset(item, fit: BoxFit.cover, width: 1000.0),
+ Positioned(
+ bottom: 0.0,
+ left: 0.0,
+ right: 0.0,
+ child: Container(
+ decoration: BoxDecoration(
+ gradient: LinearGradient(
+ colors: [
+ Color.fromARGB(200, 0, 0, 0),
+ Color.fromARGB(0, 0, 0, 0)
+ ],
+ begin: Alignment.bottomCenter,
+ end: Alignment.topCenter,
+ ),
+ ),
+ padding: EdgeInsets.symmetric(
+ vertical: 10.0, horizontal: 20.0),
+ child: Text(
+ 'No. ${imgList.indexOf(item)} image',
+ style: TextStyle(
+ color: Colors.white,
+ fontSize: 20.0,
+ fontWeight: FontWeight.bold,
+ ),
+ ),
+ ),
+ ),
+ ],
+ )),
+ ),
+ ))
+ .toList();
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ child: CarouselSlider(
+ options: CarouselOptions(
+ aspectRatio: 2.0,
+ enlargeCenterPage: true,
+ enableInfiniteScroll: false,
+ initialPage: 2,
+ autoPlay: true,
+ ),
+ items: imageSliders,
+ ));
+ }
+}
diff --git a/lib/components/carouselwithindicatordemo.dart b/lib/components/carouselwithindicatordemo.dart
deleted file mode 100644
index cbb06bd..0000000
--- a/lib/components/carouselwithindicatordemo.dart
+++ /dev/null
@@ -1,68 +0,0 @@
-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<Widget> imgList = [
- Container(
- decoration: BoxDecoration(
- image:
- DecorationImage(image: AssetImage("assets/Carousel_1.webp"))))
- ];
-
- @override
- Widget build(BuildContext context) {
- return Column(
- children: [
- CarouselSlider(
- items: imgList,
- carouselController: _controller,
- options: CarouselOptions(
- height: 202,
- autoPlay: true,
- enlargeCenterPage: true,
- aspectRatio: 2.0,
- onPageChanged: (index, reason) {
- setState(() {
- _current = index;
- });
- }),
- ),
- Row(
- mainAxisAlignment: MainAxisAlignment.center,
- children: imgList.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.white)
- .withOpacity(_current == entry.key ? 0.9 : 0.4)),
- ),
- );
- }).toList(),
- ),
- ],
- );
- }
-
- Widget buildimage(String ImageList, int index) => ClipRRect(
- borderRadius: BorderRadius.circular(20),
- child: Container(
- margin: EdgeInsets.all(5),
- color: Colors.amber,
- child: Image.asset(ImageList, fit: BoxFit.cover)));
-}
diff --git a/lib/screens/home.dart b/lib/screens/home.dart
index 5b41fe1..582393b 100644
--- a/lib/screens/home.dart
+++ b/lib/screens/home.dart
@@ -1,9 +1,9 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:nekoya_flutter/components/bannerimage.dart';
-import 'package:nekoya_flutter/components/carouselwithindicatordemo.dart';
import 'package:nekoya_flutter/utils/utils.dart';
+import 'package:nekoya_flutter/components/carousel.dart';
import 'package:nekoya_flutter/components/new_arrival_products.dart';
import 'package:nekoya_flutter/components/popular_products.dart';
import 'package:nekoya_flutter/components/search_form.dart';
@@ -42,7 +42,7 @@ class Home extends StatelessWidget {
padding: EdgeInsets.symmetric(vertical: defaultPadding),
child: SearchForm(),
),
- CarouselWithIndicatorDemo(),
+ Carousel(),
const NewArrivalProducts(),
const Bannerimage(),
const PopularProducts(),