eandpi
eandpi

Reputation: 237

How to fix text overflow problem and make a card larger in Flutter?

I'm building out an app in flutter and I want to display a few cards in a list-view. The problems I'm facing are the following:

  1. I get a text-overflow when I have Text widgets in a column.I semi-fixed this by wrapping the Text widget in an Expanded widget, but it looks a bit cutoff (ex. "Question: How do you do problem 2?" (refer to picture below)).

  2. I want to build a larger card with a greater height and more room/white space. I've tried wrapping my column widget in a container and set the height manually, but that doesn't seem to do anything.

Here is what the card looks like right now: enter image description here

Relevant code shown below:

                             itemBuilder: (context, index) => snapshot
                                              .data.metadata.isFromCache
                                          ? _buildListItem(context,
                                              snapshot.data.documents[index])
Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
    return document.data['didProblems']
        ? Card(
            child: Center(
              child: Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('${document.data['fullName'].toString()}'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Text('HW Assignment: ${document.data['title'].toString()}'),
                    SizedBox(
                      height: 5.0,
                    ),
                    Text('Problems attempted: ${document.data['problems']}'),
                    Expanded(child: Text('Question: ${document.data['question'].toString()}'), flex: 1,),
                  ],
                ),
              ),
            ),
          )

Any help is appreciated. Thanks in advance!

Upvotes: 0

Views: 1363

Answers (2)

GJJ2019
GJJ2019

Reputation: 5182

if u r using listview then set itemExtent property to ur convenience e.g.

ListView.builder(
      itemCount: 10,
      itemBuilder: (_, int index) => YourWidget(),
      itemExtent: 150,
    ),

Upvotes: 1

Josteve Adekanbi
Josteve Adekanbi

Reputation: 12693

Even after wrapping your text in an Expanded you have to set overflow to TextOverflow.clip

Try this

 Expanded(child: Text('Question: ${document.data['question'].toString()}', overflow: TextOverflow.clip), flex:1,),

Upvotes: 1

Related Questions