Flutter Multiline for text

前端 未结 8 937
春和景丽
春和景丽 2021-02-06 22:23

All I need is my text to be multi-line. Am giving the property of maxLines but its still getting RenderFlex overflowed error to the right as the next i

8条回答
  •  孤城傲影
    2021-02-06 22:59

    try this:

    Expanded(            
        child: Text(
          'a long text',
          overflow: TextOverflow.clip,
        ),
    ),
    

    in my implementation I put this inside a row and surrounded it with sized boxes on each side so that I have some space between my elements, why using expanded you may ask, well it's used to take as much space as possible so the text would look good in portrait or landscape mode.

    and here is a full example on how to make it even react vertically not just horizontally:

    Card(
      child: InkWell(
        onTap: (){},
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              SizedBox(
                height: 70, // default\minimum height
              ),
              Container(
                height: 44,
                width: 44,
                decoration: BoxDecoration(
                    color: Colors.blue,
                    borderRadius: BorderRadius.all(Radius.circular(22))),
              ),
              SizedBox(
                width: 15,
              ),
              Expanded(
                child: Text(
                  'the very long title',
                  overflow: TextOverflow.clip,
                ),
              ),
              SizedBox(
                width: 10,
              ),
              Text(
                'value', //some other text in the end of the card or maybe an icon instead
              ),
              SizedBox(
                width: 30,
              ),
            ],
          ),
        ),
      ),
    )
    

提交回复
热议问题