How to position elements inside a container/decorated box

Help General
1

Hello,

I am learning flutter currently, and something I want to create is this widget :

image
image790×428 63.5 KB

I am not sure how to do it exactly without having to make the four elements of the card (group name, stage tag -planned-, members and the information) Positioned children with hard coded margin values. I do not want to do that because I’ve done some web frontend before and I know there must be someway to use ratios or something similar.

I asked in SO and I was told to try align, I’ve tried to make a container that has a child Decorated box, and then I will try to make children align within that box, I am trying just with one child right now and have :

Widget build(BuildContext context) {
  return Container(
    height: 200,
    width: double.infinity,
    child: DecoratedBox(
      decoration: BoxDecoration(
        border: BoxBorder.all(color: Colors.red, width: 1),
        image: DecorationImage(
          image: AssetImage("assets/photos/budapest-hotel.png"),
        ),
      ),
      child: Align(
        alignment: Alignment.topLeft,
        child: Text("Group name", style: TextStyle(color: Colors.white)),
      ),
    ),
  );

Which results into

image
image588×330 45 KB

I’ve enabled the border for visual debugging and I notice the BoxDecoration does not limit its size to the image size, and I think solving that would be a step forward because as you see the group name now is not positioned correctly. Can anyone please help me move forward?

Thanks

2

Im assuming the corner radius is from your image itself since I dont see a corner radius in this code you have shared? The container doesnt actually know where the image ends so yes it doesnt constrain its size to the image. You can make the image fill up the container using a different BoxFit on the box decoration

In order to create a UI like in the initial image

child: Container(
          width: 300,
          height: 400,
          clipBehavior:
              Clip.antiAlias, // Needed to enforce border radius on children
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            image: const DecorationImage(
              image: NetworkImage(
                'https://picsum.photos/300/400',
              ), // Placeholder image
              fit: BoxFit.cover,
            ),
          ),
          child: Column(
            children: [
              // First Row
              Expanded(
                flex: 3,
                child: Row(
                  children: [
                    Expanded(
                      flex: 2,
                      child: Container(color: Colors.red.withOpacity(0.5)),
                    ),
                    Expanded(
                      child: Container(color: Colors.blue.withOpacity(0.5)),
                    ),
                  ],
                ),
              ),
              // Second Row
              Expanded(
                child: Row(
                  children: [
                    Expanded(
                      child: Container(color: Colors.green.withOpacity(0.5)),
                    ),
                    Expanded(
                      child: Container(color: Colors.yellow.withOpacity(0.5)),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),

This gives

image
image710×894 65.3 KB

You can tweak the ratios and if you want the column elements to be aligned instead of row elements swap the order of column and row in this snippet