How to overlap a widget with a custom appbar

Question

I want to achieve an effect similar to this one:

Here's what I have: (Blue container is hidden below the appBar)

And this is my current code:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: GradesAppBar(
        title: "Grades",
        gradientBegin: Colors.red[200],
        gradientEnd: Colors.red,
      ),
      body: Stack(
        fit: StackFit.expand,
        overflow: Overflow.visible,
        children: <Widget>[
          Positioned(
            top: -20,
            left: MediaQuery.of(context).size.width / 2 - 150,
            child: Container(
              color: Colors.blue,
              width: 300,
              height: 60,
            ),
          ),
        ],
      ),
    );
  }

The GradesAppBar is a Container with boxShadow, borderRadius and gradient decoration.

This https://stackoverflow.com/questions/53658208/custom-appbar-flutter for reference — Aldy Yuan, Aug 24 '20 at 10:07
Thanks! I got it working by removing the appBar and adding the GradesAppBar as a child to the stack, with a Positioned of top 0 as its direct parent. — usersina, Aug 24 '20 at 10:28

score 1 · Accepted Answer · answered Aug 24 '20 at 10:43

When you're using stack to achieve this UI approach you should remove the AppBar and make it like this :-

Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        alignment: Alignment.center,
        fit: StackFit.expand,
        overflow: Overflow.visible,
        children: <Widget>[
          GradesAppBar(
            title: "Grades",
            gradientBegin: Colors.red[200],
            gradientEnd: Colors.red,
          ),
          Positioned(
            top: -20,
            left: MediaQuery.of(context).size.width / 2 - 150,
            child: Container(
              color: Colors.blue,
              width: 300,
              height: 60,
            ),
          ),
        ],
      ),
    );
  }

The most important thing; if your GradesAppBar extends PreferredSizeWidget I think you should replace it with Container and give it some cool decorations as you want :")

How to overlap a widget with a custom appbar

1 Answers1