Changing the TabBar shape in flutter - flutter

Question

I made a bottom app bar with the shape property set to "CircularNotchedRectangle" and it worked like a charm! The problem is that I'm looking for a "swipe to change page" functionality as TabBar provides but I don't see any way I can change its shape to the CircularNotchedRectangle. Can I change its shape? Or should I try and make my own "swipe to change page" functionality?
Thanks!
My current BottomNavigationBar:
BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 2.0,
child: Stack(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: Icon(Icons.search),
iconSize: 35,
color: widget.currentTab == 0 ? Colors.purple[500] : Colors.black,
onPressed: (){
setState(() {
widget.currentTab = 0;
});
}
),
IconButton(
icon: Icon(Icons.account_circle),
iconSize: 35,
color: widget.currentTab == 1 ? Colors.purple[500] : Colors.black,
onPressed: (){
setState(() {
widget.currentTab = 1;
});
}
),
SizedBox(width: 40),
IconButton(
icon: Icon(Icons.group),
iconSize: 35,
color: widget.currentTab == 2 ? Colors.purple[500] : Colors.black,
onPressed: (){
setState(() {
widget.currentTab = 2;
});
}
),
IconButton(
icon: Icon(Icons.chat_bubble),
iconSize: 35,
color: widget.currentTab == 3 ? Colors.purple[500] : Colors.black,
onPressed: (){
setState(() {
widget.currentTab = 3;
});
}
),
]
)
]
)
);
This is the shape I'm trying to get with the TabBar

Answer 1

You can copy paste run full code below
To implement swipe to change page functionality with your current code
You can directly use PageView
code snippet
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
Red(),
Blue(),
Yellow(),
Green(),
],
);
}
...
void bottomTapped(int index) {
setState(() {
currentTab = index;
pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
...
IconButton(
icon: Icon(Icons.search),
iconSize: 35,
color: currentTab == 0 ? Colors.purple[500] : Colors.black,
onPressed: () {
bottomTapped(0);
}),
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
double width;
Color primaryColor = Colors.blue;
int currentTab = 0;
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
Red(),
Blue(),
Yellow(),
Green(),
],
);
}
#override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
currentTab = index;
});
}
void bottomTapped(int index) {
setState(() {
currentTab = index;
pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
#override
Widget build(BuildContext context) {
width = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: buildPageView(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.red,
child: const Icon(
Icons.add,
),
onPressed: () {},
),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 2.0,
child: Stack(children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
IconButton(
icon: Icon(Icons.search),
iconSize: 35,
color: currentTab == 0 ? Colors.purple[500] : Colors.black,
onPressed: () {
bottomTapped(0);
}),
IconButton(
icon: Icon(Icons.account_circle),
iconSize: 35,
color: currentTab == 1 ? Colors.purple[500] : Colors.black,
onPressed: () {
bottomTapped(1);
}),
SizedBox(width: 40),
IconButton(
icon: Icon(Icons.group),
iconSize: 35,
color: currentTab == 2 ? Colors.purple[500] : Colors.black,
onPressed: () {
bottomTapped(2);
}),
IconButton(
icon: Icon(Icons.chat_bubble),
iconSize: 35,
color: currentTab == 3 ? Colors.purple[500] : Colors.black,
onPressed: () {
bottomTapped(3);
}),
])
])),
);
}
}
class Red extends StatefulWidget {
#override
_RedState createState() => _RedState();
}
class _RedState extends State<Red> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.purple,
);
}
}
class Blue extends StatefulWidget {
#override
_BlueState createState() => _BlueState();
}
class _BlueState extends State<Blue> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.blueAccent,
);
}
}
class Yellow extends StatefulWidget {
#override
_YellowState createState() => _YellowState();
}
class _YellowState extends State<Yellow> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.yellowAccent,
);
}
}
class Green extends StatefulWidget {
#override
_GreenState createState() => _GreenState();
}
class _GreenState extends State<Green> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.greenAccent,
);
}
}

Answer 2

All you need to do is to define the Fab location inside Scaffold like this :
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,