Flutter image slider with indicator
Posted By : Saurabh Singh | 31-Oct-2022
1)Creating Project in Flutter
1.1) open android studio and click on file > new >new flutter project
After that you need to provide some basic details about your project like project name, description organization, etc then hit the finish button. It will create a new project in Flutter.
1.2) open new pubspec.yaml file and install plugin(required).
1.2.1)carousel_slider
1.2.2)get.// for state management
2)Creating Carousel Image Slider
code for image slider
Container(
height: 250,
child: Column(
children: [
Expanded(
child: CarouselSlider(
items: <Widget>[
for (var i = 0; i < singledata.smPictures!.length; i++) // path of image which you want to display in image slider
Stack(
children: [
Container(
//margin: const EdgeInsets.only(top: 10.0, ),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
singledata.smPictures![i]["image"].toString()),
fit: BoxFit.fitHeight,
),
border: Border.all(
color: kblue),
borderRadius: BorderRadius.circular(0),
),
),
],
)
] ,
carouselController: _controller,
options: CarouselOptions(
height: 150,
autoPlay: true,
enlargeCenterPage: true,
viewportFraction: 1,
aspectRatio: 14 /8,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: singledata.smPictures!.asMap().entries.map((entry) {
return GestureDetector(
onTap: () => _controller.animateToPage(entry.key),
child: Container(
width: 12.0,
height: 12.0,
margin: EdgeInsets.only(top: 8.0, left: 4.0, right:4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (Theme.of(context).brightness == Brightness.dark
? kdotblue3
: kblue)
.withOpacity(_current == entry.key ? 0.9 : 0.4)),
),
);
}).toList(),
),
],
),
)
Code of Main.dart file
import 'package:badge/customise_badge.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return GetMaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CustomiseImageSlider(),
);
}
}
Code for customise slider images
import 'package:flutter/material.dart';
class CustomiseImages extends StatefulWidget {
const CustomiseImages({Key? key}) : super(key: key);
@override
State<CustomiseImages> createState() => _CustomiseImagesState();
}
class _CustomiseImagesState extends State<CustomiseImages> {
final CarouselController _controller = CarouselController();
@override
Widget build(BuildContext context) {
return Scaffold(
body:SafeArea(
child:Center(
child:
Container(
height: 250,
child: Column(
children: [
Expanded(
child: CarouselSlider(
items: <Widget>[
for (var i = 0; i < singledata.smPictures!.length; i++)
Stack(
children: [
Container(
//margin: const EdgeInsets.only(top: 10.0, ),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
singledata.smPictures![i]["image"].toString()),
fit: BoxFit.fitHeight,
),
border: Border.all(
color: kblue),
borderRadius: BorderRadius.circular(0),
),
),
],
)
] ,
carouselController: _controller,
options: CarouselOptions(
height: 150,
autoPlay: true,
enlargeCenterPage: true,
viewportFraction: 1,
aspectRatio: 14 /8,
onPageChanged: (index, reason) {
setState(() {
_current = index;
});
}),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: singledata.smPictures!.asMap().entries.map((entry) {
return GestureDetector(
onTap: () => _controller.animateToPage(entry.key),
child: Container(
width: 12.0,
height: 12.0,
margin: EdgeInsets.only(top: 8.0, left: 4.0, right:4),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: (Theme.of(context).brightness == Brightness.dark
? kdotblue3
: kblue)
.withOpacity(_current == entry.key ? 0.9 : 0.4)),
),
);
}).toList(),
),
],
),
)
),
),
);
}
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Saurabh Singh
Saurabh is working as a Mobile Application Developer with an overall 2+ years of experience. His areas of expertise are Flutter and Android Development. He is a detail-oriented person with good problem-solving skills.