Home > Software design >  Flutter expand row inside of a column
Flutter expand row inside of a column

Time:11-10

I have the following layout:

Row -> 
  Column
  Padding ->
     Column ->
         Row ->// this one is only taking as much space as it needs
           Text
           Image
         Text
         Row

I need the row in the second column to take the whole width of the column it is wrapped in. No matter how much I look for the answer wrapping different widgets into Flexible and Expanded doesn't help.

here is the code:

Padding(
        padding: const EdgeInsets.all(10.0),
        child: Row(
          children: [
            Column(
              children:  [
                CircleAvatar(
                  radius: 25,
                  child: Image(
                    image: getCategoryImage(task.type),
                  ),
                )
              ],
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    // mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(task.title, style: Theme.of(context).textTheme.headlineMedium,),
                      const Image(
                          width: 20, image: AssetImage("assets/icons/task/tickbox.png"))
                    ],
                  ),
                  Text(generateBirdList(task.assignedBirds), style: Theme.of(context).textTheme.titleSmall,),
                  Row(
                    children: [

                    ],
                  )
                ],
              ),
            ),
          ],
        ),
      ),

CodePudding user response:

Container(
        color: Colors.amber,
        padding: const EdgeInsets.all(10.0),
        child: Row(
          children: [
            Container(
              color: Colors.blueAccent,
              child: CircleAvatar(
                radius: 25,
                child: Image.network(
                  "https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
                ),
              ),
            ),
            Expanded(
              child: Container(
                color: Colors.green,
                padding: const EdgeInsets.symmetric(horizontal: 8.0),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Row(
                      // mainAxisSize: MainAxisSize.max,
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "task.title",
                          style: Theme.of(context).textTheme.headlineMedium,
                        ),
                        Image.network(
                          "https://st.depositphotos.com/1909187/2297/i/950/depositphotos_22971972-stock-photo-blank-white-male-head-front.jpg",
                          width: 20,
                        )
                      ],
                    ),
                    Text(
                      "Bla bla bla text",
                      style: Theme.of(context).textTheme.titleSmall,
                    ),
                    Row(
                      children: [],
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
  • Related