Анимация флаттера

Question

Как я могу затемнить 1-й виджет и анимировать 2-й виджет, чтобы он пришел снизу, и заменить 1-й виджет, как только пользователь нажмет кнопку?

И нажмите на вторую кнопку, чтобы заставить 2-й виджет идтивниз и 1-й виджет исчезает?

Answer 1

Вы можете сделать это с помощью AnimatedOpacity для первого виджета и AnimatedPositioned для второго.Вот вам пример:

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double _firstWidgetOpacity = 1.0;
  double _secondWidgetBottomPosition = -200.0;

  animate() {
    setState(() {
      if (_firstWidgetOpacity == 1.0) {
        _firstWidgetOpacity = 0.0;
        _secondWidgetBottomPosition = MediaQuery.of(context).size.height / 2 - 140.0;
      } else {
        _firstWidgetOpacity = 1.0;
        _secondWidgetBottomPosition = -200.0;
      }
    });
  }

  @override
  void initState() {
    super.initState();
    print((560 / 60).floor());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: animate,
        label: Text('Animate'),
      ),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.center,
            child: AnimatedOpacity(
              duration: Duration(milliseconds: 350),
              opacity: _firstWidgetOpacity,
              curve: Curves.easeIn,
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Colors.blue,
                child: Center(
                  child: Text('First widget'),
                ),
              ),
            ),
          ),
          AnimatedPositioned(
            duration: Duration(milliseconds: 350),
            curve: Curves.elasticIn,
            bottom: _secondWidgetBottomPosition,
            left: 0.0,
            right: 0.0,
            child: Center(
              child: Container(
                width: 200.0,
                height: 200.0,
                color: Colors.orange,
                child: Center(
                  child: Text('Second widget'),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Вы можете играть с длительностями и кривыми, чтобы получить нужный вам результат.