CODEWITHSUNDEEP
flutterflutter-layout
Tony
Tony

Reputation: 2748

Row with Expanded

I have 3 widgets in the row

GestureDetector(
  onTap: () {},
  child: Card(
    margin: EdgeInsets.zero,
    child: Padding(
      padding: EdgeInsets.all(15),
      child: Row(
        children: <Widget>[
          Text(
            "Description",
            style: TextStyle(fontSize: 15, color: Colors.orange),
          ),
          Spacer(),
          Expanded(
            child: Text(
              descriptionText,
              style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
            ),
          ),
          Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
        ],
      ),
    ),
  ),
)

The UI looked like this

enter image description here

How can I move the All beside > ? If the text is too long, I would like the Text displayed multi line, that why I use Expanded.

Upvotes: 1

Views: 79

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 268494

You can remove the Expanded, however if there's a need for that, you can use the textAlign property:

Expanded(
  child: Text(
    'All',
    textAlign: TextAlign.right,
  ),
)

Full solution:

GestureDetector(
  onTap: () {},
  child: Card(
    margin: EdgeInsets.zero,
    child: Padding(
      padding: EdgeInsets.all(15),
      child: Row(
        children: <Widget>[
          Text(
            "Description",
            style: TextStyle(fontSize: 15, color: Colors.orange),
          ),
          Spacer(),
          Expanded(
            child: Text(
              descriptionText,
              textAlign: TextAlign.right, // <-- You need this
              style: TextStyle(fontSize: 15, color: const Color(0xff0000ff)),
            ),
          ),
          Text(">", style: TextStyle(fontSize: 15, color: Colors.black))
        ],
      ),
    ),
  ),
)

Upvotes: 1

Related Questions