Making a Common Button Widget in Flutter - flutter

Question

Im making a common Button widget that have three states Active / Disable / Loading.
im managing the status from the place where I use the ButtonWidget.
I'll post what I did so far.
when I try to run the button widget it gets an error. namely
The following assertion was thrown while finalizing the widget tree:
_ButtonWidgetState#ab5a5(ticker active) was disposed with an active Ticker.
_ButtonWidgetState created a Ticker via its SingleTickerProviderStateMixin, but at the time dispose() was called on the mixin, that Ticker was still active. The Ticker must be disposed before calling super.dispose().
I imagine this is due the to animation I already have in my button widget.
can anyone help me to overcome this.?
would be really helpful.
ButtonWidget
import 'package:flutter/material.dart';
import 'dart:async';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
const TextStyle tButtonMedium = TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.bold,
);
enum eButtonType {
bText,
bIcon,
bIconText,
}
enum eButtonState {
bActive,
bDisable,
bLoading,
}
void main() {
runApp(MyApp());
}
class CustomColors {
static const Color grey100 = Color(0xFFF0F0F0);
static const Color grey600 = Color(0xFFAFAFAF);
static const Color mWhite = Color(0xFFFFFFFF);
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatefulWidget {
#override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
var _isLoading = false;
eButtonState? btnState;
#override
void initState() {
_makeActive();
super.initState();
}
void _makeActive() {
Future.delayed(
const Duration(seconds: 5),
() => setState(() {
btnState = eButtonState.bActive;
}),
);
}
void _onSubmit() {
setState(() {
btnState = eButtonState.bLoading;
});
Future.delayed(
const Duration(seconds: 10),
() => setState(() {
btnState = eButtonState.bActive;
}));
}
#override
Widget build(BuildContext context) {
return ButtonWidget(
key: UniqueKey(),
onPressed: () {
_onSubmit();
},
btnColor: Colors.white,
borderColor: Colors.blue,
textColor: Colors.blue,
text: "Save",
eButtonState: btnState,
eButtonType: eButtonType.bIconText,
iconData: Icons.save_alt,
);
}
}
////////////////////////////////////////////////////////////////////////
class ButtonWidget extends StatefulWidget {
//
final String? text;
final Color? btnColor;
final Color? borderColor;
final Color? textColor;
final Function? onPressed;
// final bool? isActive;
final eButtonType;
final eButtonState;
final IconData? iconData;
const ButtonWidget({
Key? key,
this.text,
this.btnColor,
this.borderColor,
this.textColor,
this.eButtonType,
this.iconData,
#required this.eButtonState,
#required this.onPressed,
// #required this.isActive,
}) : super(key: key);
#override
_ButtonWidgetState createState() => _ButtonWidgetState();
}
class _ButtonWidgetState extends State<ButtonWidget>
with SingleTickerProviderStateMixin {
late double _scale;
late AnimationController _controller;
#override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(
milliseconds: 100,
),
upperBound: 0.1,
)..addListener(() {
setState(() {});
});
super.initState();
}
#override
void dispose() {
super.dispose();
_controller.dispose();
}
void buttonHandler() {
_controller.forward();
Timer(const Duration(milliseconds: 50), () {
_controller.reverse();
});
Timer(const Duration(milliseconds: 50), () {
widget.onPressed!();
});
}
#override
Widget build(BuildContext context) {
_scale = 1 - _controller.value;
return Transform.scale(
scale: _scale,
child: ElevatedButton(
style: TextButton.styleFrom(
elevation: widget.eButtonState == eButtonState.bActive ? 2.0 : 0.0,
primary: widget.eButtonState == eButtonState.bActive
? widget.btnColor!
: CustomColors.grey600,
backgroundColor: widget.eButtonState == eButtonState.bActive
? widget.btnColor!
: CustomColors.grey100,
minimumSize: const Size(80.0, 50.0),
maximumSize: const Size(double.infinity, 50.0),
shape: RoundedRectangleBorder(
side: BorderSide(
color: widget.eButtonState == eButtonState.bActive
? widget.borderColor!
: CustomColors.grey100,
width: 2,
),
borderRadius: BorderRadius.circular(16.0),
),
splashFactory: NoSplash.splashFactory,
),
onPressed: () => widget.eButtonState == eButtonState.bActive
? buttonHandler()
: null,
child: widget.eButtonState == eButtonState.bLoading
? const CircularProgressIndicator(
color: CustomColors.grey600,
backgroundColor: Colors.transparent,
)
: (widget.eButtonType == eButtonType.bText
? Text(
widget.text!,
style: tButtonMedium.copyWith(
color: widget.eButtonState == eButtonState.bActive
? widget.textColor!
: CustomColors.grey600,
),
textAlign: TextAlign.center,
textScaleFactor: 1.0,
)
: (widget.eButtonType == eButtonType.bIconText)
? Row(
// mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.min,
children: [
Icon(
widget.iconData,
color: widget.eButtonState == eButtonState.bActive
? widget.textColor
: CustomColors.grey600,
),
Spacer(),
Text(
widget.text!,
style: tButtonMedium.copyWith(
color: widget.eButtonState == eButtonState.bActive
? widget.textColor!
: CustomColors.grey600,
),
textAlign: TextAlign.center,
textScaleFactor: 1.0,
),
Spacer(),
],
)
: Icon(
widget.iconData,
color: widget.eButtonState == eButtonState.bActive
? CustomColors.mWhite
: CustomColors.grey600,
)),
),
);
}
}

Answer 1

I've managed to get to fixed by simply doing
void dispose() {
_controller.dispose();
super.dispose();
}
If anyone wish to have a common button widget. please feel free to use this code. and I appreciate if veterans can guide to improve this widget. cheers