У меня есть страница с двумя вкладками, одна из которых имеет FloatingActionButton
, как показано в примере ниже. Если FloatingActionButton
обернут в виджет Padding
, при появлении / исчезновении кнопки при смене вкладки происходит много анимации. Если удалить Padding
, анимация будет гораздо более заниженной. Почему это так?
Кроме того, установка GlobalKey<ScaffoldState>
в качестве ключа на включающем Scaffold
избавляет от всей FloatingActionButton
анимации в целом. Почему?
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) => MaterialApp(home: MyHomePage());
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
enum NavBarTab { home, mail }
class _MyHomePageState extends State<MyHomePage> {
NavBarTab _currentTab = NavBarTab.home;
void _changeTab(NavBarTab tab) {
setState(() {
_currentTab = tab;
});
}
@override
Widget build(BuildContext context) {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
return PresentationHomePage(_scaffoldKey, _currentTab, _changeTab);
}
}
class PresentationHomePage extends StatelessWidget {
final GlobalKey<ScaffoldState> _scaffoldKey;
final NavBarTab _currentTab;
final Function(NavBarTab tab) _changeTab;
PresentationHomePage(this._scaffoldKey, this._currentTab, this._changeTab);
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text('Home Page')),
//key: _scaffoldKey, //Setting a key gets rid of any FAB animations
floatingActionButton: _currentTab == NavBarTab.mail ? _mailFABWithPadding(context) : null, //Adding padding adds extra animation
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
bottomNavigationBar: _bottomNavigationBar(context),
);
Widget _mailFAB(BuildContext context) => FloatingActionButton.extended(
onPressed: () => print('Mail FAB pressed'),
icon: Icon(Icons.mail),
label: Text('Mail FAB'),
);
Widget _mailFABWithPadding(BuildContext context) => Padding(
padding: EdgeInsets.only(bottom: 20),
child: FloatingActionButton.extended(
onPressed: () => print('Mail FAB pressed'),
icon: Icon(Icons.mail),
label: Text('Mail FAB'),
),
);
BottomNavigationBar _bottomNavigationBar(BuildContext context) => BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.mail),
title: Text('Mail'),
),
],
currentIndex: _currentTab.index,
onTap: (int index) => _changeTab(NavBarTab.values[index]),
);
}