Custom Border Widget Flutter

user_9816003 0
Viewed 141

enter image description here

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?

flutter widget border user-interface
2 Answers

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

user_20827230

enter image description here

 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

user_101571270
Related