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.
In the Scaffold body, you have a Padding widget with the padding set to EdgeInsets.all(11.0). Remember that EdgeInsets.all will gives padding to all of the sides, including top and bottom. If you want the padding to be only on the right & left side, use EdgeInsets.symmetric(horizontal: 11.0).
Keep in mind that GridView also has its own padding property, which might be handy if you want the padding to be included as part of the scrollable widget.