Smooth Page Indicator Package

Introduction of Smooth Page Indicator Package

The smooth page indicator package in Flutter provides a customizable and visually appealing way to indicate the current page in a PageView. It offers a variety of built-in indicators, such as dots, worms, and scroll indicators, that smoothly animate as the user swipes between pages.

Key Features:

• Customizable Indicators: Various built-in indicator styles, such as dots, worms, and scroll indicators.
• Smooth Animations: Smooth animations to enhance user experience.
• Flexible Customization: Numerous properties to customize the appearance and behavior of the indicators.

Installation:

To use the smooth_page_indicator package, add it to your pubspec.yaml file:

dependencies:
  smooth_page_indicator: ^0.3.0  # Use the latest version

Run flutter pub get to install the package.

Importing the Package:

import 'package:smooth_page_indicator/smooth_page_indicator.dart';

Properties of Smooth Page Indicator Package:

controller: The PageController that controls the PageView. It is used to synchronize the indicator with the page view.

SmoothPageIndicator(
  controller: pageController,
  // Other properties...
)

effect: Specifies the visual effect of the indicator. Several built-in effects are available, such as ScrollingDotsEffect, WormEffect, and JumpingDotEffect.

SmoothPageIndicator(
  effect: WormEffect(
    dotColor: Colors.grey,
    activeDotColor: Colors.blue,
    dotHeight: 12,
    dotWidth: 12,
  ),
  // Other properties...
)

onDotClicked: A callback function that is triggered when a dot is clicked. It provides the index of the clicked dot, allowing you to perform actions such as navigating to the corresponding page.

SmoothPageIndicator(
  onDotClicked: (index) {
    pageController.animateToPage(
      index,
      duration: Duration(milliseconds: 500),
      curve: Curves.ease,
    );
  },
  // Other properties...
)

Built-in Effects:

ScrollingDotsEffect: A standard scrolling dots effect.

effect: ScrollingDotsEffect(
  dotWidth: 10,
  dotHeight: 10,
  activeDotScale: 1.2,
  dotColor: Colors.grey,
  activeDotColor: Colors.blue,
),

WormEffect: An effect where the dots transform into a worm-like animation.

effect: WormEffect(
  dotWidth: 16,
  dotHeight: 16,
  dotColor: Colors.grey,
  activeDotColor: Colors.blue,
),

JumpingDotEffect: An effect where the active dot jumps up.

effect: JumpingDotEffect(
  dotWidth: 10,
  dotHeight: 10,
  jumpScale: 2.0,
  dotColor: Colors.grey,
  activeDotColor: Colors.blue,
),

Usage:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final PageController pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Smooth Page Indicator Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              height: 300,
              child: PageView(
                controller: pageController,
                children: [
                  Container(color: Colors.red),
                  Container(color: Colors.blue),
                  Container(color: Colors.green),
                ],
              ),
            ),
            SizedBox(height: 16),
            SmoothPageIndicator(
              controller: pageController,
              count: 3,
              effect: WormEffect(
                dotColor: Colors.grey,
                activeDotColor: Colors.blue,
                dotHeight: 12,
                dotWidth: 12,
              ),
              onDotClicked: (index) {
                pageController.animateToPage(
                  index,
                  duration: Duration(milliseconds: 500),
                  curve: Curves.ease,
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Post Widget : This widget will use in Final Code.

import 'package:flutter/material.dart';

class MyPost1 extends StatelessWidget {
  const MyPost1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Padding(
        padding: const EdgeInsets.all(40),
        child: ClipRRect(
          borderRadius: BorderRadius.circular(10),
          child: Container(
            color: Colors.deepOrange,
          ),
        ),
      ),
    );
  }
}

Final Code: This is the final code with the combination of some above Smooth Page Indicator properties.

import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:studymaterial/post/post_1.dart';
import 'package:studymaterial/post/post_2.dart';
import 'package:studymaterial/post/post_3.dart';

class HomePage extends StatelessWidget {
  final _controller = PageController();

  HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color.fromARGB(106, 255, 109, 64),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          SizedBox(
            height: 500,
            child: PageView(
              controller: _controller,
              children: const [
                MyPost1(),
                MyPost2(),
                MyPost3(),
              ],
            ),
          ),
          // dot indicators
          SmoothPageIndicator(
            controller: _controller,
            count: 3,
            effect: JumpingDotEffect(
              activeDotColor: Colors.deepOrange.shade700,
              dotColor: Color.fromARGB(107, 108, 40, 19),
              spacing: 15,
            ),
          ),
        ],
      ),
    );
  }
}

In this example, the Smooth Page Indicator widget is used to create a worm effect page indicator for a PageView. The indicator synchronizes with the PageView through the PageController and animates smoothly as the user swipes between pages. The properties such as count, effect, and onDotClicked are set to customize the indicator’s behavior and appearance. Adjust these properties to fit your specific design and functionality requirements.

Thank for visiting Hybrid App Development
Posted by Hussam HM