如何将小部件与自定义应用栏重叠

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.

Answer 1

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 :")