[Flutter] ProgressButton

main.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,
    );
  }
}

// ===================================================================

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Container(
            width: 400,
            child: const Home(),
          ),
        ),
      ),
    );
  }
}

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  bool _processing = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: ProgressButton(
          title: 'Save',
          processing: _processing,
          onPressed: () {
            setState(() {
              _processing = true;
            });
            Future<void>.delayed(const Duration(seconds: 2)).then((_) {
              setState(() {
                _processing = false;
              });
            });
          }),
    );
  }
}