Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[Flutter] ProgressButton
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,
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment