Custom Progress dialog like iOS in Flutter without any Plugin

1. Simple Progress dialog like without background

Below is the full example to show the progress dialog.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/progress_dialog.dart';

class Seekbar extends StatefulWidget {
  @override
  _SeekbarState createState() => _SeekbarState();
}

class _SeekbarState extends State<Seekbar> {
  ProgressDialog progressDialog;

  showDeleteDialog() {
    showDialog(
        context: context,
        builder: (context) => Center(
            child: CupertinoActivityIndicator(radius: 20)
        )
    );
  }
 
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFB50208),
          title: const Text('Progressbar'),
        ),
        body:  GestureDetector(
          onTap: (){
            showDeleteDialog();
          },
          child: Container(
            margin: EdgeInsets.fromLTRB(0, 0, 0, 80),
            decoration: BoxDecoration(color: Colors.grey),
            padding: EdgeInsets.all(20),
            child: Text('Start Progress'),
          ),
        )
    );
  }
}

To dismiss the dialog you need to pop.


Navigator.pop(context);

2. Simple Progress dialog like with background

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/progress_dialog.dart';

class Seekbar extends StatefulWidget {
  @override
  _SeekbarState createState() => _SeekbarState();
}

class _SeekbarState extends State<Seekbar> {
  ProgressDialog progressDialog;

  showDeleteDialog() {
    showDialog(
        context: context,
        builder: (context) => Center(
            child: Container(
              width: 80.0,
              height: 80.0,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(4.0),
              ),
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: CupertinoActivityIndicator(radius: 20,),
              )
            )
        )
    );
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFFB50208),
          title: const Text('Progressbar'),
        ),
        body:  GestureDetector(
          onTap: (){
            showDeleteDialog();
          },
          child: Container(
            margin: EdgeInsets.fromLTRB(0, 0, 0, 80),
            decoration: BoxDecoration(color: Colors.grey),
            padding: EdgeInsets.all(20),
            child: Text('Start Progress'),
          ),
        )
    );
  }
}

• Tweet
• Share
• Share
• Share
• Share

Related Post