How to properly use async function from onPress - flutter

Question

I am trying to do some image processing using filters, and image package. I can make it work, but it hangs the UI.
class ImageScreen extends StatefulWidget {
static MaterialPageRoute route(String path) => MaterialPageRoute(
builder: (context) => ImageScreen(
imagePath: path,
));
final String imagePath;
const ImageScreen({Key key, this.imagePath}) : super(key: key);
#override
_ImageScreenState createState() => _ImageScreenState();
}
class _ImageScreenState extends State<ImageScreen> {
int value = 0;
Filter _filter;
final _random = Random();
_ImageScreenState();
Widget _animatedWidget = const Center(child: CircularProgressIndicator());
Future<Widget> _createImage(Filter filter) async {
value++;
_filter = filter;
var bytes = await File(widget.imagePath).readAsBytes();
var i = await image.decodeImage( bytes );
_filter.apply(i.getBytes(), i.width, i.height);
return Image(key: ValueKey<int>(_random.nextInt(200)) , image: MemoryImage(image.encodeJpg(i)));
}
void _initiate(Filter filter) {
debugPrint("initializing");
_createImage(filter).then(
(widget)=> setState(()=> _animatedWidget =widget));
debugPrint("done");
}
#override
void initState() {
super.initState();
_initiate(NoFilter());
}
#override
Widget build(BuildContext context) {
return Scaffold(body:
Stack(
children: [
AnimatedSwitcher(child: _animatedWidget, duration: Duration(milliseconds: 200),),
Align(
alignment: Alignment.bottomCenter,
child: Container(
padding: EdgeInsets.only(top: 10, bottom: 10),
color: Color.fromRGBO(200, 200, 200, 0.9),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
FlatButton(
child: Text('Original'),
onPressed: () async {
_initiate(NoFilter());
},
),
FlatButton(
child: Text('B&W'),
onPressed: () {
_initiate(MoonFilter());
},
),
FlatButton(
child: Text('Dusty'),
onPressed: () {
_initiate(ReyesFilter());
},
)
],
),
)
)
],
));
}
}
What I want to happen is that the processing to be off main thread, and then see a nice transition. Unfortunately something is blocking the main thread.
The button gets stuck in depressed state, and then, after the process finished, page flickers and shows the new image.

Answer 1

you have to make this function to async
Future<void> _initiate(Filter filter)async {
debugPrint("initializing");
_createImage(filter).then(
(widget)=> setState(()=> _animatedWidget =widget));
debugPrint("done");
}
and if you want to call this function then you can call like
onPressed: () async {
await _initiate(NoFilter());
},