Flutter UI #72: Fun with Progress HUD in Flutter


Flutter UI #72: Fun with Progress HUD in Flutter

Tutorial and code of Progress HUD in Flutter. Copy and paste the below code as per your requirements.

flutter_progress_hud: ^2.0.0

import 'package:flutter/material.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Progress HUD',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('Progress HUD'),),
      ),
      body: ProgressHUD(
        child: Builder(
          builder: (context) => Center(
            child: Column(
              children: <Widget>[
                ElevatedButton(
                  child: const Text('Show for a second'),
                  onPressed: () {
                    final progress = ProgressHUD.of(context);
                    progress?.show();
                    Future.delayed(const Duration(seconds: 1), () {
                      progress?.dismiss();
                    });
                  },
                ),
                ElevatedButton(
                  child: const Text('Show with text'),
                  onPressed: () {
                    final progress = ProgressHUD.of(context);
                    progress?.showWithText('Loading...');
                    Future.delayed(const Duration(seconds: 1), () {
                      progress?.dismiss();
                    });
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published.