Text Wrapping in Flutter

Question

I am writing a widget in flutter for a project which should look like this, I am new to flutter and I am trying to imitate the card below

So far this is my code for the widget

import 'package:flutter/material.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';

class TrailCard extends StatelessWidget {
  const TrailCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Card(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
          child: InkWell(
            onTap: () {},
            child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(20.0),
                      child: Image.asset(
                        'assets/images/cocoa.jpg',
                        height: 100,
                        width: 90,
                        fit: BoxFit.fitHeight,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            "Boring Cocoa",
                            style: TextStyle(
                                fontSize: 18, fontWeight: FontWeight.bold),
                          ),
                          Text('Rajhamundry, AP'),
                          Text(
                            'Feel the authentic flavours of life while you visit the farms around Rajahmundry',
                            overflow: TextOverflow.ellipsis,
                          )
                        ],
                      ),
                    ),
                  ],
                )),
          )),
    );
  }
}

I tried using flexible and expanded to try and make the content look the way but I am getting overflow error

Answer 1

You can wrap the Padding widget with a Flexible widget so it takes only the amount of space needed:

NOTE: you should also set the maximum amount of lines the Text widget should take before showing the ellipsis.

Flexible(
      // new line
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Boring Cocoa",
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            Text('Rajhamundry, AP'),
            Text(
              'Feel the authentic flavours of life while you visit the farms around Rajahmundry more text to cause overflow',
              // set maximum number of lines the text should take
              maxLines: 3, // new line
              overflow: TextOverflow.ellipsis,
            )
          ],
        ),
      ),
    );

RESULT:

Answer 2

Wrap Padding with Expanded

Expanded(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              "Boring Cocoa",
                              style: TextStyle(
                                  fontSize: 18, fontWeight: FontWeight.bold),
                            ),
                            Text('Rajhamundry, AP'),
                            Text(
                              'Feel the authentic flavours of life while you visit the farms around Rajahmundry',
                              overflow: TextOverflow.ellipsis,
                            )
                          ],
                        ),
                      ),
                    )