error_progress_button 0.1.1

A Flutter custom button with progress and error message

error_progress_button

A Flutter custom button with progress and error message by simply nesting two AnimatedCrossFade widgets and alternating between them.

Getting Started

Usage

To use this package add the dependency to your pubspec.yaml file.

  dependencies:
    flutter:
      sdk: flutter
    error_progress_button: 0.1.1

Example

import 'dart:async';

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

class ExampleApp extends StatefulWidget {
  @override
  ExampleAppState createState() => ExampleAppState();
}

class ExampleAppState extends State<ExampleApp> {
  Text buttonText = Text(
    "Button",
    style: const TextStyle(
      color: Colors.white,
    ),
  );

  Text errorText = Text(
    "Failed with error",
    textAlign: TextAlign.center,
    style: const TextStyle(color: Colors.red, fontSize: 14),
  );

  ErrorButtonState state = ErrorButtonState.normal;

  Duration duration = Duration(milliseconds: 500);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ErrorProgressButton(
          buttonColor: Colors.green,
          buttonText: buttonText,
          buttonOnPress: () => onButtonPress(),
          errorText: errorText,
          state: state,
        ),
      ),
    );
  }

  onButtonPress() async {
    setState(() {
      state = ErrorButtonState.loading;
    });
    Timer(const Duration(milliseconds: 4000), () {
      setState(() {
        state = ErrorButtonState.error;
      });
    });
  }
}

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