custom_loading_indicator 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 66

custom_loading_indicator #

A Flutter package to customise the loading indicators with your organisation's logo.

Let's say you're a dentist and your app has the standard circular loading indicator. If you want to try something new, this is what your customised loading indicators would like!

     

Note #

Make sure you provide an imagePath for an image that has been registered as an asset in your pubsec.yaml file.

[0.0.1] - 02/06/2020 #

Initial release of the custom loading indicator dart package.

[0.0.1+1] - 02/06/2020 #

Added gif to pub.dev README.

[0.0.1+2] - 08/06/2020 #

Added relativeSizes and relativeSpeeds to control the indicator.

[0.0.2] - 22/06/2020 #

Added custom fading indicator.

[0.0.2+1] - 22/06/2020 #

Updated example.

[1.0.0] - 01/07/2020 #

Added the custom oscillatory loading indicator

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:custom_loading_indicator/custom_loading_indicator.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

// CHECK LINES 49 ONWARDS FOR THE SAMPLE IMPLEMENTATIONS

// Kindly gnore this code, it has nothing to with the implementations
class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        routes: {
          '/CustomCircularExample': (BuildContext context) =>
              CustomCircularExample(),
          '/CustomFadeExample': (BuildContext context) => CustomFadeExample(),
          '/CustomOscillatoryExample': (BuildContext context) =>
              CustomOscillatoryExample()
        },
        home: Builder(
          builder: (context) => Container(
              child: SafeArea(
            child: Column(
              children: <Widget>[
                RaisedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/CustomCircularExample');
                  },
                  child: Text("Custom Loading Indicator",
                      overflow: TextOverflow.clip),
                ),
                RaisedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/CustomFadeExample');
                  },
                  child: Text("Custom Fading Indicator",
                      overflow: TextOverflow.clip),
                ),
                RaisedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, '/CustomOscillatoryExample');
                  },
                  child: Text("Custom Oscillatory Indicator",
                      overflow: TextOverflow.clip),
                )
              ],
            ),
          )),
        ));
  }
}

// NOTE: '/images/tooth.png' is a registered asset in the pubspec.yaml file
// EXAMPLE - USING THE CUSTOM CIRCULAR LOADING INDICATOR
class CustomCircularExample extends StatefulWidget {
  @override
  _CustomCircularExampleState createState() => _CustomCircularExampleState();
}

class _CustomCircularExampleState extends State<CustomCircularExample> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomCircularLoadingIndicator(imagePath: 'images/tooth.png'),
      //relativeSize is an optional argument, by default it is set to 2 ( 1 <= relativeSize <= 6 )

      //curveName is an optional argument - an object of the Curves class in Flutter - it is possible that
      //specificying a curve here could mess with the animation because of Tween values.

      //relativeSpeed is an optional argument, by default it is set to 2 ( 1 <= relativeSpeed <= 6)
    );
  }
}

// EXAMPLE - USING THE CUSTOM FADE LOADING INDICATOR
class CustomFadeExample extends StatefulWidget {
  @override
  _CustomFadeExampleState createState() => _CustomFadeExampleState();
}

class _CustomFadeExampleState extends State<CustomFadeExample> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: CustomFadeLoadingIndicator(imagePath: 'images/tooth.png'),
      //relativeSize is an optional argument, by default it is set to 2 ( 1 <= relativeSize <= 6 )

      //curveName is an optional argument - an object of the Curves class in Flutter - it is possible that
      //specificying a curve here could mess with the animation because of Tween values.

      //relativeSpeed is an optional argument, by default it is set to 4 ( 1 <= relativeSpeed <= 6)
    );
  }
}

// EXAMPLE - USING THE CUSTOM OSCILLATORY LOADING INDICATOR
class CustomOscillatoryExample extends StatefulWidget {
  @override
  _CustomOscillatoryExampleState createState() =>
      _CustomOscillatoryExampleState();
}

class _CustomOscillatoryExampleState extends State<CustomOscillatoryExample> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      child: CustomOscillatoryLoadingIndicator(imagePath: 'images/tooth.png'),
      //spinning is an optional argument, by default it is set to true, pass false to stop the spinning
      //relativeSize is an optional argument, by default it is set to 2 ( 1 <= relativeSize <= 6 )

      //curveName is an optional argument - an object of the Curves class in Flutter - it is possible that
      //specificying a curve here could mess with the animation because of Tween values.

      //relativeSpeed is an optional argument, by default it is set to 4 ( 1 <= relativeSpeed <= 6)
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  custom_loading_indicator: ^1.0.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:custom_loading_indicator/custom_loading_indicator.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
33
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
66
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • custom_loading_indicator that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test