animate show or hide widgets with flutter

Question

i have something like this :

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  bool loading = true;

  @override
  Widget build(BuildContext context) {
    if(loading) {
      return Container(
        color: Theme.of(context).scaffoldBackgroundColor,
        child: Center(
          child: SizedBox(
            width: 24,
            height: 24,
            child: GestureDetector(
              onTap: _toggle,
              child: CircularProgressIndicator(),
            ),
          ),
        ),
      );
    } else {
      return Container(
        child: Center(
          child: GestureDetector(
            onTap: _toggle,
            child: Text("WELCOME"),
          ),
        ),
      );
    }
  }

  _toggle() {
    setState(() {
      loading = !loading;
    });
  }
}

my big problem with flutter is animating between toggling widgets

i want when _toggle called, loading widget fadeOut and after animation completed remove from screen and then show normal widget with fadeIn effect

how can i achieved to this ?

thanks

Answer 1

Correct way is using AnimatedSwitcher widget:

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  bool loading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedSwitcher(
        duration: const Duration(milliseconds: 300),
        child: loading ? Container(
          key: Key("loading"),
          color: Theme.of(context).scaffoldBackgroundColor,
          child: Center(
            child: SizedBox(
              width: 24,
              height: 24,
              child: GestureDetector(
                onTap: _toggle,
                child: const CircularProgressIndicator(),
              ),
            ),
          ),
        ) : Container(
          key: Key("normal"),
          child: Center(
            child: GestureDetector(
              onTap: _toggle,
              child: const Text("WELCOME"),
            ),
          ),
        ),
      ),
    );
  }

  _toggle() {
    setState(() {
      loading = !loading;
    });
  }
}

note: you must give a key for children, in my example if you remove key animation not work

Answer 2

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyWidgetState();
  }
}

class _MyWidgetState extends State<MyWidget> {
  bool loading = true;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: <Widget>[
          Center(
            child: GestureDetector(
              onTap: _toggle,
              child: Text("WELCOME"),
            ),
          ),
          IgnorePointer(
            ignoring: !loading,
            child: AnimatedOpacity(
              opacity: loading ? 1 : 0,
              duration: Duration(milliseconds: 500),
              child: Container(
                color: Theme.of(context).scaffoldBackgroundColor,
                child: Center(
                  child: SizedBox(
                    width: 24,
                    height: 24,
                    child: GestureDetector(
                      onTap: _toggle,
                      child: CircularProgressIndicator(),
                    ),
                  ),
                ),
              ),
            ),
          )
        ],
      ),
    );
  }

  _toggle() {
    setState(() {
      loading = !loading;
    });
  }
}