如何使文本自动调整大小？

Question

我正在编写一个非常简单的优惠券应用程序，但是我在文本上苦苦挣扎。我正在将我的应用程序从Kotlin重写为Flutter。在Kotlin中，我有ConstraintLayout，它使我能够快速设计界面。我还有一个名为autoSizeTextType =“ uniform”的属性，该属性使我可以在不同的屏幕尺寸上自动调整文本大小。

看看我的照片。在iPhone 11 Max Pro上，我的卡片和文字之间有空白。我希望我的文字在不同的屏幕比例下自动调整大小。

但是，在我的Pixel 3A仿真器上，文本大小合适。

我如何允许我的文字在不同的屏幕比例下响应？

代码

import 'package:flutter/material.dart';

class ClassicCouponScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('DATA WYDANIA:', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
                      Text('23/12/2019', style: TextStyle(color: Colors.black))
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
                      Text('S-58-pS-8', style: TextStyle(color: Colors.black))
                    ],
                  )
                ],
              ),
              SizedBox(height: 16.0),
              Image.asset('assets/images/coupon_hamburger.png'),
              SizedBox(height: 16.0,),
              Text('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.', style: TextStyle(color: Colors.black)),
              Spacer(),
              Container(
                height: 95.0,
                child: Card(
                  color: Colors.orange,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('DRUKUJ /', style: TextStyle(fontSize: 30.0)),
                      Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 30.0))
                    ],
                  ),
                ),
              ),
              Container(
                height: 95.0,
                child: Card(
                  color: Colors.orange,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text('PRZEŚLIJ KUPON', style: TextStyle(fontSize: 30.0)),
                      Text('(WYSYŁKA W CIĄGU 24 GODZIN)', style: TextStyle(fontSize: 20.0))
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      )
    );
  }
}

Answer 1

使用flutter_screenutil使文本响应。用法：

使用您要在Screen.instance中支持的最高屏幕比率的宽度px和高度px初始化build

ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

Text('Hello World', style: TextStyle(
   color: Colors.white,
   fontSize: ScreenUtil.getInstance().setSp(12)),
  ),
)

您也可以参考此博客https://medium.com/nonstopio/let-make-responsive-app-in-flutter-e48428795476

Answer 2

您可以使用auto_size_text package以实现所需的行为。

首先，您必须auto_size_text到add it as a dependency文件：

pubspec.yaml

安装软件包后，您将可以在布局内使用它：

dependencies:
  auto_size_text: ^2.1.0

Answer 3

这可以解决您的问题：

import 'package:auto_size_text/auto_size_text.dart';

// ...
children: [
  // ...
  Expanded(
    child: AutoSizeText(
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
      style: TextStyle(color: Colors.black),
    ),
  ),
  // ...
],
// ...

用法

AutoSizeText的行为与Text完全相同。唯一的区别是它将调整文本的大小以适合其范围。

https://pub.dev/packages/auto_size_text

Answer 4

您可以将

AutoSizeText(
  'The text to display',
  style: TextStyle(fontSize: 20),
  maxLines: 2,
)

换成Text：

根据适合程度缩放并放置其子项。