CODEWITHSUNDEEP
flutter
shubhendu madhukar
shubhendu madhukar

Reputation: 202

How can I remove the child from a stack in Flutter?

I have been creating a WebView in Flutter. I want to show a CircularProgressIndicator as an overlay while the page loads. For this, I have used a stack where the top child is a Container with CircularProgressIndicator in Center whereas the WebView loads as the bottom child. Now I see a callback named onPageFinished in the WebView which I want to use to remove the Container on top in the Stack. I don't seem to find a way to remove a child from the stack. How do I go about implementing this?

Stack(
  children: <Widget>[
    WebView(
      initialUrl: 'https://www.google.com',
      javascriptMode: JavascriptMode.unrestricted,
      onPageFinished: hideLoader,
    ),
    Container(
      decoration: BoxDecoration(
        color: Color.fromRGBO(0, 0, 0, 0.5),
      ),
      child: Center(
        child: CircularProgressIndicator(),
      ),
    )
  ],
)),

void hideLoader(String url) {}

Upvotes: 1

Views: 1127

Answers (1)

Santosh Anand
Santosh Anand

Reputation: 1228

Try following code

    Stack(
      children: <Widget>[
        WebView(
          initialUrl: 'https://www.google.com',
          javascriptMode: JavascriptMode.unrestricted,
          onPageFinished: hideLoader,
        ),
        this._hideLoader == true
        ? Container(
            decoration: BoxDecoration(
              color: Color.fromRGBO(0, 0, 0, 0.5),
            ),
            child: Center(
              child: CircularProgressIndicator(),
            ),
          )
        : Container()
      ],
    )),
  bool _hideLoader = false;
  void hideLoader(String url) {
    setState(() {
      this._hideLoader = false;
    });
  }

Upvotes: 2

Related Questions