简体   繁体   中英

Circular progress indicator without white background

I'm new to the flutter world and I would like to know how to remove this white background from the circular progress indicator of flutter. Below I will leave a screenshot and my code.

屏幕

Code:

import 'package:flutter/material.dart';

void showLoading(BuildContext context, {required String text}) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (_) {
      return SimpleDialog(
        children: <Widget>[
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CircularProgressIndicator(
                color: Theme.of(context).primaryColor,
              ),
              const SizedBox(height: 10),
              Text(text, textAlign: TextAlign.center),
            ],
          ),
        ],
      );
    },
  );
}

void hideLoading(BuildContext context) {
  if (Navigator.canPop(context)) {
    Navigator.of(context).pop();
  }
}

I hope this answer helps you, you need to change the background color under SimpleDialog

void showLoading(BuildContext context, String text) { showDialog( context: context, barrierDismissible: false, builder: (_) { return SimpleDialog( backgroundColor: Colors.transparent, elevation: 0, children: [ Column( mainAxisAlignment: MainAxisAlignment.center, children: [ CircularProgressIndicator( color: Theme.of(context).primaryColor, ), const SizedBox(height: 10), Text(text, textAlign: TextAlign.center), ], ), ], ); }, ); }

use this

             showDialog(
                context: context,
                barrierDismissible: false,
                builder: (_) {
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        CircularProgressIndicator(
                          color: Theme.of(context).primaryColor,
                        ),
                        const SizedBox(height: 10),
                        Text(text, textAlign: TextAlign.center),
                      ],
                    ),
                  );
                },
              );

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