Расплывающаяся менюшка

Введение

Понадобилось мне в приложении меню которое появляется по нажатию на floating button. Начал смотреть, что там такого есть в этих ваших интернетах. Мне хотелось как в самсунге меню для стилуса. Поскольку я не придумал, как это гуглить правильно, я не нашел такого меню готового. Поэтому решил сделать его сам.

Анимация

Поскольку анимации во флаттере я до этого не делал, я нашел пример подобной анимации. По-началу я думал что надо будет просто поменять расположение всплывающих кнопок и траектории их движения, но оказалось, кнопки выплывают из-за края экрана. Мне же нужно чтобы кнопки прятались под floating action button. Посмотрел код, и такое скрытие кнопок получается из-за использования виджета Column, но ведь есть Stack.

Для начала располагаем всплывающие кнопки по кругу переводом из полярных координат в декартовы. Анимировать выезд кнопок будем с помощью изменения радиуса. Для этого нам потребуются объекты классов AnimationController и Tween. В AnimationController укажем продолжительностьанимации, а в Tween поставим изменение радиуса от 0 до некоторого максимального. Максимальный радиус и время действия анимации передадим извне. Последним элементом в Stack передадим FloatingActionButton, по нажатию на которую будет отрабатывать анимация.

class FloatingMenu extends StatefulWidget {   const FloatingMenu(this.duration, this.radius, {Key? key})       : super(key: key);    final int duration;   final double radius;    @override   _FloatingMenuState createState() => _FloatingMenuState(); }  class _FloatingMenuState extends State<FloatingMenu>     with SingleTickerProviderStateMixin {   late AnimationController _animationController;    late Animation<double> _buttonAnimatedIcon;    late Animation<double> _translateButton;    bool _isExpanded = false;    @override   initState() {     _animationController = AnimationController(         vsync: this, duration: Duration(milliseconds: widget.duration))       ..addListener(() {         setState(() {});       });      _buttonAnimatedIcon =         Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);      _translateButton = Tween<double>(       begin: 0,       end: widget.radius,     ).animate(CurvedAnimation(       parent: _animationController,       curve: Curves.easeInOut,     ));     super.initState();   }    @override   dispose() {     _animationController.dispose();     super.dispose();   }    _toggle() {     if (_isExpanded) {       _animationController.reverse();     } else {       _animationController.forward();     }     _isExpanded = !_isExpanded;   }    @override   Widget build(BuildContext context) {     return Stack(       children: [         Transform(           transform: Matrix4.translationValues(             cos(pi) * _translateButton.value,             -1 * sin(pi) * _translateButton.value,             0,           ),           child: FloatingActionButton(             backgroundColor: Colors.blue,             onPressed: () {               /* Do something */             },             child: const Icon(               Icons.photo_camera,             ),           ),         ),         Transform(           transform: Matrix4.translationValues(             cos(3 * pi / 4) * _translateButton.value,             -1 * sin(3 * pi / 4) * _translateButton.value,             0,           ),           child: FloatingActionButton(             backgroundColor: Colors.red,             onPressed: () {               /* Do something */             },             child: const Icon(               Icons.video_camera_back,             ),           ),         ),         Transform(           transform: Matrix4.translationValues(             cos(pi / 2) * _translateButton.value,             -1 * sin(pi / 2) * _translateButton.value,             0,           ),           child: FloatingActionButton(             backgroundColor: Colors.amber,             onPressed: () {               /* Do something */             },             child: const Icon(Icons.photo),           ),         ),         Transform(           transform: Matrix4.translationValues(             cos(pi / 4) * _translateButton.value,             -1 * sin(pi / 4) * _translateButton.value,             0,           ),           child: FloatingActionButton(             backgroundColor: Colors.deepPurpleAccent,             onPressed: () {               /* Do something */             },             child: const Icon(               Icons.people_alt_outlined,             ),           ),         ),         Transform(           transform: Matrix4.translationValues(             cos(0) * _translateButton.value,             -1 * sin(0) * _translateButton.value,             0,           ),           child: FloatingActionButton(             backgroundColor: Colors.tealAccent,             onPressed: () {               /* Do something */             },             child: const Icon(               Icons.settings,             ),           ),         ),         child: FloatingActionButton(           onPressed: _toggle,           child: AnimatedIcon(             icon: AnimatedIcons.menu_close,              progress: _buttonAnimatedIcon,             ),         ),       ],     );   } } 

Ура, анимация делает именно то что мне нужно! Но появляется другая проблема, кнопки то появились, но нажать на них невозможно.

Следствие вели

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

