Reputation: 309
I'm trying to design a very custom BottomNavigationBar in flutter like this:
Is it possible to do this kind of lump/growth in the top center of the bar ?
I precise I don't want a rounded FloatingActionButton, the best result I had with this methode is not exatcly what expected:
Upvotes: 1
Views: 1573
Reputation: 1389
MyFab Button Change size and wrap with ClipOval
For example, you can take a look at my project.
Upvotes: 0
Reputation: 332
You can use the CustomPaint widget and CustomPainter class, to draw exactly what you need. You can draw a customized path, in your case, using the path.LineTo and path.arcToPoint functions. Then use stack to put your IconButtons where ever you want . This video explains how you can use custom paint.
Update
I added a sample code, you can edit the numbers and achieve what you need. This code will give you the orange widget on this image:
class CustomBottomNav extends StatelessWidget {
const CustomBottomNav({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
return Stack(
children: [
CustomPaint(
size: Size(size.width, 110),
painter: MyCustomPainter(),
)
],
);
}
}
class MyCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.orange
..style = PaintingStyle.fill;
Path path = Path()..moveTo(0, 50);
path.lineTo(size.width * 0.4, 50);
path.quadraticBezierTo(size.width * 0.5, 5, size.width * 0.6, 50);
path.lineTo(size.width, 50);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
Upvotes: 2
Reputation: 114
I have this image and code please some change and use it.
import 'package:fancy_bottom_navigation/fancy_bottom_navigation.dart';
import 'package:flutter/material.dart';
class MyPlugin extends StatefulWidget {
static const routeName = '/FancyBottomNavigationPage';
@override
_MyPluginState createState() => _MyPluginState();
}
class _MyPluginState extends State<MyPlugin> {
int currentPage = 0;
GlobalKey bottomNavigationKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Container(
decoration: BoxDecoration(color: Colors.white),
child: Center(
child: _getPage(currentPage),
),
),
bottomNavigationBar: FancyBottomNavigation(
tabs: [
TabData(
iconData: Icons.home,
title: "Home",
onclick: () {},
),
TabData(iconData: Icons.person, title: "Profile"),
TabData(iconData: Icons.more_vert, title: "More")
],
initialSelection: 1,
key: bottomNavigationKey,
onTabChangedListener: (position) {
setState(
() {
currentPage = position;
},
);
},
),
);
}
_getPage(int page) {
switch (page) {
case 0:
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("This is the home page"),
],
);
case 1:
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("This is the Profile page"),
],
);
default:
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("This is the More page"),
],
);
}
}
}
Upvotes: 0