Я пытаюсь создать анимацию, в которой один из пристыкованных FAB сокращается, а другие остаются.
Тем не менее, ScaleTransition
во флаттере позволяет уменьшать только краску, а не макет, а Container
позволяет изменять только абсолютный размер, а не процентную шкалу. Есть ли более чистый способ сделать это без жесткого кодирования размеров / смещения? (Или создать герооподобный переход между моей текущей кнопкой и более широкой новой кнопкой?)
import 'package:flutter/material.dart';
import 'task.dart';
class FloatingActionButtonBar extends StatefulWidget {
final ValueNotifier<bool> removeButtonVisiblilityController;
final ValueSetter onAdd;
final VoidCallback onRemove;
FloatingActionButtonBar(
{this.removeButtonVisiblilityController, this.onAdd, this.onRemove});
@override
State<StatefulWidget> createState() => new FloatingActionButtonBarState();
}
class FloatingActionButtonBarState extends State<FloatingActionButtonBar>
with SingleTickerProviderStateMixin {
AnimationController _removeButtonAnimationController;
void _newTask(BuildContext context) {/*...*/}
void _remove(BuildContext context) {/*...*/}
@override
void initState() {/*...*/}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
FloatingActionButton.extended(
onPressed: () => _newTask(context),
icon: Icon(Icons.add),
label: Text("Task"),
),
AnimatedBuilder(
animation: _removeButtonAnimationController,
child: FloatingActionButton(
onPressed: () => _remove(context),
child: Icon(Icons.delete),
backgroundColor: Theme.of(context).errorColor,
),
builder: (context, child) => Opacity(
opacity: _removeButtonAnimationController.value,
child: ScaleTransition(
alignment: FractionalOffset(0.5, 0.5),
scale: _removeButtonAnimationController,
child: child,
),
),
),
],
),
],
);
}
@override
void dispose() {/*...*/}
}
Снимок экрана