... IgnorePointer(   ignoring: !_isExpanded,   child: Transform(           transform: Matrix4.translationValues(             cos(0) * _translateButton.value,             -1 * sin(0) * _translateButton.value,             0,           ),           child: FloatingActionButton(             backgroundColor: Colors.tealAccent,             onPressed: () {               /* Do something */             },             child: const Icon(               Icons.settings,             ),           ),         ),   ), ... 

Дальше я обнаружил, что возможно, класс Transform перемещает не всю кнопку, а только ее изображение и в итоге нажать ее не возможно. Пробуем заменить ее на Positioned, но нажатия все так же не проходят.

Positioned(   left: cos(3 * pi / 4) * _translateButton.value,   bottom: sin(3 * pi / 4) * _translateButton.value,   child: FloatingActionButton(        backgroundColor: Colors.red,        onPressed: () {          print("bbb");        },        child: const Icon(          Icons.video_camera_back,        ),   ), ), 

Продолжая искать, обнаруживаю, что у каждого контейнера есть область действия. У стека получается, что область действия размером с самый широкий элемент в нем и во время анимации эта область не изменяется. Попробуем обернуть стэк в контейнер c шириной и высотой 200. Для наглядности сделаем его зеленого цвета а не прозрачным.

Теперь кнопки, которые находятся в зеленой зоне нажимаются! Размещаем теперь кнопку-меню по центру и подгоняем размер зеленой области по размеру.

ВЖУХ и все работает.

import 'dart:math';  import 'package:flutter/material.dart'; import 'package:latlong2/latlong.dart';  class FloatingMenu extends StatefulWidget {   const FloatingMenu(this.duration, this.radius, {Key? key})       : super(key: key);    final int duration;   final double radius;    @override   _FloatingMenuState createState() => _FloatingMenuState(); }  class _FloatingMenuState extends State<FloatingMenu>     with SingleTickerProviderStateMixin {   late AnimationController _animationController;    late Animation<double> _buttonAnimatedIcon;    late Animation<double> _translateButton;    bool _isExpanded = false;    @override   initState() {     _animationController = AnimationController(         vsync: this, duration: Duration(milliseconds: widget.duration))       ..addListener(() {         setState(() {});       });      _buttonAnimatedIcon =         Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);      _translateButton = Tween<double>(       begin: 0,       end: widget.radius,     ).animate(CurvedAnimation(       parent: _animationController,       curve: Curves.easeInOut,     ));     super.initState();   }    @override   dispose() {     _animationController.dispose();     super.dispose();   }    _toggle() {     if (_isExpanded) {       _animationController.reverse();     } else {       _animationController.forward();     }     _isExpanded = !_isExpanded;   }    @override   Widget build(BuildContext context) {     double width = widget.radius * 2 + 60;     double height = widget.radius + 60;     double center = width/2-30;     return Container(         height: height,         width: width,         child: Stack(           clipBehavior: Clip.none,           children: [             Positioned(               left: center + cos(pi) * _translateButton.value,               bottom: sin(pi) * _translateButton.value,               child: FloatingActionButton(                 backgroundColor: Colors.blue,                 onPressed: () {                   print("aaa");                 },                 child: const Icon(                   Icons.photo_camera,                 ),               ),             ),             Positioned(               left: center + cos(3 * pi / 4) * _translateButton.value,               bottom: sin(3 * pi / 4) * _translateButton.value,               child: FloatingActionButton(                 backgroundColor: Colors.red,                 onPressed: () {                   print("bbb");                   /* Do something */                 },                 child: const Icon(                   Icons.video_camera_back,                 ),               ),             ),             Positioned(               left: center + cos(pi / 2) * _translateButton.value,               bottom: sin(pi / 2) * _translateButton.value,               child: FloatingActionButton(                 backgroundColor: Colors.amber,                 onPressed: () {                   print("ccc");                   /* Do something */                 },                 child: const Icon(Icons.photo),               ),             ),             Positioned(               left: center + cos(pi / 4) * _translateButton.value,               bottom: sin(pi / 4) * _translateButton.value,               child: FloatingActionButton(                 backgroundColor: Colors.deepPurpleAccent,                 onPressed: () {                   print("ddd");                   /* Do something */                 },                 child: const Icon(                   Icons.people_alt_outlined,                 ),               ),             ),             Positioned(               left: center + cos(0) * _translateButton.value,               bottom: sin(0) * _translateButton.value,               child: FloatingActionButton(                 backgroundColor: Colors.tealAccent,                 onPressed: () {                   print("eee");                   /* Do something */                 },                 child: const Icon(                   Icons.settings,                 ),               ),             ),             Positioned(               left: center,               bottom: 0,               child: FloatingActionButton(                 onPressed: _toggle,                 child: AnimatedIcon(                   icon: AnimatedIcons.menu_close,                   progress: _buttonAnimatedIcon,                 ),               ),             )           ],         ));   } }