开发者

Flutter Persistant Bottom Navigation Package - Appbar height error

after using a safe area to scaffold-

I am using persistent_bottom_nav_bar this package for keeping Bottonavigation for all screens but the height of the appbar has changed

enter image description here

Here is my code. I have wrapped Scaffold using SafeAreait works fine after adding the safearea but it showing some white spaces at the top of the appbar.

import 'package:flutter/cupertino.dart';
import 'package:newmart/Order/order.dart';
import 'package:newmart/Screens/dashboard.dart';
import 'package:newmart/Recharge/recharge.dart';
import 'package:newmart/Company/support.dart';
import 'package:newmart/Screens/wallet.dart';
import 'package:flutter/material.dart';
import 'package:persistent_bottom_nav_bar/persistent_tab_view.dart';
// ignore: unused_import
import 'package:shared_preferences/shared_preferences.dart';

import '../widgets/floating_cart_total.dart';

class HomePage extends StatefulWidget {
const HomePage({super.key, required this.mobileNumber});
final String mobileNumber;
@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
String mb = "";

final PersistentTabController _controller =
    PersistentTabController(initialIndex: 0);

@override
void initState() {
  super.initState();
}

final int _selectedIndex = 0;
// ignore: non_constant_identifier_names
int Index = 0;

List<Widget> _buildScreens() {
  return [
    const Dashboard(),
    const Order(),
    const Wallet(),
    const Recharge(),
    const Support(),
  ];
}

List<PersistentBottomNavBarItem> _navBarsItems() {
  return [
    PersistentBottomNavBarItem(
      icon: const Icon(CupertinoIcons.home),
      title: ("Home"),
      activeColorPrimary: CupertinoColors.activeGreen,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.shopping_bag_outlined),
      title: ("Order"),
      activeColorPrimary: CupertinoColors.activeGreen,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.wallet),
      title: ("Wallet"),
      activeColorPrimary: CupertinoColors.activeGreen,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.charging_station),
      title: ("Recharge"),
      activeColorPrimary: CupertinoColors.activeGreen,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: const Icon(Icons.support_agent),
      title: ("Support"),
      activeColorPrimary: CupertinoColors.activeGreen,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
  ];
}

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: Scaffold(
        floatingActionButton: const TotalCartCount(),
        bottomNavigationBar: PersistentTabView(
          context,
          // bottomScreenMargin: 0,
          // margin: top,
          controller: _controller,
          screens: _buildScreens(),
          items: _navBarsItems(),
          confineInSafeArea: true,
          backgroundColor: Colors.white, // Default is Colors.white.
    开发者_Go百科      handleAndroidBackButtonPress: true, // Default is true.
          resizeToAvoidBottomInset:
              true, // This needs to be true if you want to move up the screen when keyboard appears. Default is true.
          stateManagement: true, // Default is true.
          hideNavigationBarWhenKeyboardShows:
              true, // Recommended to set 'resizeToAvoidBottomInset' as true while using this argument. Default is true.
          decoration: NavBarDecoration(
            borderRadius: BorderRadius.circular(10.0),
            colorBehindNavBar: Colors.white,
          ),
          popAllScreensOnTapOfSelectedTab: true,
          popActionScreens: PopActionScreensType.all,
          itemAnimationProperties: const ItemAnimationProperties(
            // Navigation Bar's items animation properties.
            duration: Duration(milliseconds: 200),
            curve: Curves.ease,
          ),
          screenTransitionAnimation: const ScreenTransitionAnimation(
            // Screen transition animation on change of selected tab.
            animateTabTransition: true,
            curve: Curves.ease,
            duration: Duration(milliseconds: 200),
          ),
          navBarStyle: NavBarStyle
              .style1, // Choose the nav bar style with this property.
        )),
  );
}
}


It looks like the issue is with the SafeArea widget that you are using. SafeArea is a widget that helps ensure that your app's UI elements are not obscured by the device's notch or other system UI, such as the navigation bar. In your case, it appears that the SafeArea widget is causing some extra whitespace to be added to the top of the app bar.

To fix this issue, you can try removing the SafeArea widget from your code and see if that resolves the issue. If you still want to use the SafeArea widget for ensuring that your app's UI is not obscured by the device's notch or other system UI, you can try wrapping only the Scaffold widget in the SafeArea, instead of wrapping the entire HomePage widget.

Here is an example of how your code could look like after making these changes:

class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
    required this.mobileNumber,
  });

  final String mobileNumber;

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String mb = '';

  final PersistentTabController _controller = PersistentTabController(
    initialIndex: 0,
  );

  @override
  void initState() {
    super.initState();
  }

  final int _selectedIndex = 0;
  // ignore: non_constant_identifier_names
  int Index = 0;

  List<Widget> _buildScreens() {
    return [
      const Dashboard(),
      const Order(),
      const Wallet(),
      const Recharge(),
      const Support(),
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: const Icon(CupertinoIcons.home),
        title: 'Home',
        activeColorPrimary: CupertinoColors.activeGreen,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(Icons.shopping_bag_outlined),
        title: 'Order',
        activeColorPrimary: CupertinoColors.activeGreen,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(Icons.wallet),
        title: 'Wallet',
        activeColorPrimary: CupertinoColors.activeGreen,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(Icons.charging_station),
        title: 'Recharge',
        activeColorPrimary: CupertinoColors.activeGreen,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
      PersistentBottomNavBarItem(
        icon: const Icon(Icons.support_agent),
        title: 'Support',
        activeColorPrimary: CupertinoColors.activeGreen,
        inactiveColorPrimary: CupertinoColors.systemGrey,
      ),
    ];
  }

  @override
  Widget build(BuildContext context)
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