How to automatically scale a widget to fit different screen sizes?

Question

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 ?

Rainer Wittmann Rainer Wittmann · Accepted Answer · 2017-08-04T09:18:21

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,
        ),
      )),
    );
  }
}

How to automatically scale a widget to fit different screen sizes?

2 Answers