Введение

Понадобилось мне в приложении меню которое появляется по нажатию на 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,
                ),
              ),
            )
          ],
        ));
  }
}