如何自动缩放窗口小部件以适合不同的屏幕尺寸？

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 ?

Answer 1

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

Answer 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.