circle_indicator 0.0.7

Small library that builds a circle indicator for the PageViewer that can be used on Android and iOS apps.

circle_indicator

A library for Dart developers. It is awesome.

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: <Widget>[
              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 = <StartPageItem>[
      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.