Instead of putting the `ScrollButtomNavigatoionBar` as a children, use it directly in the place of `bottomNavigationBar` . The same have been described in the package's ReadMe section
**The bellow code will do the job !**
import 'package:flutter/material.dart';
import 'package:justchat/components/bottom_navigation_bar.dart';
import 'package:justchat/components/input_box.dart';
import 'package:justchat/constants.dart';
import 'package:justchat/screens/login_screen.dart';
import 'package:scroll_bottom_navigation_bar/scroll_bottom_navigation_bar.dart';
class HomeScreen extends StatelessWidget {
final controller = ScrollController();
final items = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
size: 10,
),
label: ("Home"),
),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
),
label: ("Settings"),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: ScrollBottomNavigationBar(
Controller: controller,
items: items,
child: ClipRRect(
borderRadius: BorderRadius.only(
topRight: Radius.circular(30),
topLeft: Radius.circular(30),
],
),
),
),
body: SafeArea(
// bottom: false,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(
top: 20.0,
left: 30.0,
),
child: Container(
child: Text(
"Message",
style: kLargeTextStyle,
),
),
),
Padding(
padding: const EdgeInsets.only(
top: 20,
right: 22,
),
child: Container(
height: 50,
width: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: kActiveSecondaryColor,
),
child: Icon(
Icons.person,
color: kTabsColor,
),
),
),
],
),
Stack(
children: [
InputBox(
padding: EdgeInsets.only(
left: 25,
right: 25,
top: 30,
),
hintText: "Find your friends?",
),
Padding(
padding: EdgeInsets.only(
top: 40.0,
right: 30.0,
),
child: GestureDetector(
onTap: () {
print("Search button Pressed");
}, //Functionality
child: Container(
alignment: Alignment.centerRight,
child: Icon(
Icons.search,
size: 40,
color: kChatscreenSecondaryColor,
),
),
),
),
],
),
SizedBox(
height: 50,
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: kTabsColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(40),
topLeft: Radius.circular(40),
),
),
),
),
],
),
),
);
}
}
Just include the BottomNavigationBar inside the body, inside a circular border container. [Like this (See the picture attached!)](https://i.stack.imgur.com/r3mXL.jpg)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: new AssetImage("assets/images/background.jpg"),
fit: BoxFit.cover)),
child: Stack(
alignment: Alignment.bottomCenter,
children: <Widget>[
Expanded(
child: Column(
children: <Widget>[
Expanded(child: _children[_currentIndex]),
],
),
),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0)),
boxShadow: [
BoxShadow(
offset: Offset(0.0, 1.00), //(x,y)
blurRadius: 4.00,
color: Colors.grey,
spreadRadius: 1.00),
],
),
height: 70,
child: ClipRRect(
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(25),
topRight: Radius.circular(25),
bottomLeft: Radius.circular(0),
bottomRight: Radius.circular(0)),
child: Container(
child: BottomNavigationBar(
backgroundColor: Color.fromRGBO(255, 255, 255, 50),
showSelectedLabels: false,
showUnselectedLabels: false,
onTap: onTabTapped,
// new
currentIndex: _currentIndex,
// new
items: [
new BottomNavigationBarItem(
icon: Icon(
Icons.phone,
size: 30,
),
title: Text('Calls'),
),
new BottomNavigationBarItem(
icon: Icon(
Icons.mail,
size: 30,
),
title: Text('Messages'),
),
new BottomNavigationBarItem(
icon: Icon(
Icons.person,
size: 30,
),
title: Text('Profile'))
],
),
)),
)
],
)),
));
}
