PageView Indicator In Flutter :
This flutter tutorial post is Slide text, image, note etc. This widget name is PageView in flutter. This flutter example use 4 tutorial Flutter Tutorial, Dart Tutorial, Android Tutorial, Java Tutorial.
PageIndicatorContainer custom widget properties:
1) key
2) controller
3) PageView
4) reverse : Start the slider first or last position.
5) align : Indicator is displat top, bottom, center.
6) length : Total number of items.
7) indicatorSpace : Between two indicator space.
9) indicatorColor : All indicator color set.
10) indicatorSelectorColor : Selected indicator color set.
Screenshot :
main.dart
import 'package:flutter/material.dart';
import 'package:fluttertutorial/container.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Tutorial',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'PageView in Flutter'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController controller;
GlobalKey<PageContainerState> key = GlobalKey();
@override
void initState() {
super.initState();
controller = PageController();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Container(
color: Colors.blue.withOpacity(0.1),
child: Container(
height: 150.0,
child: PageIndicatorContainer(
key: key,
child: PageView(
children: <Widget>[
Center(child: Text('Flutter Tutorial')),
Center(child: Text('Dart Tutorial')),
Center(child: Text('Android Tutorial')),
Center(child: Text('Java Tutorial')),
],
controller: controller,
reverse: false,
),
align: IndicatorAlign.bottom,
length: 4,
indicatorSpace: 10.0,
indicatorColor: Colors.white,
indicatorSelectorColor: Colors.blue,
))));
}
}
indicator.dart
import 'package:flutter/material.dart';
import 'package:fluttertutorial/container.dart';
import 'package:fluttertutorial/shape.dart';
class PageIndicator extends StatefulWidget {
final Color color;
final Color selectedColor;
final int length;
final double indicatorSpace;
final IndicatorShape indicatorShape;
final IndicatorAlign align;
final bool reverse;
final double currentPage;
final double initialPage;
const PageIndicator({
Key key,
this.color = Colors.white,
this.selectedColor = Colors.grey,
@required this.length,
@required this.currentPage,
this.initialPage = 0,
this.indicatorSpace = 5.0,
this.indicatorShape = IndicatorShape.defaultCircle,
this.align = IndicatorAlign.bottom,
this.reverse = false,
}) : super(key: key);
@override
_PageIndicatorState createState() => _PageIndicatorState();
}
class _PageIndicatorState extends State<PageIndicator> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
CustomPainter indicatorPainter;
IndicatorShape shape = widget.indicatorShape;
bool reverse = widget.reverse;
final page = widget.currentPage ?? widget.initialPage;
if (shape is OvalShape) {
indicatorPainter = OvalPainter(
color: widget.color,
selectedColor: widget.selectedColor,
count: widget.length,
page: page,
padding: widget.indicatorSpace,
size: shape.size,
);
} else if (shape is RoundRectangleShape) {
indicatorPainter = RRectPainter(
color: widget.color,
selectedColor: widget.selectedColor,
count: widget.length,
page: page,
padding: widget.indicatorSpace,
size: shape.size,
cornerSize: shape.cornerSize,
);
} else if (shape is CircleShape) {
indicatorPainter = CirclePainter(
color: widget.color,
selectedColor: widget.selectedColor,
count: widget.length,
page: page,
padding: widget.indicatorSpace,
radius: shape.size / 2,
);
}
return IgnorePointer(
child: RotatedBox(
quarterTurns: reverse ? 2 : 0,
child: CustomPaint(
child: Container(
height: shape.height,
),
size: Size.fromHeight(shape.height),
painter: indicatorPainter,
),
),
);
}
}
class OvalPainter extends CustomPainter {
double page;
int count;
Color color;
Color selectedColor;
double padding;
Paint _circlePaint;
Paint _selectedPaint;
Size size;
OvalPainter({
this.page = 0.0,
this.count = 0,
this.color = Colors.white,
this.selectedColor = Colors.grey,
this.padding = 5.0,
this.size,
}) {
_circlePaint = Paint();
_circlePaint.color = color;
_selectedPaint = Paint();
_selectedPaint.color = selectedColor;
this.page ??= 0.0;
this.count ??= 0;
this.color ??= Colors.white;
this.selectedColor ??= Colors.grey;
this.size ??= Size(12, 12);
this.padding ??= 5.0;
}
double get totalWidth => count * size.width + padding * (count - 1);
@override
void paint(Canvas canvas, Size size) {
var height = this.size.height;
var width = this.size.width;
var centerWidth = size.width / 2;
var startX = centerWidth - totalWidth / 2;
for (var i = 0; i < count ?? 0; i++) {
var x = startX + i * (width + padding);
var rect = Rect.fromLTWH(x, 0, width, height);
canvas.drawOval(rect, _circlePaint);
}
var selectedX = startX + page * (width + padding);
var rect = Rect.fromLTWH(selectedX, 0, width, height);
canvas.drawOval(rect, _selectedPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
class RRectPainter extends CustomPainter {
double page;
int count;
Color color;
Color selectedColor;
double padding;
Paint _circlePaint;
Paint _selectedPaint;
Size size;
Size cornerSize;
RRectPainter({
this.page = 0.0,
this.count = 0,
this.color = Colors.white,
this.selectedColor = Colors.grey,
this.padding = 5.0,
this.size,
this.cornerSize,
}) {
_circlePaint = Paint();
_circlePaint.color = color;
_selectedPaint = Paint();
_selectedPaint.color = selectedColor;
this.page ??= 0.0;
this.count ??= 0;
this.color ??= Colors.white;
this.selectedColor ??= Colors.grey;
this.size ??= Size(12, 12);
this.padding ??= 5.0;
}
double get totalWidth => count * size.width + padding * (count - 1);
@override
void paint(Canvas canvas, Size size) {
var height = this.size.height;
var width = this.size.width;
var centerWidth = size.width / 2;
var startX = centerWidth - totalWidth / 2;
for (var i = 0; i < count ?? 0; i++) {
var x = startX + i * (width + padding);
var rect = Rect.fromLTWH(x, 0, width, height);
var rrect = RRect.fromRectAndRadius(
rect,
Radius.elliptical(cornerSize.width, cornerSize.height),
);
canvas.drawRRect(rrect, _circlePaint);
}
var selectedX = startX + page * (width + padding);
var rect = Rect.fromLTWH(selectedX, 0, width, height);
var rrect = RRect.fromRectAndRadius(
rect,
Radius.elliptical(cornerSize.width, cornerSize.height),
);
canvas.drawRRect(rrect, _selectedPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
class CirclePainter extends CustomPainter {
double page;
int count;
Color color;
Color selectedColor;
double radius;
double padding;
Paint _circlePaint;
Paint _selectedPaint;
CirclePainter({
this.page = 0.0,
this.count = 0,
this.color = Colors.white,
this.selectedColor = Colors.grey,
this.radius = 12.0,
this.padding = 5.0,
}) {
_circlePaint = Paint();
_circlePaint.color = color;
_selectedPaint = Paint();
_selectedPaint.color = selectedColor;
this.page ??= 0.0;
this.count ??= 0;
this.color ??= Colors.white;
this.selectedColor ??= Colors.grey;
this.radius ??= 12.0;
this.padding ??= 5.0;
}
double get totalWidth => count * radius * 2 + padding * (count - 1);
@override
void paint(Canvas canvas, Size size) {
var centerWidth = size.width / 2;
var startX = centerWidth - totalWidth / 2;
for (var i = 0; i < count ?? 0; i++) {
var x = startX + i * (radius * 2 + padding) + radius;
canvas.drawCircle(Offset(x, radius), radius, _circlePaint);
}
var selectedX = startX + page * (radius * 2 + padding) + radius;
canvas.drawCircle(Offset(selectedX, radius), radius, _selectedPaint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
shape.dart
import 'package:flutter/widgets.dart';
abstract class IndicatorShape {
const IndicatorShape._();
static const defaultCircle = const CircleShape(12.0);
static const defaultRoundRectangle = const RoundRectangleShape();
static const defaultOval = const OvalShape();
factory IndicatorShape.circle({double size = 12.0}) {
return CircleShape(size);
}
factory IndicatorShape.roundRectangleShape({
Size size = const Size(12.0, 12.0),
Size cornerSize = const Size.square(3),
}) {
return RoundRectangleShape(
cornerSize: cornerSize,
size: size,
);
}
factory IndicatorShape.oval({Size size = const Size(12, 8)}) {
return OvalShape(size: size);
}
double get height;
double get width;
}
class CircleShape extends IndicatorShape {
final double size;
const CircleShape(this.size) : super._();
@override
double get height => this.size;
@override
double get width => this.size;
}
class RoundRectangleShape extends IndicatorShape {
final Size size;
final Size cornerSize;
const RoundRectangleShape({
this.size = const Size(12, 12),
this.cornerSize = const Size.square(3),
}) : super._();
@override
double get height => this.size.height;
@override
double get width => this.size.width;
}
class OvalShape extends IndicatorShape {
final Size size;
const OvalShape({
this.size = const Size(12, 4),
}) : super._();
@override
double get height => this.size.height;
@override
double get width => this.size.width;
}
container.dart
import 'package:flutter/material.dart';
import 'package:fluttertutorial/indicator.dart';
import 'package:fluttertutorial/shape.dart';
enum IndicatorAlign {
top,
center,
bottom,
}
class PageIndicatorContainer extends StatefulWidget {
final Widget child;
final int length;
final EdgeInsets padding;
final IndicatorAlign align;
final IndicatorShape shape;
final Color indicatorColor;
final Color indicatorSelectorColor;
final double indicatorSpace;
const PageIndicatorContainer({
Key key,
@required this.child,
@required this.length,
this.padding = const EdgeInsets.only(bottom: 10.0, top: 10.0),
this.align = IndicatorAlign.bottom,
this.indicatorColor = Colors.white,
this.indicatorSelectorColor = Colors.grey,
this.indicatorSpace = 8.0,
this.shape = IndicatorShape.defaultCircle,
}) : super(key: key);
@override
PageContainerState createState() => PageContainerState();
}
class PageContainerState extends State<PageIndicatorContainer> {
double currentPage;
@override
Widget build(BuildContext context) {
if (widget.child is! PageView) {
return widget.child;
}
double height = widget.shape.height;
final initPage = pageView?.controller?.initialPage ?? 0.0;
final currentPage = this.currentPage ?? initPage.toDouble();
Widget indicator = PageIndicator(
length: widget.length,
color: widget.indicatorColor,
selectedColor: widget.indicatorSelectorColor,
indicatorSpace: widget.indicatorSpace,
indicatorShape: widget.shape,
align: widget.align,
reverse: pageView.reverse,
currentPage: currentPage,
initialPage: initPage.toDouble(),
);
var align = widget.align;
if (align == IndicatorAlign.bottom) {
indicator = Positioned(
left: 0.0,
right: 0.0,
bottom: widget.padding.bottom,
height: height,
child: indicator,
);
} else if (align == IndicatorAlign.top) {
indicator = Positioned(
left: 0.0,
right: 0.0,
top: widget.padding.top,
height: height,
child: indicator,
);
} else if (align == IndicatorAlign.center) {
indicator = Center(
child: Container(
child: indicator,
height: height,
),
);
}
return Stack(
children: <Widget>[
NotificationListener<ScrollNotification>(
child: pageView,
onNotification: _onScroll,
),
indicator,
],
);
}
PageView get pageView => widget.child;
bool _onScroll(ScrollNotification notification) {
if (notification is ScrollUpdateNotification) {
final PageMetrics metrics = notification.metrics;
currentPage = metrics.page;
setState(() {});
}
return false;
}
void forceRefreshState() {
this.setState(() {});
}
}
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in
