Flutter - 如何对齐文本和图像小部件？

Question

I've a Card that contains multiple Text with an Image . Now the image is in top-center I need to align that to the right side inside the card.

I need all the text to the left side of the card and the image to the right side.

So, basically All the Text should be on the left side and the Image should be on the right side.

this is the card that I've implemented now,

Here is the code I've been implemented

  Widget _buildItemsForListView(BuildContext context, int index) {
    return Card(
      child: Column(
        children: <Widget>[
          Image.asset(Constants.FOOD_PLACEHOLDER_IMAGE_ASSET_URL, height: 50,width: 100),
          Text("Spinach soup",
            style: TextStyle(color: Colors.deepPurple, fontSize: 16),
            textAlign: TextAlign.left,),
          Text("SAR",
              style: TextStyle(color: Colors.black, fontSize: 14),
              textAlign: TextAlign.left),
          Text("26",
            style: TextStyle(color: Colors.black, fontSize: 14),
            textAlign: TextAlign.left,),
          Text(
            "Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
            style: TextStyle(color: Colors.black, fontSize: 14),
            textAlign: TextAlign.left,),
          Text("15.4" + " Calories",
            style: TextStyle(color: Colors.black, fontSize: 14),
            textAlign: TextAlign.left,)
        ],
      ),
    );
  }

How to implement this?

Any suggestions would be helpful.

Answer 1

Card(
          child: Row(
            children: <Widget>[
              Expanded(
                flex: 5,
                child: Column(
                  mainAxisSize:MainAxisSize.min,
                  crossAxisAlignment:CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      "Spinach soup",
                      style: TextStyle(color: Colors.deepPurple, fontSize: 16),
                      textAlign: TextAlign.left,
                    ),
                    Text("SAR",
                        style: TextStyle(color: Colors.black, fontSize: 14),
                        textAlign: TextAlign.left),
                    Text(
                      "26",
                      style: TextStyle(color: Colors.black, fontSize: 14),
                      textAlign: TextAlign.left,
                    ),
                    Text(
                      "Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
                      style: TextStyle(color: Colors.black, fontSize: 14),
                      textAlign: TextAlign.left,
                    ),
                    Text(
                      "15.4" + " Calories",
                      style: TextStyle(color: Colors.black, fontSize: 14),
                      textAlign: TextAlign.left,
                    )
                  ],
                ),
              ),
              Expanded(
                flex: 1,
                child: Image.network(
                    'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/1330372094/1693761761.jpg',
                    height: 50,
                    width: 100),
              )
            ],
          ),
        )

Answer 2

try providing the crossAxisAlingment parameter in the main column to align the text to left as following:

          Column(
            crossAxisAlignment: CrossAxisAlignment.start,

if you do this then including the Center image everything will be aligned to left.

so you have to wrap the current column in a row and move the image to the first one. Make sure that the image is added after the column widget to align it to right side.

it will look something like this:

return Card(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text("Spinach soup",
                style: TextStyle(color: Colors.deepPurple, fontSize: 16),
                textAlign: TextAlign.left,),
              Text("SAR",
                  style: TextStyle(color: Colors.black, fontSize: 14),
                  textAlign: TextAlign.left),
              Text("26",
                style: TextStyle(color: Colors.black, fontSize: 14),
                textAlign: TextAlign.left,),
              Text(
                "Fresh spinach, mushrooms, and hard-boiled egg served with warm bacon vinaigrette",
                style: TextStyle(color: Colors.black, fontSize: 14),
                textAlign: TextAlign.left,),
              Text("15.4" + " Calories",
                style: TextStyle(color: Colors.black, fontSize: 14),
                textAlign: TextAlign.left,)
            ],
          ),
           Image.asset(Constants.FOOD_PLACEHOLDER_IMAGE_ASSET_URL, height: 50,width: 100),
        ],
      ),
    );

NOTE: you can remove crossAxisAlingment from Row . I have added it just make it look good.

let me know if you have any doubts