[英]How to add Floating action Button in Bottom Navigation Bar in Center with border?
I am trying to add a Floating Action Button in the middle of the Bottom Navigation bar.我正在尝试在底部导航栏的中间添加一个浮动操作按钮。 Problem is border is not appearing and also margin in Floating Action Button and icons not according to my requirement.
问题是边框没有出现,浮动操作按钮和图标中的边距也不符合我的要求。
Here is a picture of the issue.这是问题的图片。 Achieved Image
实现的图像
Here is a picture what I want Required Image这是我想要的图片 所需图片
Code代码
bottomNavigationBar: SafeArea(child: _buildBottomBar(context)),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: CircularGradientButton(
tooltip: 'Increment',
child: new Image.asset(UIData.cameraIcon),
gradient: LinearGradient(colors: <Color>[
Color.fromARGB(255, 17, 153, 142),
Color.fromARGB(255, 56, 239, 125)
]),
callback: () => openCamera(),
//_optionsDialogBox(),
elevation: 2.0,
),
Widget _buildBottomBar(BuildContext context) {
return Material(
color: Colors.white,
child: TabBar(
isScrollable: false,
unselectedLabelColor: Colors.white.withOpacity(0.3),
indicatorColor: Colors.white,
tabs: <Tab>[
new Tab(
// set icon to the tab
icon: Image.asset(
_tabController.index == 0 ? UIData.mapIconActive : UIData.mapIcon,
width: 30,
height: 30,
),
),
new Tab(
icon: Image.asset(
_tabController.index == 1
? UIData.listingIconActive
: UIData.listingIcon,
width: 30,
height: 30,
),
),
new Tab(
icon: Image.asset(
_tabController.index == 2
? UIData.messageIconActive
: UIData.messageIcon,
width: 30,
height: 30,
),
),
new Tab(
icon: Image.asset(
_tabController.index == 3
? UIData.settingsIconActive
: UIData.settingsIcon,
width: 30,
height: 30,
),
),
],
controller: _tabController,
),
);
} }
There are many possible solutions, one of them is to add padding and border.有很多可能的解决方案,其中之一是添加填充和边框。
import 'package:charts_flutter/flutter.dart' as prefix0;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
backgroundColor: Colors.blueAccent,
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.photo_camera, size: 30),
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
color: Colors.white,
child: Container(
height: 80,
color: Colors.white,
),
),
),
);
}
}
Here is a crystal clear official demonstration : https://youtu.be/2uaoEDOgk_I这是一个清晰的官方演示: https : //youtu.be/2uaoEDOgk_I
Code will be something like this:代码将是这样的:
Scaffold(..
floatingActionButton..
bottomNavigationBar..
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked
Another option is to use notchMargin
in your BottomAppBar
to get the opposite to your answer.另一种选择是在您的
BottomAppBar
使用notchMargin
来获得与您的答案相反的答案。 It looks amazing so I decided to add that option too.看起来很棒,所以我决定也添加该选项。
https://medium.com/codechai/flutter-hasnotch-property-disappeared-from-bottomappbar-solved-986552fa03a https://medium.com/codechai/flutter-hasnotch-property-disappeared-from-bottomappbar-solved-986552fa03a
return Scaffold(
appBar: AppBar(
title: Text('Flutter notch demo'),
),
bottomNavigationBar: BottomAppBar(
notchMargin: 2.0,
shape: CircularNotchedRectangle(),
),
floatingActionButtonLocation:
FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(
onPressed: () => Navigator.of(context).pop(),
child: Icon(Icons.done_all),
),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.