Custom Border Widget Flutter

Question

How to make such a widget so that the Row widget is in the middle in the header, and behind the container there can be any color that does not intersect with the header?

Answer 1

Use Stack() with Positioned () widgets to achieve this.

Answer 2

 SizedBox(
        height: 150,
        width: 400,
        child: Stack(
          children: [
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                height: 150 - 48 / 2, // remove half title box height
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.amber, width: 5),
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
            ),
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                alignment: Alignment.center,
                color: Colors.grey[50],
                width: 150 / 2,
                height: 48,
                padding: const EdgeInsets.symmetric(horizontal: 24),
                child: Text("title"),
              ),
            ),
            Align(
              alignment: Alignment.center,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Text("1st item"),
                  SizedBox(
                    height: 10,
                  ), // space between item
                  Text("second item item"),
                ],
              ),
            )
          ],
        ),
      )

To learn more about Stack