argon_buttons_flutter 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • new83

Argon Buttons (Timer and Loading) #

Create beautiful Loading and Timer buttons using Argon Buttons. No need to worry about handling animations or timers as this pakage does all the messy stuff for you.

Getting Started #

You basically have two widgets that you can use, ArgonButton and ArgonTimerButton. ArgonButton helps you create beautiful loading animation in your buttons. ArgonTimerButton helps you create timer buttons that you can use to handle stuff like "Resend OTP" => "Wait for 10 sec".

Demo #

Argon Timer Button Demo Argon Loader Button Demo

ArgonButton #

ArgonButton is basically RaisedButton on steroids. That means that you can use the usual parameters that you use with RaisedButtons with a few extra functionalities.

Example:

ArgonButton(
  height: 50,
  width: 350,
  borderRadius: 5.0,
  color: Color(0xFF7866FE),
  child: Text(
    "Continue",
    style: TextStyle(
        color: Colors.white,
        fontSize: 18,
        fontWeight: FontWeight.w700
	),
  ),
  loader: Container(
    padding: EdgeInsets.all(10),
    child: SpinKitRotatingCircle(
      color: Colors.white,
      // size: loaderWidth ,
    ),
  ),
  onTap: (startLoading, stopLoading, btnState) {
  },
)

This creates a button that animates to a circular loader whenever we want to do a network request or any other task that takes some time to output the response. Here I am using SpinKit for showing the rotating loader inside my button. You can use what ever you like.

We animate the button by using the parameters passed in onTap function. On Tap recieves 3 parameter: startLoading(), stopLoading() and btnState

You can call the startLoading function to change the state of the button to Busy which will animate the button and show the loader. When you call the stopLoading function, the button goes to the norma(Idle) state. In the third parameter btnState you can actually check the current state of the button.

Using onTap:

ArgonButton(
[...]
onTap:(startLoading, stopLoading, btnState){
  if(btnState == ButtonState.Idle){
    startLoading();
    await doNetworkRequest();
    stopLoading();
  }
}
)

Properties #

  • roundLoadingShape(Default true) : When set to true, it uses borderRadius to creates a round button while in Busy/Loading state
  • width: Width of the button when in Idle state
  • minWidth: Width of the button when in Busy/Loading state. Default value is equal to height in order to create a completely round loading button
  • borderRadius: Border Radius of the button
  • borderSide : BorderSide in order to give border color and width to the button
  • child: Contents of button when in Idle state
  • loader: Contents of button when in Busy/Loading state
  • onTap: (startLoading, stopLoading, btnState) : Function that is called when you click on the button

ArgonTimerButton #

ArgonTimerButton is similar to ArgonButton but it also has the functionality of working as a Timer button. You can not only give it a initialTimer value but also restart the timer with different countdown from the onTap function.

Example:

ArgonTimerButton(
  initialTimer: 10, // Optional
  height: 50,
  width: MediaQuery.of(context).size.width * 0.45,
  minWidth: MediaQuery.of(context).size.width * 0.30,
  color: Color(0xFF7866FE),
  borderRadius: 5.0,
  child: Text(
    "Resend OTP",
    style: TextStyle(
        color: Colors.black,
        fontSize: 18,
        fontWeight: FontWeight.w700
    ),
  ),
  loader: (timeLeft) {
    return Text(
      "Wait | $timeLeft",
      style: TextStyle(
          color: Colors.black,
          fontSize: 18,
          fontWeight: FontWeight.w700
        ),
    );
  },
  onTap: (startTimer, btnState) {
    if (btnState == ButtonState.Idle) {
      startTimer(20);
    }
  },
),

The onTap function recieves a startTimer(int count) function and a btnState variable. You can use the startTimer function and pass in the new countdown value to restart the counter. This could be very useful for Resend OTP button where after every click you want to reset the counter to a new value from the server. The loader in this case is a button that recieves time left from the timer and has to return a widget which will be the child in the button.

Properties #

  • initialTimer (Optional): it is a optional value given to start the timer when the widget is build
  • roundLoadingShape(Default true) : When set to true, it uses borderRadius to creates a round button while in Busy/Loading state
  • width: Width of the button when in Idle state
  • minWidth: Width of the button when in Busy/Loading state. Default value is equal to height in order to create a completely round loading button
  • borderRadius: Border Radius of the button
  • borderSide : BorderSide in order to give border color and width to the button
  • child: Contents of button when in Idle state
  • loader: It is a function that recieves the left time as parameter and returns the contents of button when in Busy/Loading state
  • onTap: (startTimer, btnState) : Function that is called when you click on the button

More #

  • duration: Duration of the animation
  • curve: Curve of animation
  • reverseCurve: Curve of reverse animation

[0.0.1] - 2019.

  • Created the Argon Loading and Timer buttons

[1.0.0] - 2019.

  • Added Example

example/README.md

example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  argon_buttons_flutter: ^1.0.2

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:argon_buttons_flutter/argon_buttons_flutter.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
66
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]
83
Learn more about scoring.

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

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-0.17 points)

68 out of 70 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test