Flutter: How to perform two actions based on new state? - flutter

Question

I am new to Flutter, and trying to understand how to to perform a series of actions based on a state of the widget.
I have a VERY basic app, based on the default new Flutter app with the clicks counter. I'd like that when the counter hits 10, the counter text highlights in red for 500ms (showing '10') and then the counter gets reset back to 0 and the text goes back to black (showing '0').
I was able to change the color to red when _counter==10, but unsure how to change it back to black and reset the counter after a set period of time. I'd also want to make the button "unclickable" during the 500ms.

Answer 1

It's simple just follow the code below,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
bool isButtonEnabled = true;
Future<void> _incrementCounter() async {
_counter++;
if (_counter == 10) {
setState(() {
isButtonEnabled = false;
});
await Future.delayed(Duration(milliseconds: 500));
setState(() {
_counter = 0;
isButtonEnabled = true;
});
} else {
setState(() {});
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style:
TextStyle(color: isButtonEnabled ? Colors.black : Colors.red),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: isButtonEnabled ? _incrementCounter : null,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
You're done.