Question 288876 in Flutter Question posted in
The official Flutter documentation can be found here.

How remove additional space in AppBar in Android Flutter App?

I have a problem with Appbar in Flutter. How remove additional space on screen? (black lines).

Screenshot

enter image description here

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'Sample',
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('en'),
        Locale('pl'),
      ],
      theme: theme,
      routerConfig: router,
    );
  }
}

final GoRouter router = GoRouter(
  initialLocation: "/",
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return SomePage(navController: _navController);
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'page1',
          pageBuilder: (BuildContext context, GoRouterState state) => CupertinoPage(child: OtherPage1(navController: _navController)),
        ),
        GoRoute(
          path: 'page2',
          pageBuilder: (BuildContext context, GoRouterState state) => CupertinoPage(child: OtherPage2(navController: _navController)),
        )
      ],
    ),
  ],
);

class SomePage extends StatelessWidget {
  final NavController navController;

  const SomePage({super.key, required this.navController});

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
        providers: [
          /* here is some code, not relevant for this problem */
        ],
        child: DefaultTabController(
          length: 3,
          child: BlocBuilder<CountersCubit, Counters>(
            builder: (blockContext, state) {
              FocusScopeNode currentFocus = FocusScope.of(blockContext);
              return Scaffold(
                appBar: AppBar(
                  leading: IconButton(
                      onPressed: () => { Navigate.back(navController) },
                      icon: const Icon(Icons.arrow_back)),
                  bottom: TabBar(
                    isScrollable: true,
                    indicatorSize: TabBarIndicatorSize.label,
                    indicatorColor: Colors.blue,
                    indicatorWeight: 3.0,
                    tabs: [
                      Tab(
                          text: processTextTabLabel(
                              label: AppLocalizations.of(context)!
                                  .header_view1,
                              counter: state.view1)),
                      Tab(
                          child: badges.Badge(
                        showBadge: false,
                        child: Text(processTextTabLabel(
                            label: AppLocalizations.of(context)!
                                .header_view2,
                            counter: state.view2)),
                      )),
                      Tab(
                          text: processTextTabLabel(
                              label: AppLocalizations.of(context)!
                                  .header_view3,
                              counter: state.view3)),
                    ],
                  ),
                  title: Text(AppLocalizations.of(context)!.header_title),
                ),

                body: TabBarView(
                  children: [
                    View1(navController: navController),
                    View2(navController: navController),
                    View3(navController: navController)
                  ],
                ),
              );
            },
          ),
        ));
  }
}

I tried:

  1. Use SafeArea widget before scaffold container.

  2. Set height Appbar.

I tried may ways witch i found on stack overflow and another sites. All not working in this case.
If I remove Appbar, view looks correct.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Dhanusha Dilshan - I found resolve. Of course I tested yours solutions, but I had still a distance above appbar. I add:

    return Scaffold(
            appBar: AppBar(
              primary: false, <- this line
              leading: IconButton(

    And works. App bar default has a distance for safe area, and change height appbar, we don't change this distance. Maybe I forgot write in my base post, this flutter app is module. Is add to native android App. So we don't need safe area.


  2. 0

    1.Solution-01,

    Wrap your AppBar with PreferredSize and set preferredSize to zero.

    appBar: PreferredSize(
  preferredSize: Size.fromHeight(0.0),
  child: AppBar(
   
  ),
),

    2.Solution-02,

    Use a custom PreferredSizeWidget for the AppBar.Create a custom PreferredSizeWidget and override the preferredSize to control the height of the AppBar.

    class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(kToolbarHeight); // Set your desired height here

  @override
  Widget build(BuildContext context) {
    return AppBar(
    );
  }
}

    then you can use this app bar as custom.

    appBar: CustomAppBar(),

    3.Solution-03,

    Adjust the Scaffold’s extendBody property.

    Set extendBody: true within your Scaffold to make sure the body extends behind the AppBar, which might resolve the space issue.

    return Scaffold(
  extendBody: true,
  appBar: AppBar(
  ),
  body: TabBarView(
    children: [
    ],
  ),
);

    Try these solutions one by one to see if any of them resolves the additional space issue caused by the AppBar. Sometimes, the specific nesting of widgets or Flutter updates might affect how these solutions work.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search