Custom Border Widget Flutter-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

 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