Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/long1eu/circle_indicator

Small library that build a circle indicator for the PagerViewer. This can be used in Android and iOS apps.
https://github.com/long1eu/circle_indicator

Last synced: 2 months ago
JSON representation

Small library that build a circle indicator for the PagerViewer. This can be used in Android and iOS apps.

Awesome Lists containing this project

README

        

# circle_indicator

A library for Dart developers. It is awesome.

![Demo:](https://raw.githubusercontent.com/thelong1EU/circle_indicator/master/indicator.gif)

## Installation

1. Depend on it
Add this to your package's pubspec.yaml file:

dependencies:
circle_indicator: "^0.0.7"

2. Install it
You can install packages from the command line:

$ pub get

Alternatively, your editor might support 'pub get'. Check the docs for your editor to learn more.

3. Import it
Now in your Dart code, you can use:

import 'package:circle_indicator/circle_indicator.dart';

## Usage

A simple usage example for the CircleIndicator:

final PageController controller = new PageController();

@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Container(
padding: new EdgeInsets.only(top: 16.0,),
decoration: new BoxDecoration(
color: primaryColor
),
child: new Stack(
alignment: FractionalOffset.bottomCenter,
children: [
new PageView.builder(
controller: controller,
itemCount: pageList.length,
itemBuilder: (_, int i) => pageList[i],
),
new Container(
margin: new EdgeInsets.only(
top: 16.0,
bottom: 16.0,
),
child: new CircleIndicator(controller, pageList.length,
3.0, Colors.white70, Colors.white)
),
),
],
)
),
);
}

If you want to use the whole IntroductionWidget you can do it like so:

class StartPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
var pageList = [
new StartPageItem("assets/ic_info_01.png"),
new StartPageItem("assets/ic_info_02.png"),
new StartPageItem("assets/ic_info_03.png"),
new StartPageItem("assets/ic_info_04.png"),
new StartPageItem("assets/ic_info_05.png"),
new StartPageItem("assets/ic_info_06.png"),
new StartPageItem("assets/ic_info_07.png"),
new StartPageItem("assets/ic_info_08.png"),
];

return new Scaffold(
body: new IntroductionWidget(
pageList: pageList,
circleIndicator: new CircleIndicator.withIntroduction(
pageList.length, 3.0, Colors.white70, Colors.white),
rightAction: () => startApp(context),
rightText: new Text("START",
style: Theme
.of(context)
.textTheme
.body1
.copyWith(
color: Colors.white,),
),
backgroundColor: primaryColor,
),
);
}


void startApp(BuildContext context) {
Navigator.popAndPushNamed(context, HomePage.routeName);
}
}

You can add both left and right actions:

return new Scaffold(
body: new IntroductionWidget(
pageList: pageList,
circleIndicator: new CircleIndicator.withIntroduction(
pageList.length, 3.0, Colors.white70, Colors.white),
rightAction: () => startApp(context),
///called every time the page changes with the page number
showRight: (page) => page == 5,
rightText: new Text("START",
style: Theme
.of(context)
.textTheme
.body1
.copyWith(
color: Colors.white,),
),

leftAction: () => startApp(context),
///called every time the page changes with the page number
showLeft: (page) => true,
leftText: new Text("SKIP",
style: Theme
.of(context)
.textTheme
.body1
.copyWith(
color: Colors.white,),
),
backgroundColor: primaryColor,
),
);

## Features and bugs

Please file feature requests and bugs at the [issue tracker][tracker].

[tracker]: https://github.com/thelong1EU/circle_indicator/issues