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.

Dhaval Patel
  • 716
  • 1
  • 10
  • 26

4 Answers4

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'.

Julio Henrique Bitencourt
  • 1,752
  • 14
  • 18
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.

Arnold Parge
  • 6,684
  • 2
  • 30
  • 34
0

You can use this dialog for full screen loading progress_dialog

Rutvik Gumasana
  • 1,458
  • 11
  • 42
  • 66
-3

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

Michael Pfaff
  • 1,178
  • 1
  • 14
  • 24
  • In my app, there is no loading screen, but when I call API I need to show loader like https://github.com/SVProgressHUD/SVProgressHUD. while API calling and also prevent back. – Dhaval Patel Jun 13 '19 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 – Michael Pfaff Jun 14 '19 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. – Michael Pfaff Jun 19 '20 at 14:23