Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Progress Circle after pressing button till a request to an API is done

I have a button in my flutter application that I want to send a request to an API after pressing it. I should wait for the process, and I want to have a progress circle that shows from the time I pressed the button until I get a response from the request. Can anyone help me with this? Thanks.
Here is my onPressed code:

onPressed: () async {
                  Map data = {
                            //some data
                          };
                  var body = json.encode(data);
                  var response = await http.post(
                      Uri.parse("***MY API URL ***"),
                      headers: {
                        "Content-Type": "application/json",
                        "Accept": "application/json"
                      },
                      body: body);
                      // print(response.body);
                      // print(response.statusCode);
                      if (response.statusCode == 201 || response.statusCode == 200) {
                        print('success');
                        Toast.show("Success", context);
                        
                        Navigator.pushAndRemoveUntil(
                context,
                MaterialPageRoute(
                  builder: (BuildContext context) => const HomePage(),
                ),
                (route) => false,
              );
                      } else {
                        Toast.show("ERROR! Please try again.", context);

                      }
                  }

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Just use like this.

Additionally if you want more CircularProgressIndicator customization and functions I bring here docs url
https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html

There is also LinearProgressIndicator exists in Flutter
https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: const MyHomePage());
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isLoading
          ? Center(child: CircularProgressIndicator())
          : TextButton(
              child: Text('Tap me'),
              onPressed: () async {
                //progress indicator start show
                setState(() => isLoading = true);

                //YOU API CALL HERE
                //await Future.delayed(Duration(seconds: 2), () => () {});

                //progress indicator show
                var response = await authHandler.sendPasswordResetEmail();


                //progress indicator stopped show
                setState(() => isLoading = false);
              },
            ),
    );
  }
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading