Row MainAxisAlignment Not Working Inside Column

Row Axis Alignment is not Working inside the Column, I have applied space between yet I see them in the Start. I want them to be spaced even.

Container(
        height: 500,
        child: ListView.builder(
          itemBuilder: (ctx, index) {
            return Card(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                    margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
                    child: Text(
                      bookmarks[index].tag,
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                        color: Colors.purple,
                      ),
                    ),
                    decoration: BoxDecoration(
                        border: Border.all(
                      color: Colors.purple,
                      width: 2,
                    )),
                    padding: EdgeInsets.all(10),
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        child: Row(
                          mainAxisSize: MainAxisSize.max,
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              bookmarks[index].title,
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                            ),
                            Text(
                              bookmarks[index].url,
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Text(
                        DateFormat.yMMMd().format(bookmarks[index].date),
                        style: TextStyle(
                          color: Colors.grey,
                        ),
                      )
                    ],
                  )
                ],
              ),
            );
          },
          itemCount: bookmarks.length,
        ))

I want Google(Title) and Url(www.google.com) far apart or space even but the Alignment is not working.

The way to debug this would be to give a red color to the container that wraps you row, my best guess would be that you will see that the space taken by Row is just exactly that much to hold the title and url. That’s why the elements are stuck together.

Try adding width: MediaQuery.of(context).size.width to your container so that it takes the full width. You can reduce this if there is an overflow.

1 Like

Try this way

Expanded(
        child: Container(
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                                  Row(
                                           mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                            children: [
                                              Text(
                                                lista[index]["name"],
                                                style: TextStyle(
                                                  fontWeight: FontWeight.bold,
                                                  fontSize: 16,
                                                ),
                                              ),
                                              Text(
                                                lista[index]["name"],
                                                style: TextStyle(
                                                  fontWeight: FontWeight.bold,
                                                  fontSize: 16,
                                                ),
                                              ),
                                            ],
                                          ),

                                    ],
                                  ),
                                ),
                              )