Play Flutter Quiz. Click here .

Show loading while performing an operation in Flutter

This is posted by at 06-02-2019 06:54:29

In this example, I'm going to share the code which will help you to show a Loader icon when an operation is being performed.
Below is an example code of how to Show loading while performing an operation in Flutter. Code from Main.dart file. In order to run this project locally, all you need to do is to create a Project and copy paste the below code to Lib\main.dart file.
import 'dart:async';
import 'package:flutter/material.dart';
Future<String> fetchStr() async {
await new Future.delayed(const Duration(seconds: 5), () {
return 'Hello World';
void main() => runApp(MyApp(str: fetchStr()));
class MyApp extends StatelessWidget {
final Future<String> str;
MyApp({Key key, this.str}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
theme: ThemeData(
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
body: Center(
child: FutureBuilder<String>(
future: str,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(;
else if (snapshot.hasError) {
return Text("${snapshot.error}");
// By default, show a loading spinner
return CircularProgressIndicator();
Hope this will be useful to you.

Tags: Show loading while performing an operation in Flutter

Login to comment.

Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.

© 2018 - Fluttercentral | Email to me -

Terms | Privacy