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