0
I’m developing a screen with a floatingactionbutton
in the middle of a bottom navigation however, it is very close to the menu items. How do I give a correct spacing?
My code:
class _NavigationState extends State<Navigation> {
int _currentIndex = 0;
final List<Widget> _children = [
Resumo(),
GasolinaXAlcool(),
Premium(),
MediaSimples()
];
void _onItemTapped(int index) {
setState(() {
_currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Resumo'),
),
BottomNavigationBarItem(
icon: Icon(Icons.show_chart),
title: Text('Relátorios'),
),
BottomNavigationBarItem(
icon: Icon(Icons.alarm),
title: Text('Lembretes'),
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text('Configurações'),
),
],
currentIndex: _currentIndex,
selectedItemColor: Color(0xFF11c76f),
onTap: _onItemTapped,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: Padding(
padding: EdgeInsets.only(top:20),
child: SizedBox(
height: 70,
width: 70,
child: FloatingActionButton(
backgroundColor: Colors.transparent,
elevation: 0,
onPressed: (){},
child: Container(
height: 70,
width: 70,
decoration: BoxDecoration(
border: Border.all(color: Colors.white, width: 4),
shape: BoxShape.circle,
gradient: LinearGradient(
begin: const Alignment(0.7, -0.5),
end: const Alignment(0.6, 0.5),
colors: [
Color(0xFF53a78c),
Color(0xFF70d88b),
],
)
),
child: Icon(Icons.add, size: 30,),
),
),
),
),
);
}
}
I understand, thank you.
– denis