I’m encountering extra padding around both the navigation bar at the top and the bottom navigation bar in my Flutter application. This padding creates unnecessary space and disrupts the intended visual layout.
the app
here is the code
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: onWillPop,
child: Scaffold(
backgroundColor: Color(0xFFf2f2fe),
appBar: AppBar(
backgroundColor: appBarBg,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'IT Buzz',
style: TextStyle(color: appBarTxt),
),
SizedBox(
width: 7,
),
Icon(
Icons.menu_book_outlined,
color: Color(0xFFf2f2fe),
),
],
),
),
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color(0xFFFFF6B7),
// Color(0xFFF6416C),
// Color(0xff3C8CE7),
Color(0xff00EAFF),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
child: Padding(
padding: const EdgeInsets.all(11.0),
child: selectedCourse.isEmpty
? GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
),
itemCount: filteredCourses.length,
itemBuilder: (context, index) {
final courseName = filteredCourses[index];
return GestureDetector(
onTap: () {
navigateToCourses(courseName, index);
},
child: Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
child: Container(
padding: EdgeInsets.all(11.0),
decoration: BoxDecoration(
color: tileColors[index % tileColors.length],
borderRadius: BorderRadius.circular(15.0),
),
child: Center(
child: Text(
courseName,
style: TextStyle(
fontSize: 16.0,
color: Color(0xFFf2f2fe),
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
),
),
),
);
},
)
: selectedYear.isNotEmpty
? selectedSemester.isNotEmpty
? GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
),
itemCount: syllabusData[selectedCourse]![
selectedYear]![selectedSemester]!
.length,
itemBuilder: (context, index) {
final subject = syllabusData[selectedCourse]![
selectedYear]![selectedSemester]!
.keys
.toList()[index];
final driveLink = syllabusData[selectedCourse]![
selectedYear]![selectedSemester]![subject];
return buildSubjectTile(
subject, driveLink!, index);
},
)
: GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
),
itemCount:
syllabusData[selectedCourse]![selectedYear]!
.keys
.length,
itemBuilder: (context, index) {
final semester =
syllabusData[selectedCourse]![selectedYear]!
.keys
.toList()[index];
return buildSemesterTile(semester, index);
},
)
: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8.0,
mainAxisSpacing: 8.0,
),
itemCount: syllabusData[selectedCourse]!.keys.length,
itemBuilder: (context, index) {
final year = syllabusData[selectedCourse]!
.keys
.toList()[index];
return buildYearTile(year, index);
},
),
),
),
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.black,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.menu_book),
label: 'Syllabus',
),
BottomNavigationBarItem(
icon: Icon(Icons.build),
label: 'Tools',
),
BottomNavigationBarItem(
icon: Icon(Icons.language),
label: 'Websites',
),
],
currentIndex: _selectedIndex,
onTap: (index) {
// setState(() {
// _selectedIndex = index;
// if (index == 1) {
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => CGPAPage()),
// );
// }
// if (index == 0) {
// Navigator.push(
// context,
// MaterialPageRoute(builder: (context) => HomePage()),
// );
// }
// });
if (index != 0 &&
ScaffoldMessenger.of(context).mounted &&
!isSnackBarVisible) {
isSnackBarVisible = true;
ScaffoldMessenger.of(context)
.showSnackBar(
SnackBar(
content: Text('Not Implemented Yet'),
),
)
.closed
.then((_) {
isSnackBarVisible = false;
});
}
},
),
),
);
}
I’ve tried setting titleSpacing: 0 within the AppBar, but it doesn’t seem to be affecting the padding.
2
Answers
In the Scaffold body, you have a
Paddingwidget with the padding set toEdgeInsets.all(11.0). Remember thatEdgeInsets.allwill gives padding to all of the sides, including top and bottom. If you want the padding to be only on the right & left side, useEdgeInsets.symmetric(horizontal: 11.0).Keep in mind that
GridViewalso has its own padding property, which might be handy if you want the padding to be included as part of the scrollable widget.default height is 56.0, but you can adjust it to your desired value or set it to null to remove the padding altogether.
for BottomNavigationBar also you can adjust the padding around the BottomNavigationBar by customizing its height using the BottomNavigationBar’s itemPadding property.
here is update for your code :