Welcome dear readers for my new post. Today I am gonna enhance your flutter knowledge by introducing new widget, Carousel Slider. Carousel Slider is one of the most popular image slider used nowadays in most apps.
Carousel - is a Pin with multiple images, which have short descriptions about images for better understanding content of image. Carousel's images can be slide automatically or manually. People can see the carousel in their home screen and can swipe through different images.
Let's create our own Carousel Slider
Before to start coding, you need to know properties of carousel slider:
- Items: In which we have to declare Asset Images or Network Images that are used in our app
- Options: It consists of many properties such as:
- height: Overall height of card to display the image
- autoplay: Cards automatically slides at a time
- autoplaycurve: Determines the animation curve
- aspectRatio: Aspect Ratio is used to declare the height
- autoPlayAnimationDuration: Used to declare time for automated slide
- Coding steps:
- 1. Add carousel slider dependency in pubspec.yaml file:
dependencies:
carousel_slider: ^2.3.1
- 2. Navigate to main.dart() file and MaterialApp():
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Carousel Slider',
theme: ThemeData(
primarySwatch: Colors.green,
),
darkTheme: ThemeData.dark(),
home: HomePage(),
);
}
}
- 3. Now, create HomePage(), which contains CarouselSlider():
In HomePage.dart() first we have to import our package carousel-slider.dart. Then we have created appbar inside Scaffold(). In this appbar we have given the title of the App. After that. Inside the body, we have declared ListView() inside which we have declared CarouselSlider() in which we have given 5 items. Each item is placed inside a Container() which consists of properties such as margin which is given from all sides. After that, we have given boxdecoration which is used to decorate our Container(). We have given boderRadius as circular. Which makes our Container() rounded from all sides by giving a specific radius. Now we have given an image in which we have declared DecorationImage() which is used to display images in our Container() through URL. And have fit the image as BoxFit.cover. Which adjust image as container size. Now for the other 4 containers, we have followed the same steps. After that, we have declared CarouselOptions() in options
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("GFG Slider"),
),
body: ListView(
children: [
CarouselSlider(
items: [
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("ADD IMAGE URL HERE"),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("ADD IMAGE URL HERE"),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("ADD IMAGE URL HERE"),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("ADD IMAGE URL HERE"),
fit: BoxFit.cover,
),
),
),
Container(
margin: EdgeInsets.all(6.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage("ADD IMAGE URL HERE"),
fit: BoxFit.cover,
),
),
),
],
options: CarouselOptions(
height: 180.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
),
],
),
);
}
}
Conclusion:
Carousels convey context very fast and easy way to stick users with images and make advertising. You can further extend this as navigating each image a respective view and add some short descriptions about images, which will describe more about the context.
❤ ❤ Thanks for reading this article ❤❤
Комментарии
Отправить комментарий