How to use overlay spinner in flutter-CodePudding

I want to show an overlay loader while processing api call takes some time. There is a nice package like: Flutter Spinkit But how can make a reusable widget to show this loader.

CodePudding user response：

You can simply create a widgets.dart that has the spinner configuration you'd like to reuse.

An example with flutter_spinkit

SpinKitSquareCircle LoadingSpinner() {
  return const SpinKitSquareCircle(color: Colors.red, size: 25.0);
}

and then just simply do

  Container(
      child: Center(
    child: LoadingSpinner(),
  ));

Remember to import the widgets.dart into the file you are using LoadinSpinner().

CodePudding user response：

You can do as below just create loader_view.dart file

add below two dependancy to your pubspec.yaml file

For Overlay

This is For Loading Animation

Put Below code on this file

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:modal_progress_hud_nsn/modal_progress_hud_nsn.dart';


class LoaderView extends StatelessWidget {
  final Widget child;
  final bool showLoader;

  LoaderView({@required this.child, @required this.showLoader}) : assert(child != null);

  @override
  Widget build(BuildContext context) {
    return ModalProgressHUD(
      child: this.child,
      inAsyncCall: showLoader,
      progressIndicator: SpinKitFadingCircle(
        color: Colors.red,
        size: 50.0,
      ),
    );
  }
}

And then use it like below in any screen of your app

LoaderView(
  showLoader: true or false // based on your need
  child: Container()
)

Let me know if any query

Thanks