CODEWITHSUNDEEP
flutter
U. Watt
U. Watt

Reputation: 724

How to get rid of line between appbar and body?

I have an appbar and in the body I have a column. I want to make it in such a way that you do not realise where the appbar ends and the column begins. For that, I've set the elevation of the appbar to zero and the background color of both the appbar and the widget in the column to be the same. Yet, there seems to be a line that divides the two that I just can't get rid of.

Here's the code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: SizedBox(),
        backgroundColor: Colors.blue,
        title: Text("Profile"),
        centerTitle: true,
        elevation: 0,
      ),
      body: Column(
        children: [
          SizedBox(
            height: 240,
            child: Stack(
              children: [
                ClipPath(
                  clipper: CustomShape(),
                  child: Container(
                    height: 150,
                    color: Colors.blue,
                  ),
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

Here's what the line/divider looks like:

enter image description here

I thought about getting rid of the appbar and just putting a container in place of it, but it seems to be a bit troublesome, so I wanted to check if there are any other solutions I can consider, before applying this.

Upvotes: 3

Views: 3305

Answers (2)

Cristobal
Cristobal

Reputation: 11

Enable this property on your Scaffold "extendBodyBehindAppBar" and get the top padding, in that context:

  // this line, top padding in context
  double topPadd = MediaQuery.of(context).padding.top;

  return Scaffold(
      extendBodyBehindAppBar: true, // here
       
      ... rest the code
  );

After, wrap your first child in this way:

body: Container(
  margin: EdgeInsets.only(
    top: topPadd - 1, // use the topPadd here
  ),
  child: // your old first child here

And this is the result, before:

after:

Upvotes: 1

Huthaifa Muayyad
Huthaifa Muayyad

Reputation: 12353

give your scaffold a background color the same as your appBar color. In my pictures, the color is orange.200 and I get those images, in your case, use blue as the code.

Scaffold(backgroundColor: Colors.blue,
appBar: AppBar(
        leading: SizedBox(),
        backgroundColor: Colors.blue,
        title: Text("Profile"),
        centerTitle: true,
        elevation: 0,
      ),

And in the body of your scaffold, color the containers as you want.

This is without setting a Scaffold background color: enter image description here

This is with a scaffold background: enter image description here

Upvotes: 4

Related Questions