nekoya/app
nekoya/app
1
0
Fork 0
Code Issues Pull requests Projects Releases5 Packages Wiki Activity

Update carousel

Browse source
This commit is contained in:
Moe Poi ~ 2022-05-15 22:21:27 +07:00
parent f767280567
commit 2f83e246e3
3 changed files with 76 additions and 70 deletions

74
lib/components/carousel.dart Normal file
View file

@ -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,
));
}
}

68
lib/components/carouselwithindicatordemo.dart
View file

@ -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)));
}

4
lib/screens/home.dart
View file

@ -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(),