How to remove the small line below Appbar?

Viewed 1679

Flutter 1.12.13+hotfix.8

There is a little thin line just below the Appbar. Do you know how to get rid of it?

enter image description here

Code:

return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.blue,
        elevation: 0.0,
        actions: <Widget>[
          FlatButton(
            onPressed: () async {
              await _authService.signOut();
            },
            child: Icon(
              Icons.exit_to_app,
              color: Colors.white,
            ),
          ),
        ],
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        color: Colors.blue),
);
4 Answers

Specify the scaffold backgroundColor to same color as your AppBar backgroundColor will solve the issue (in your case the below code) to give the rest of app the color you want you can have that in the body color of the container enclosing the body

return Scaffold(
  backgroundColor: Colors.blue,//changed background color of scaffold
  appBar: AppBar(
    backgroundColor: Colors.blue,
    elevation: 0.0,
    actions: <Widget>[
      FlatButton(
        onPressed: () async {
          await _authService.signOut();
        },
        child: Icon(
          Icons.exit_to_app,
          color: Colors.white,
        ),
      ),
    ],
  ),
  body: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    color: Colors.blue),
);

I have added 1pt to appbar's height and the line gone.

AppBar(
    toolbarHeight: kToolbarHeight + 1,
    title: Text('Title'),
)

I tried your code in web, iphone simulator, android simulator and my android phone, didnt get white thin line any of them. I am working on flutter beta right now. Maybe your issue could be resolve by upgrade flutter or switch channel.

You can try appbar's elevation property as 0.0

AppBar(
elevation: 0.0,
),
Related