Auto slide image with indicator in flutter

By -

carousel_slider #

A carousel slider widget, support infinite scroll and custom widget, with auto play feature.

Example App:-
Add carousel_pro: ^1.0.0 in your pubspec.yaml dependencies. And import it:

import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';

 void main() => runApp(MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Auto_Image_slider_with_Indicator',
  home: HomePage(),
));
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

 class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {

     return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.brown,
        title: Text("Auto_Image_slider_with_Indicator"),
      ),

       body: ListView(children: <Widget>[
        autoImagesliderwithIndicator,
      ]),
    );
  }

   Widget autoImagesliderwithIndicator = Container(
    height: 200,
    child: Carousel(
      boxFit: BoxFit.fill,
     
      images:[
      FlutterLogo(size:250),
      FlutterLogo(size:200),
      FlutterLogo(size:150),
      ],

       autoplay: true,
      autoplayDuration: Duration(seconds:2),
      dotSize: 4.0,
      dotColor: Colors.lightGreenAccent,
    ),
  );
}

Parameters and Values #

images #

All the images on this Carousel. Type: List

animationCurve #

The transition animation timing curve Default value: Curves.ease Type: Curve
Values #
  • Curves.linear;
  • Curves.fastOutSlowIn;
  • Curves.ease;
  • Curves.bounceOut;
  • Curves.bounceIn;
  • Curves.bounceInOut;
  • Curves.decelerate;
  • Curves.ease;
  • Curves.easeIn;
  • Curves.easeInOut;
  • Curves.easeOut;
  • Curves.elasticIn;
  • Curves.elasticInOut;
  • Curves.elasticOut;

animationDuration #

The transition animation duration Type: Duration Default value: 300ms.

dotSize #

The base size of the dots Type: double Default value: 8.0

dotIncreaseSize #

The increase in the size of the selected dot Type: double Default value: 2.0

dotSpacing #

The distance between the center of each dot Type: double Default value: 25.0

dotColor #

The Color of each dot Type: Color Default value: Colors.white

dotBgColor #

The background Color of the dots Type: Color Default value: Colors.grey[800].withOpacity(0.5)

showIndicator #

Enable or Disable the indicator (dots) Type: bool Default value: true

indicatorBgPadding #

Padding Size of the background Indicator Type: double Default value: 20.0

boxFit #

How to show the images in the box Type: BoxFit Default value: cover
Values #
  • BoxFit.cover;
  • BoxFit.fitWidth;
  • BoxFit.fitHeight;
  • BoxFit.scaleDown;
  • BoxFit.fill;
  • BoxFit.contain;
  • BoxFit.none;

borderRadius #

Enable/Disable radius Border for the images Type: bool Default value: false

radius #

Border Radius of the images Type: Radius Default value: Radius.circular(8.0)

moveIndicatorFromBottom #

Move the Indicator From the Bottom Type: double Default value: 0.0

noRadiusForIndicator #

Remove the radius bottom from the indicator background Type: bool Default value: false

overlayShadow #

Enable/Disable Image Overlay Shadow Type: bool Default value: false

overlayShadowColors #

Choose the color of the overlay Shadow color Type: Color Default value: Colors.grey[800]

overlayShadowSize #

Choose the size of the Overlay Shadow, from 0.0 to 1.0 Type: double Default value: 0.5

autoplay #

Enable/Disable autoplay carousel Type: bool Default value: true

autoplayDuration #


The autoplay transition duration Type: Duration Default value: 3s

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.

Comments

Post a Comment

Popular posts from this blog

Flutter Architecture | Flutter - Architecture Application

By -
Image
In this chapter, let us discuss the architecture of the Flutter framework. Widgets The core concept of the Flutter framework is  In Flutter, Everything is a widget . Widgets are basically user interface components used to create the user interface of the application. In  Flutter , the application is itself a widget. The application is the top- level widget and its UI is build using one or more children (widgets), which again build using its children widgets. This  composability  feature helps us to create a user interface of any complexity. For example, the widget hierarchy of the hello world application (created in previous chapter) is as specified in the following diagram − Here the following points are worth notable − MyApp  is the user created widget and it is build using the Flutter native widget,  MaterialApp . MaterialApp  has a home property to specify the user interface of the home page, which is again a user created widget,  MyHomePage . MyHomePage  is b
Read More »

Automatic Scrolling Image in flutter

By -
Hi, In this Flutter tutorial I am going to explain how to create auto scrolling image view this type of auto scrolling image you can use in any app to show app latest feature and new offer, so let's create flutter auto scrolling image Add  carousel_slider: ^1.3.0  in your  pubspec.yaml  dependencies. And import it: import 'package:carousel_slider/carousel_slider.dart' ; complete example import 'package:flutter/material.dart'; import 'package:carousel_slider/carousel_slider.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter ListView Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text("ListView Demo"), ), body: Container( decoration: BoxDecoration( color
Read More »