'Text align in a box decoration

I have this box decoration used for showing the reviews but I don't know what I should use to align the text properly. This is how it looks right now:

I want the username ("La fottaria to have some space left) I used Align( Alignment(8,3)) but it doesn't change the position.

return ListView.builder(
  shrinkWrap: true,
  scrollDirection: Axis.horizontal,
  itemCount: snapshot.data.documents.length,
  itemBuilder: (context, index) {
      return Container(
      width: 200,
      margin: EdgeInsets.only(
          top: 8, bottom: 8, right: 12),
      decoration: BoxDecoration(boxShadow: [
          BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 2,
              spreadRadius: 1)
      ], borderRadius: BorderRadius.circular(4)),
      child: Column(
          children: [
          Row(
              children: [
              CircleAvatar(
                  backgroundImage: NetworkImage(
                      snapshot.data.documents[index]
                          .data["avatarUrl"]),
              ),
              Align(
                  alignment: Alignment(8, 3),
                  child: Text(snapshot
                      .data
                      .documents[index]
                      .data["name"]),
              )
              ],
          ),
          _buildRatingStars(snapshot.data
              .documents[index].data["rating"]),
          Text(snapshot
              .data.documents[index].data["text"])
          ],
      ),
      );
  }
);

flutter dart

Solution 1:^[1]

Inside the Row widget, you can use a SizedBox with width property.

It will give some space.

Row(
  children: [
    CircleAvatar(
     backgroundImage:
         NetworkImage(snapshot.data.documents[index].data["avatarUrl"]),
    ),

    //insert here

    SizedBox(
      width: 20.0,
    ),

    Align(
      alignment: Alignment(8, 3),
      child: Text(snapshot.data.documents[index].data["name"]),
    )
  ],
)

You can remove the Align widget if you want.

Solution 2:^[2]

Instead of align widget, I suggest you to use Container widget like this:

Container(
  margin: const EdgeInsets.only(left: 15),
  child: Text(snapshot
   .data
   .documents[index]
   .data["name"]),
)

Solution 3:^[3]

Use Align

Example:

DecoratedBox(
      decoration: BoxDecoration(
        border: Border.all(
          color: Colors.blue,
          width: 1,
        ),
        borderRadius: BorderRadius.circular(4),
      ),
      child: Align(
        alignment: Alignment.center, // align type
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 15),
          child: Text(
            title,
            style: TextStyle(fontSize: 17, color: Colors.blue),
          ),
        ),
      ),
    )

Solution 4:^[4]

You can use some inbuilt property of rows i.e Main Axis Alignment and Cross Axis Alignment to align its children.For eg:

     Row(
         mainAxisAligment:MainAxisAlignment.spaceEvenly,
         crossAxisAligment:CrossAxisAligment.center,
         children: [
           CircleAvatar(
             backgroundImage:
              NetworkImage(snapshot.data.documents[index].data["avatarUrl"]),
              ),         
           SizedBox(
            width: 20.0,
                 ),
           Text(snapshot.data.documents[index].data["name"]),
                  ],
       )

You can wrap the text widget inside padding widget also to align according to your needs.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Stefano Amorelli
Solution 2	littleironical
Solution 3	vishalknishad
Solution 4

'Text align in a box decoration

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]