Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/long1eu/circle_indicator
- Owner: long1eu
- License: bsd-3-clause
- Created: 2017-06-08T14:07:10.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-11-29T11:14:32.000Z (about 7 years ago)
- Last Synced: 2024-08-02T15:06:13.453Z (5 months ago)
- Language: Dart
- Size: 3.88 MB
- Stars: 38
- Watchers: 3
- Forks: 14
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter - Circle Indicator - Circle indicator for the PageViewer by [Lung Razvan](https://github.com/long1eu). (Components / Navigation)
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