Наложение флаттера, страница с подробной информацией - PullRequest
Новая
       57

Наложение флаттера, страница с подробной информацией

0 голосов
/ 17 января 2020

Я пытаюсь создать приложение, и мне нужна помощь сообщества: я пытаюсь создать оверлей (который будет новой страницей) поверх другой страницы. Посмотрите на эти скриншоты, найденные на dribbble , и я постараюсь объяснить лучше.

enter image description here enter image description here

Итак, изображение на странице, как показано на первом скриншоте. Что я хочу сделать, так это то, что, когда вы нажимаете, например, на кнопку «страница контакта», из нижней части экрана появляется windows с линейной анимацией и показывает вид, как на скриншоте справа. экрана. Но я не хочу, чтобы это была «настоящая новая страница», потому что, как вы можете видеть на втором скриншоте, мы можем видеть в прозрачности первую страницу позади ...

И, конечно, когда вы нажимаете крестик, окно всплывающее ...

Задайте мне любой вопрос, если я не достаточно ясно.

Любая помощь приветствуется! Большое спасибо, stackoverflow - это необычное сообщество!

1 Ответ

1 голос
/ 17 января 2020

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

class ExampleApp extends StatefulWidget {
  @override
  _ExampleAppState createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  final double containerHeight = 200.0;

  bool _showProfile;

  @override
  void initState() {
    _showProfile = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.teal,
        child: Stack(
          children: <Widget>[
            Container(
              color: Colors.redAccent,
              child: Center(
                child: FlatButton(
                  child: Text("Animate"),
                  onPressed: () {
                    setState(() {
                      _showProfile = true;
                    });
                  },
                ),
              ),
            ),
            AnimatedPositioned(
                bottom: _showProfile ? 0 : -containerHeight,
                right: 0,
                left: 0,
                duration: Duration(milliseconds: 300),
                child: Container(
                  color: Colors.white,
                  height: containerHeight,
                ))
          ],
        ),
      ),
    );
  }
}
...