May

Flutter Page Indicator

Flutter Page Indicator:

Flutter Page indicators are the dots placed at the top OR bottom of the screen of the mobile. To select one of the two-page indicator types, depending on whether or not the pages can be navigated with a rotary action performed using the Flutter page indicator dots. when we navigate the pages the dots change the location based on the navigated page.

Creating Flutter Page Indicators:

Add the dependency package:

To use Flutter Page 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:
page_indicator: ^0.2.0

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:page_indicator/page_indicator.dart';

Example code to create Flutter page Indicator:

PageIndicatorContainer(
pageView: PageView(
children: [
Text("1"),
Text('2'),
Text('3'),
Text('4'),
],
controller: controller,
),
align: IndicatorAlign.bottom,
length: 4,
indicatorSpace: 20.0,
padding: const EdgeInsets.all(10),
indicatorColor: Colors.white,
indicatorSelectorColor: Colors.blue,
shape: IndicatorShape.circle(size: 12),
// shape: IndicatorShape.roundRectangleShape(size: Size.square(12),cornerSize: Size.square(3)),
// shape: IndicatorShape.oval(size: Size(12, 8)),
}

Complete Example code for Flutter Page Indicators:

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

main.dart

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

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

@override
_MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
PageController controller;

@override
void initState() {
super.initState();
controller = PageController();
}

@override
void dispose() {
controller.dispose();
super.dispose();
}

int counter = 0;

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Container(
color: Colors.pink,
child: Container(
height: 120.0,
child: PageIndicatorContainer(
pageView: PageView(
children: [
Text('1'),
Text('2'),
Text('3'),
Text('4'),
],
controller: controller,
),
align: IndicatorAlign.bottom,
length: 4,
indicatorSpace: 10.0,
),
),
),
);
}
}

Congratulations You Have Learned CreatingFlutter Page Indicator….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext