简体   繁体   中英

How to Implement to show/hide separate progress indicator / loader for android and iOS in Flutter

How can achieve progress indicator auto show for android ios devices **Here the reference image **

Android iOS 进度指示器

Automatic show progress dialog for android and iOS

Here CircularProgressIndicator() used for android CupertinoActivityIndicator() used for iOS

Sample code

class LoadingDialog extends StatelessWidget {
  static void show(BuildContext context, {Key? key}) => showDialog<void>(
        context: context,
        useRootNavigator: false,
        barrierColor: Colors.white,
        barrierDismissible: false,
        builder: (_) => LoadingDialog(key: key),
      ).then((_) => FocusScope.of(context).requestFocus(FocusNode()));

  static void hide(BuildContext context) => Navigator.pop(context);

  const LoadingDialog({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async => false,
      child: Center(
        child: Platform.isAndroid
            ? const CircularProgressIndicator()
            : CupertinoActivityIndicator(
                color: CColors.green73B66C,
                radius: 20,
                animating: true,
              ),
      ),
    );
  }
}

We can use here onButtonClick

  TextButton.icon(
      onPressed: (() {
        LoadingDialog.show(context);
        Future.delayed(const Duration(seconds: 5), () {
          LoadingDialog.hide(context);
        });
      }),
      icon: Icon(Icons.phone),
      label: Text("Show Loader"))

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM