CODEWITHSUNDEEP
flutter
mars_dev
mars_dev

Reputation: 639

Make background of CircularProgressIndicator transparent in flutter

I have integrated CircularProgressIndicator in my app on login. The indicator is visible as desired but it hides my login screen with a white overlay. I want to make its background transparent instead of white. I tried to give the background color of CircularProgressIndicator but it doesn't make any change. Here is my code:

    child: !_isLoading ? _loginScreen(loginBloc.state) : Center(
      child: const SizedBox(
        width: 40,
        height: 40,
        child: CircularProgressIndicator(), 
      ),
    )

Thank you.

Upvotes: 1

Views: 6766

Answers (1)

Chenna Reddy
Chenna Reddy

Reputation: 2341

You can use Stack with different opacity on its childern.

E.g.

Stack(
      children: <Widget>[
        Opacity(
          opacity: 1, // You can reduce this when loading to give different effect
          child: AbsorbPointer(
            absorbing: _isLoading,
            child: _loginScreen(loginBloc.state),
          ),
        ),
        Opacity(
          opacity: _isLoading ? 1.0 : 0, 
          child: CircularProgressIndicator(),
        ),
      ],
    );

In case you want working solution, I use it heavily in https://github.com/yagnyam-in/proxy-flutter/blob/master/lib/widgets/loading.dart, https://github.com/yagnyam-in/proxy-flutter/blob/master/lib/widgets/async_helper.dart

Upvotes: 7

Related Questions