2

I have a ListView of cards wrapping a ListTile, inside each list tile I have title and a subtitle, I tried to debug my app on several phones (android/ios). For some of theses phones, the subtitle text overflows the card widget because they have smaller screen. Is there a way to effectively fit my text widgets according to screen size ?

Shady Aziza
  • 50,824
  • 20
  • 115
  • 113

2 Answers2

2

You can assign maxLines and overflow attributes to a Text widget:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static const String _longText = 'Lorem ipsum dolor sit amet, consectetur adip'
      'iscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna '
      'aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor'
      'is nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in rep'
      'rehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatu'
      'r. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui off'
      'icia deserunt mollit anim id est laborum.';
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('TestProject'),
      ),
      body: new Card(
          child: new ListTile(
        title: const Text('Title'),
        subtitle: const Text(
          _longText,
          maxLines: 2,
          overflow: TextOverflow.ellipsis,
        ),
      )),
    );
  }
}

Screenshot

Rainer Wittmann
  • 7,528
  • 4
  • 20
  • 34
  • but it is not possible to dynamically resize the widget based on the screen size, what if I want the whole text to appear? – Shady Aziza Aug 04 '17 at 09:31
  • The ListTile is not set up for such a long content. If you remove maxLines and overflow and add isThreeLine = true, your Card will show 4 lines of subtitle. If you need more, you could have a look at ExpansionTile. – Rainer Wittmann Aug 04 '17 at 09:42
  • 1
    btw the text overflows anyway on iPhone SE, even when setting overflow property. – Shady Aziza Aug 05 '17 at 12:49
  • @ShadyAziza the scaling is bad on Flutter; you need make a device scaler value and scale everything manually.. – Oliver Dixon Aug 14 '21 at 13:59
2

The problem is that you're using ListTile for stuff they are not made for.

A listTile, according to material.io, is at most 3 lines of text. https://material.io/guidelines/components/lists.html#lists-usage

Use a card instead, which fits the content.

Rémi Rousselet
  • 256,336
  • 79
  • 519
  • 432