async_button_builder 0.0.1-nullsafety.1

A builder to wrap around buttons that handles loading and disabled state

async_button_builder

A builder that adds loading and disabled states on top of buttons that perform asynchronous tasks. It can be used with most any button or even on top of a custom Material button. It includes fluid animation between states as well using AnimatedSize.

Getting Started

Include the package:

  async_button_builder: <latest_version>

Wrap the builder around a button, passing the onPressed and child element to builder instead of the button directly. These two are the only required fields.

AsyncButtonBuilder(
  child: Text('Click Me'),
  onPressed: () async {
    await Future.delayed(Duration(seconds: 1));
  },
  builder: (context, child, callback) {
    return TextButton(
      child: child,
      onPressed: callback,
    );
  },
),

You can also change the loading indicator with anything you prefer using the loadingWidget field. By default it uses a CircularProgressIndicator.

For a custom button, you can specify properties such as padding and loadingPadding.

Material(
  color: Colors.lightBlue,
  shape: StadiumBorder(),
  child: AsyncButtonBuilder(
    valueColor: Colors.white,
    padding: const EdgeInsets.symmetric(
      horizontal: 16.0,
      vertical: 8.0,
    ),
    loadingPadding: const EdgeInsets.all(8.0),
    child: Text(
      'Click Me',
      style: TextStyle(color: Colors.white),
    ),
    onPressed: () async {
      await Future.delayed(Duration(seconds: 1));
    },
    builder: (context, child, callback) {
      return InkWell(
        child: child,
        onTap: callback,
      );
    },
  ),
),