flutterflutter-pageview

I cannot decreasing space between row and page view


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"),
                          ],
                        ),
                      ],
                    ),
                  ],
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}

I should decrease this height

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),
                        ),
                      ),
                    ),
                  ],
                )
              ],
            );
  }
}```







    

Solution

  • hi guys i found the reason of the issue. I recieved this error because i didnt used the fulls creen mode in my app. I added this code block and the space has been removed :

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,
    overlays: [SystemUiOverlay.bottom]);//for full screen app