class HomeView extends GetView<HomeController> {
  @override
  final HomeController controller = Get.put(HomeController());

  buildNavBar() {
    return Obx(
      () => BottomAppBar(
        shape: const CircularNotchedRectangle(),
        color: MyColorStyle.primary,
        notchMargin: 4,
        clipBehavior: Clip.antiAlias,
        child: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          iconSize: 30.0,
          showSelectedLabels: false,
          showUnselectedLabels: false,
          selectedItemColor: MyColorStyle.primary,
          unselectedItemColor: Colors.grey[600],
          onTap: controller.changeTabIndex,
          currentIndex: controller.tabIndex.value,
          backgroundColor: Colors.white,
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.dashboard), label: ''),
            BottomNavigationBarItem(
                icon: Icon(Icons.calendar_today), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.show_chart), label: ''),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: ''),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      extendBody: true,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: MyColorStyle.primary,
        elevation: 2,
        onPressed: () {
          showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            builder: (BuildContext context) => ClipRRect(
              borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(40), topRight: Radius.circular(40)),
              child: SizedBox(
                height: Get.height * 0.8,
                child: Container(),
              ),
            ),
          );
        },
        child: const Icon(Icons.add),
      ),
      bottomNavigationBar: buildNavBar(),
      body: Obx(
        () => IndexedStack(
          index: controller.tabIndex.value,
          children: [
            SizedBox(),
            SizedBox(),
            SizedBox(),
            SizedBox(),
          ],
        ),
      ),
    );
  }
}

image here(blue space)

I tried solving it with SafeArea. I can't remove the space at the bottom. None of the methods have achieved the solution I wanted.

When I made a BottomNavBar like this a while ago, there was no auto-space for the home indicator. For this, I couldn't reach a property in Scaffold or anywhere else.

CodePudding user response：

That is the gesture system navigation bar, which depends on the user's phone settings. You cannot remove but you can change the color. In the main method, before calling runApp(),

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      systemNavigationBarColor: appWhite,
      systemNavigationBarDividerColor: appWhite,
      systemNavigationBarIconBrightness: Brightness.dark));
  runApp(const App());
}

CodePudding user response：

I couldn't remove the space at the bottom, but I wrapped my Scaffold with SafeArea. I made the color of the space the same as my page by wrapping the SafeArea in the Container and giving the Container a white color. Sayfamın başlangıcı bu şekilde oldu.

Widget build(BuildContext context) { return Container( color: Colors.white, child: SafeArea( child: Scaffold(