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

      ),

    ],

  ),

)

        ),

      ),

    );

  }

}

 

 

 

About Author

Author Image
Saurabh Singh

Saurabh is working as a Mobile Application Developer with an overall 1+ years of experience. His areas of expertise are Flutter and Android Development. He is a detail-oriented person with good problem-solving skills.

Request for Proposal

Name is required

Comment is required

Sending message..