How to remove grey bar around CupertinoNavigationBar?-CodePudding

How can I remove this grey bar at the bottom of the CupertinoNavigationBar? I have tried changing the backgroundColor for the nav bar but it doesn't seem to have any effect on the grey bar. I can change it to transparent or match it with the Container's background color but the grey bar is still visible.

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

class ModalFitCreate extends StatelessWidget {
  const ModalFitCreate({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
        child: SafeArea(
          top: false,
          child: Container(
            color: const Color(0xFFF5F5F5),
            child: Column(
              children: [
                CupertinoNavigationBar(
                  backgroundColor: Colors.transparent,
                  automaticallyImplyLeading: false,
                  leading: TextButton(
                    style: ButtonStyle(
                      overlayColor: MaterialStateProperty.all(Colors.transparent),
                    ),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: const Text(
                      'Cancel',
                      style: TextStyle(
                        fontSize: 16,
                      )
                    )
                  ),
                  middle: const Text(
                    'New Event',
                    style: TextStyle(
                      fontSize: 16,
                    )
                  ),
                  trailing: TextButton(
                      style: ButtonStyle(
                        overlayColor: MaterialStateProperty.all(Colors.transparent),
                      ),
                      onPressed: () {},
                      child: const Text(
                          'Add',
                        style: TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        )
                      )
                  ),
                ),
              ],
            )
          )
        ));
  }
}

CodePudding user response：

I think the grey bar is to make the look match the iOS vendor widget. If you don't want that, you can always build up a navbar from scratch. You control every pixel.

CodePudding user response：

The border of the navigation bar. By default renders a single pixel bottom border side. If a border is null, the navigation bar will not display a border.

So, Just add a new property under the CupertinoNavigationBar border and make it none.

border: const Border(bottom: BorderSide.none), / border: null,