3

I want to show full-screen loading view in flutter while API calling. But when I add loading widget in scaffold body it appears after appbar and bottom navigator.

I am spending lots of time for display loading view in full-screen. Also, I want to prevent back action while API calling.

4 Answers 4

9

Well, since you're using Scaffold, then make use of its showDialog() method.

It has a property called barrierDismissible that if you set as false, the user won't be able to close or interact with the screen outside of it.

void _openLoadingDialog(BuildContext context) {
  showDialog(
    barrierDismissible: false,
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        content: CircularProgressIndicator(),
      );
    },
  );
}

Once you're done with the API loading, call Navigator.pop(context); to dismiss the dialog.

To prevent the user from clicking the back button on the Dialog, dismissing it, envelop your Scaffold inside a WillPopScope widget and implement the onWillPop function.

@override
Widget build(BuildContext context) {
  return WillPopScope(
      child: Scaffold(
        body: Container(),
      ),
      onWillPop: _onBackButton
  );
}

Future<bool> _onBackButton() {
  // Implement your logic
  return Future.value(false);
}

If you return false on it, the user won't be able to press the back button. So use any logic you desire, e.g 'If I'm loading return false, otherwise return true'.

1
1
  1. Full-screen loader: Best solution to display a full screen loader is to use package https://pub.dev/packages/screen_loader.
  2. Prevent back action while loading: This package this package provides a variable isLoading, use it to prevent navigating back. eg:
// --------------- some_screen.dart ---------------
import 'package:flutter/material.dart';
import 'package:screen_loader/screen_loader.dart';

class SomeScreen extends StatefulWidget {
  @override
  _SomeScreenState createState() => _SomeScreenState();
}

class _SomeScreenState extends State<SomeScreen> with ScreenLoader<SomeScreen> {
  getData() {
    this.performFuture(NetworkService.callApi);
  }

  @override
  Widget screen(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
          // your beautiful design..
          ),
      onWillPop: () async {
        return !isLoading;
      },
    );
  }
}

// --------------- app_api.dart ---------------
class NetworkService {
  static Future callApi() async {

  }
}

NOTE: You'll need to see the definition of performFuture to see how it works for different scenarios.

0

You can use this dialog for full screen loading progress_dialog

-3

Did you not think of removing the Scaffold for the loading screen?

3
  • In my app, there is no loading screen, but when I call API I need to show loader like github.com/SVProgressHUD/SVProgressHUD. while API calling and also prevent back. Jun 13, 2019 at 11:55
  • So what do you want? A dialog? Or a fullscreen loading view? If you want a full screen loading view, you need the Scaffold to only be part of the normal view, with it not in the widget tree in the loading view Jun 14, 2019 at 12:43
  • @DhavalPatel It seems you never solved your problem. As I said before, your "loader" needs to be outside the scaffold. Simple as that. Jun 19, 2020 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.