How do I make this design? in Flutter?

Question

How do I make this design? in flutter

I have 2 Containers:

1. white Container.

2. orange Container

the orange Container Position the top-right in white Container

like the image

Answer 1

You can use a Stack together with Positioned. Here is an example, you can adjust it to fit your needs:

Padding(
        padding: const EdgeInsets.all(30),
        child: Stack(
          clipBehavior: Clip.none,
          children: <Widget>[
            Container(
              color: Colors.grey,
              height: 150,
              width: 150,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 30,
                  ),
                  Directionality(
                      textDirection: TextDirection.rtl,
                      child: Row(children: [
                        Text('hi'),
                      ])),
                ],
              ),
            ),
            Positioned(
              child: Container(
                margin: EdgeInsets.all(10),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text("test"),
                ),
                decoration: BoxDecoration(
                    color: Colors.red, borderRadius: BorderRadius.circular(20)),
              ),
              right: 10,
              top: -20,
            ),
          ],
        ),
      ),

Result: