flutterdartwidgetoverlappingcard

Overlap widget inside card widget in Flutter


I wanted to place two widgets (a text and a picture) inside a card, however the picture should go over the card as the image shows:

card widget with text and picture

But I don't know how to make the picture overlapping the card.

This is my code:

             Card(
                margin: EdgeInsets.zero,
                color: Theme.of(context).colorScheme.primary,
                clipBehavior: Clip.antiAlias,
                elevation: 0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Row(
                  children: [
                    Container(
                      alignment: Alignment.bottomLeft,
                      margin: const EdgeInsets.all(12),
                      height: 70,
                      child: Text(
                        "This is a text widget.",
                        style: Theme.of(context).textTheme.bodyText1,
                      ),
                    ),
                    Image.asset(
                      'images/picture1.png',
                      scale: 5,
                    ),
                  ],
                ),
              ),

Solution

  • You can use stack widget along with positioned widget to achieve the UI