Я хочу реализовать свой собственный BottomAppBar с круглым вырезом по центру, закругленными границами и полем. Чтобы добавить поле в мой BottomAppBar, я обертываю его виджетом Контейнер и устанавливаю атрибут поля margin: EdgeInsets.only(bottom: 5, left: 5, right: 5)
. Проблема заключается в том, что при этом круговая выемка немного смещается вправо.
BottomAppBar с полем:
BottomAppBar без поля:
Полный код:
import 'package:flutter/material.dart';
void main() => runApp(ExampleApp());
class ExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ExampleScreen(),
);
}
}
class ExampleScreen extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(color: Colors.amber,),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
elevation: 2.0,
),
bottomNavigationBar: BottomNavigationView(),
extendBody: true,
);
}
}
class BottomNavigationView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(bottom: 5, left: 5, right: 5),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(30)),
child: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
_buildTabItem(),
_buildTabItem()
],
),
),
),
);
}
Widget _buildTabItem() {
return Expanded(
child: SizedBox(
height: 60,
child: Container(
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(height: 24),
Text(''),
],
),
),
),
);
}
}
Это ошибка Flutter SDK или мой подход к реализации неверен?