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

How to removing black border on navigator in a Flutter app

I’m currently developing with Flutter, using VS Code as my compiler and Pixel 6 as my simulator, with Android SDK 34. I’ve encountered an issue where my application’s navigator (bottom gesture bar) shows a black border. Here’s the code I’m using, derived from the official Flutter docs under the ‘navigation bar’ section:

flutter create --sample=material.NavigationBar.1 mysample 

import 'package:flutter/material.dart';

/// Flutter code sample for [NavigationBar].

void main() => runApp(const NavigationBarApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: NavigationExample());
  }
}

class NavigationExample extends StatefulWidget {
  const NavigationExample({super.key});

  @override
  State<NavigationExample> createState() => _NavigationExampleState();
}

class _NavigationExampleState extends State<NavigationExample> {
  int currentPageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        onDestinationSelected: (int index) {
          setState(() {
            currentPageIndex = index;
          });
        },
        selectedIndex: currentPageIndex,
        destinations: const <Widget>[
          NavigationDestination(
            icon: Icon(Icons.explore),
            label: 'Explore',
          ),
          NavigationDestination(
            icon: Icon(Icons.commute),
            label: 'Commute',
          ),
          NavigationDestination(
            selectedIcon: Icon(Icons.bookmark),
            icon: Icon(Icons.bookmark_border),
            label: 'Saved',
          ),
        ],
      ),
      body: <Widget>[
        Container(
          color: Colors.red,
          alignment: Alignment.center,
          child: const Text('Page 1'),
        ),
        Container(
          color: Colors.green,
          alignment: Alignment.center,
          child: const Text('Page 2'),
        ),
        Container(
          color: Colors.blue,
          alignment: Alignment.center,
          child: const Text('Page 3'),
        ),
      ][currentPageIndex],
    );
  }
}

Expected Result:
I am trying to achieve this look on my navigation bar, there is no extra black board under the navigation bar:
Expected Result

Actual Result:
But the app is currently showing a black border on the navigation bar like so:
Actual Result

I’ve tried:

  1. Other example code from the official Flutter docs.
  2. Other simulator like Pixel 5 and resizable simulator.
  3. Other SDK like Android 13 or Android 12.

but the issue still persists.

Tags:

3

Answers


  1. 0

    Use systemChrome Function for that

    just put this code in either in initState()

    SystemChrome.setSystemUIOverlayStyle(
      const SystemUiOverlayStyle(
          statusBarColor: Colors.transparent,
          systemNavigationBarColor: Colors.white
      ),
);
    Login or Signup to reply.
  3. 0

    Here’s an code that sets a transparent navigation bar and system UI overlay:

    import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Set the system UI overlay to transparent navigation bar.
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.transparent,
    ));

    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

    By setting SystemChrome.setSystemUIOverlayStyle with a transparent systemNavigationBarColor, you should be able to remove the black border around the bottom navigation bar on your Pixel 6 simulator.

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

Back To Top
Search