circle_indicator 0.0.7

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 90

circle_indicator

A library for Dart developers. It is awesome.

Demo:

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.

  1. 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.

Changelog

0.0.7

  • Now you have the possibility to add both left and right actions
  • Implement your own logic as to when to display the action widget

0.0.6

  • Add an IntroductionWidget beside the CircleIndicator

0.0.5

  • Request the page count in constructor

0.0.4

  • I won't say it again, this is embarrassing

0.0.3

  • Same stuff, I'm new, so...

0.0.2

  • Add readme gif, nothing special

0.0.1

  • Initial version, created by long1eu

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:

with Flutter:


$ flutter packages get

Alternatively, your editor might support packages 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';
        
Version Uploaded Documentation Archive
0.0.7 Jun 9, 2017 Go to the documentation of circle_indicator 0.0.7 Download circle_indicator 0.0.7 archive
0.0.6 Jun 9, 2017 Go to the documentation of circle_indicator 0.0.6 Download circle_indicator 0.0.6 archive
0.0.5 Jun 8, 2017 Go to the documentation of circle_indicator 0.0.5 Download circle_indicator 0.0.5 archive
0.0.4 Jun 8, 2017 Go to the documentation of circle_indicator 0.0.4 Download circle_indicator 0.0.4 archive
0.0.3 Jun 8, 2017 Go to the documentation of circle_indicator 0.0.3 Download circle_indicator 0.0.3 archive
0.0.2 Jun 8, 2017 Go to the documentation of circle_indicator 0.0.2 Download circle_indicator 0.0.2 archive
0.0.1 Jun 8, 2017 Go to the documentation of circle_indicator 0.0.1 Download circle_indicator 0.0.1 archive

Analysis

This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • completed on Feb 3, 2018
  • Dart: 2.0.0-dev.20.0
  • pana: 0.10.1
  • Flutter: 0.0.22

Scores

Popularity:
Describes how popular the package is relative to other packages. [more]
80 / 100
Health:
Code health derived from static analysis. [more]
98 / 100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100 / 100
Overall score:
Weighted score of the above. [more]
90

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use circle_indicator.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.20.1 <2.0.0
flutter 0.0.0
Transitive dependencies
async 2.0.3
charcode 1.1.1
collection 1.14.5
http 0.11.3+16
http_parser 3.1.1
meta 1.1.1 1.1.2
path 1.5.1
sky_engine 0.0.99
source_span 1.4.0
string_scanner 1.0.2
typed_data 1.1.4 1.1.5
vector_math 2.0.5
Dev dependencies
test ^0.12.0