May

Flutter Dots Indicator

Flutter Dots Indicator:

In this tutorial, we are going to learn about Flutter Dots Indicator used for indicating the particular page. Flutter Dots Indicator is used to show a particular page when we move from one page to another page. It shows as a series of small indicator dots, that represents the available pages in the order they were opened. A solid dot denotes the current page that we are using.

Creating Flutter Dots Indicators:

Add the dependency package:

adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
dots_indicator: ^0.0.5+1

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:dots_indicator/dots_indicator.dart';

Creating A simple dots indicator:

Using the below code we are creating the A simple dots indicator, in this example the page length is the number of pages in that list and the solid dot in the list of dots indicates the current page.

new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage
)

Creating Custom Colored Dot Indicators:

Use the below code to create custom colored dot indicators as shown in below image. we are customizing it as a red colored dot indicator you can create with any color you want using the below code.

new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
color: Colors.black87,
activeColor: Colors.redAccent,
),
)

Creating Custom size dot Indicators:

use the below code to create Custom size dot indicators the default size of the dots will be rounded circle border. now we are changing it to a rounded rectangle for active page means the current page.

new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
size: const Size.square(9.0),
activeSize: const Size(18.0, 9.0),
activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
),
)

Creating Custom shape Dot Indicators:

you can change the shape of the dots, the default shape of the dot is the circular border. use the below code to change the shape of the dots indicators.

new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
shape: const Border(),
activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
),
)

Change the space between dots Indicators:

We can change the space between the dots indicators. the default space between the dots will be 6 pixels. we can change this default space by using the below code to create custom space between the dots indicators. as shown in the below image.

new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
spacing: const EdgeInsets.all(10.0),
),
)

Complete Example code for Flutter Dots Indicators:

Copy and Paste the below code into your main.dart file

main.dart

code under some changes we will update soon here

please be patience

PrevNext