CODEWITHSUNDEEP
flutterdart
Agung
Agung

Reputation: 13813

how to remove horizontal white line in the bottom of my custom app bar?

So I am trying to make a custom reusable appbar widget like this

class MyCustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  const MyCustomAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final primaryColor = Theme.of(context).primaryColor;
    return AppBar(
      backgroundColor: primaryColor,
      elevation: 0, // to remove drop shadow
      titleSpacing: 0, // to remove extra padding on appbar left side
      title: Text("This Is appbar Title"),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(50.0);
}

and then I use it on my scaffold like this

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

  @override
  Widget build(context) {
    return Scaffold(
      appBar: MyCustomAppBar(),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 100,
            color: Theme.of(context).primaryColor,
            child: Center(
              child: Text(
                "this is container that has the same color with appbar",
                style: TextStyle(
                  fontSize: 10,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

and here is the result:

enter image description here

as you can see, there is a white horizontal line between the appbar and the container inside the column. and it will only apppear on Android. how to remove this?

If I change the Scaffold background color to be red, then that horizontal line will turn to be red as well.

I need to make a custom reusable widget. If I implement directly (without widget separation) like the code below, that horizontal line will not appear

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

  @override
  Widget build(context) {
    final primaryColor = Theme.of(context).primaryColor;
    return Scaffold(
      appBar: AppBar( // I don't want to implement it directly like this. I want separate Appbar widget
        backgroundColor: primaryColor,
        elevation: 0, // to remove drop shadow
        titleSpacing: 0, // to remove extra padding on appbar left side
        title: Text("This Is appbar Title"),
      ),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 100,
            color: Theme.of(context).primaryColor,
            child: Center(
              child: Text(
                "this is container that has the same color with appbar",
                style: TextStyle(
                  fontSize: 10,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Upvotes: 3

Views: 2591

Answers (1)

BIS Tech
BIS Tech

Reputation: 19444

It's because your Scaffold background color is white.

return Scaffold(
      backgroundColor: primaryColor,
      appBar: AppBar(...

Upvotes: 3

Related Questions