How to Show Loading Indicator in Flutter: Simple Guide

In Flutter, you can show a loading indicator using the CircularProgressIndicator widget. Wrap it inside a widget like Center to display it in the middle of the screen while waiting for a task to complete.

Syntax

The CircularProgressIndicator widget shows a spinning circle to indicate loading. You can place it anywhere in your widget tree, often inside a Center widget to center it on the screen.

Optionally, you can customize its color and size.

dart

Center(
  child: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
    strokeWidth: 4.0,
  ),
)

Output

A blue spinning circular loading indicator centered on the screen.

Example

This example shows a simple Flutter app that displays a loading spinner in the center of the screen.

dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Loading Indicator Example')),
        body: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

Output

App with an app bar titled 'Loading Indicator Example' and a spinning circular loading indicator centered on a white background.

Common Pitfalls

Not managing loading state: Showing the loading indicator without controlling when it appears can confuse users. Use a boolean variable to show or hide it.

Blocking UI: Avoid blocking the UI thread; use async operations and show the indicator while waiting.

flutter

/* Wrong: Loading indicator always visible */
Center(
  child: CircularProgressIndicator(),
);

/* Right: Show loading indicator conditionally */
bool isLoading = true;

Widget build(BuildContext context) {
  return Center(
    child: isLoading ? CircularProgressIndicator() : Text('Content Loaded'),
  );
}

Quick Reference

• CircularProgressIndicator(): Default spinning loader.
• LinearProgressIndicator(): Horizontal loading bar.
• Wrap in Center to center on screen.
• Use boolean state to show/hide.

Key Takeaways

Use CircularProgressIndicator widget to show a loading spinner in Flutter.

Wrap the indicator in Center to place it in the middle of the screen.

Control visibility with a boolean state to show or hide the loader.

Avoid blocking the UI thread; show the loader during async tasks.

Customize color and size using properties like valueColor and strokeWidth.