Question posted in 
I am using a custom app bar and page view. I am trying to decrease the space between SortAndFilterRow and LibraryTabScreen. I don’t use padding or margin or anything else that increases the space between the two of them. I tried using the Flexible widget instead of Expanded for wrapping the page view. This is the LibraryScreen page:
import 'package:feauthor/LibraryScreen/LibraryTabScreen.dart';
import 'package:feauthor/LibraryScreen/SortAndFilterRow.dart';
import 'package:feauthor/MainScreen/MainScreen.dart';
import 'package:flutter/material.dart';
class LibraryScreen extends StatefulWidget {
const LibraryScreen({super.key});
@override
_LibraryScreenState createState() => _LibraryScreenState();
}
class _LibraryScreenState extends State<LibraryScreen> {
PageController _pageController = PageController();
int _selectedIndex = 0;
void _onPageChanged(int index) {
setState(() {
_selectedIndex = index;
});
}
void _onTabTapped(int index) {
_pageController.animateToPage(
index,
duration: Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFF4F4F4),
body: Column(
children: [
SizedBox(height: 40), // space for app bar height
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
onTap: () => _onTabTapped(0),
child: Text(
'KUTUPHANEM',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 20,
color: _selectedIndex == 0 ? Colors.black : Color(0xFFC8C8C8),
),
),
),
GestureDetector(
onTap: () => _onTabTapped(1),
child: Text(
'INDIRILENLER',
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 20,
color: _selectedIndex == 1 ? Colors.black : Color(0xFFC8C8C8),
),
),
),
],
),
),
SizedBox(height: 24),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: SortAndFilterRow(),
),
Expanded(
child: PageView(
controller: _pageController,
onPageChanged: _onPageChanged,
children: [
// library page content
LibraryTabScreen(),
// downloaded page content
Center(child: Text('İndirilenler İçeriği')),
],
),
),
],
),
);
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
}
void main() => runApp(MaterialApp(
home: LibraryScreen(),
));
And this is the LibraryTabScreen page:
import 'package:flutter/material.dart';
class LibraryTabScreen extends StatefulWidget {
const LibraryTabScreen({super.key});
@override
State<LibraryTabScreen> createState() => _LibraryTabScreenState();
}
class _LibraryTabScreenState extends State<LibraryTabScreen> {
@override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.7326, // value is changeable later
child: ListView.builder(
scrollDirection: Axis.vertical,
itemCount: 20,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: Color(0xFF7A7A7A)),
top: index == 0 ? BorderSide(color: Color(0xFF7A7A7A)) : BorderSide.none,
),
),
child: Row(
children: [
Padding(
padding: const EdgeInsets.only(left: 12),
child: SizedBox(
width: 56,
height: 87,
child: Image.asset(
'assets/images/examplebook.jpg',
fit: BoxFit.fill,
),
),
),
SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
"WHAT WE SET IN MOTION",
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 20,
color: Color(0xFF000000),
),
),
],
),
SizedBox(height: 12),
Row(
children: [
Text(
"STEPHANİE AUSTİN EDWARDS",
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.normal,
fontSize: 15,
color: Color(0xFF000000),
),
),
],
),
SizedBox(height: 24),
Row(
children: [
Text("Sayfa"),
],
),
],
),
],
),
);
},
),
),
],
);
}
}
and this is my shortandfilterrow class codes
class SortAndFilterRow extends StatefulWidget {
const SortAndFilterRow({super.key});
@override
State<SortAndFilterRow> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<SortAndFilterRow> {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(Icons.filter_list_sharp, color: Colors.black, size: 30),
TextButton(
onPressed: () {
// Filter operation
},
child: const Text(
"Filtrele",
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 20,
color: Color(0xFF000000),
),
),
),
],
),
Row(
children: [
Icon(Icons.sort, color: Colors.black, size: 30),
TextButton(
onPressed: () {
// Sort operation
},
child: const Text(
"Sırala",
style: TextStyle(
fontFamily: 'Roboto',
fontWeight: FontWeight.bold,
fontSize: 20,
color: Color(0xFF000000),
),
),
),
],
)
],
);
}
}```
2
Answers
hi guys i found the reason of the issue. I gave this error because i didnt used the fulls creen mode in my app. I added this code block and the space has been removed :
buddy To reduce the space between SortAndFilterRow and LibraryTabScreen, you can adjust the height properties of the SizedBox widgets and verify that there are no unnecessary paddings or margins. Specifically, you should focus on the SizedBox(height: 24) between SortAndFilterRow and the PageView. Here’s how you can modify the LibraryScreen page to address this: