[Flutter] ProgressButton

progress_button.dart

import 'package:flutter/material.dart';

@immutable
class ProgressButton extends StatelessWidget {
  const ProgressButton({
    @required this.title,
    @required this.onPressed,
    this.processing = false,
    this.enabled = true,
  });
  final String title;
  final VoidCallback onPressed;
  final bool processing;
  final bool enabled;

  static const double _buttonHeight = 48;

  @override
  Widget build(BuildContext context) {
    final backgroundColor = Colors.blue;
    final disabledColor =
        processing ? backgroundColor.withAlpha(150) : Colors.grey;

    return SizedBox(
      width: double.infinity,
      height: _buttonHeight,
      child: RaisedButton(
        color: backgroundColor,
        child: _Content(
          title: title,
          processing: processing,
        ),
        shape: const StadiumBorder(),
        disabledColor: disabledColor,
        onPressed: (processing || !enabled) ? null : onPressed,
      ),
    );
  }
}

@immutable
class _Content extends StatelessWidget {
  const _Content({
    this.title,
    this.processing,
  });
  final String title;
  final bool processing;

  static const double _indicatorSize = 20;
  static const double _space = 8;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        SizedBox(
          width: _indicatorSize,
          height: _indicatorSize,
          child: Visibility(
            visible: processing,
            child: const _ProgressIndicator(),
          ),
        ),
        const SizedBox(width: _space),
        Text(
          title,
          style: TextStyle(color: Colors.white),
        ),
        const SizedBox(width: _indicatorSize + _space),
      ],
    );
  }
}

@immutable
class _ProgressIndicator extends StatelessWidget {
  const _ProgressIndicator();

  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      strokeWidth: 2,
      backgroundColor: Colors.white,
    );
  }
}