如何在 Flutter 中使文本响应？

Question

我正在努力使我的应用程序中的文本具有响应性，我正在从 Kotlin 重写为 Flutter。

关键是我有一个文本小部件，它需要响应。当我在16:9屏幕比例的手机上打开它时，还可以，但是当我在18:9屏幕比例的手机上打开我的应用程序时，文本没有填满剩余空间。

在 Kotlin 中，我使用了带有指南的 Contraint 布局，这使工作变得非常容易，但我不知道如何在 Flutter 中进行。

我正在使用 AutoTextSize 包，但它不工作，我打算它工作。

在我的 Kotlin 应用程序中，它看起来像这样

在屏幕比例为 18:9 的三星 Note 9 上的 Flutter 中看起来像这样：

我的代码：

import 'package:flutter/material.dart';
import 'package:auto_size_text/auto_size_text.dart';
import '../../helpers/makdolan.dart';

class GeneratedCouponScreen extends StatelessWidget {

  final String couponImage;

  GeneratedCouponScreen({Key key, @required this.couponImage}) : super(key: key);


  @override
  Widget build(BuildContext context) {

    var _makdolan = Makdolan();
    var now = _makdolan.calculateDate();

    return Scaffold(
      backgroundColor: Colors.white,
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.all(16.0),
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('DATA WYDANIA:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                      Text(now, style: TextStyle(color: Colors.black, fontSize: 16.0))
                    ],
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('UNIKALNY KOD:', style: TextStyle(color: Colors.black, fontSize: 16.0, fontWeight: FontWeight.bold)),
                      Text(_makdolan.calculateUniqueCode(), style: TextStyle(color: Colors.black, fontSize: 16.0))
                    ],
                  )
                ],
              ),
              SizedBox(height: 8.0),
              Image.asset(couponImage),
              SizedBox(height: 8.0),
              AutoSizeText.rich(
                TextSpan(
                  text: 'Kupon ten upowa?nia do jednokrotnego odbioru produktu gratis przy kolejnym dowolnym zakupie z oferty klasycznej. Kupon ten wa?ny jest przez 7 dni od czasu jego wygenerowania i mo?e by? zrealizowany w dowolnej restauracji McDonald\'s w Polsce z wy??czeniem restauracji znajdyuj?cych si? na terenie Portu Lotniczego im. Fryderyka Chopina w Warszawie oraz Portu Lotniczego im. Lecha Wa??sy w Gda?sku. Szczegó?owy regulamin ankiety „Opinia Go?ci" znajduje si? na stronie ',
                  style: TextStyle(color: Colors.black),
                  children: [
                    TextSpan(
                      text: 'www.mcdonalds.pl ',
                      style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
                    ),
                    TextSpan(
                      text: 'w sekcji ',
                      style: TextStyle(color: Colors.black)
                    ),
                    TextSpan(
                      text: 'Regulaminy',
                      style: TextStyle(color: Color(0xffffc300), decoration: TextDecoration.underline)
                    )
                  ]
                ),
                maxLines: 12,
              ),
              Spacer(),
              Card(
                child: Container(
                  height: 95.0,
                  color: Color(0xffffc300),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('DRUKUJ /', style: TextStyle(fontSize: 28.0)),
                        Text('ZAPISZ JAKO PDF', style: TextStyle(fontSize: 28.0),)
                      ],
                    ),
                  )
                ),
              ),
              Card(
                child: Container(
                  height: 95.0,
                  color: Color(0xffffc300),
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text('PRZE?LIJ KUPON', style: TextStyle(fontSize: 28.0)),
                        Text('(WYSY?KA W CI?GU 24 GODZIN)', style: TextStyle(fontSize: 17.0),)
                      ],
                    ),
                  )
                ),
              )
            ],
          ),
        ),
      )
    );
  }
}

Answer 1

您可以尝试screenutil包。该方法基本上是根据屏幕宽度/高度/dpi 获得一个比率。因此，您可以相应地调整任何 UI 元素（如字体大小）。因此，这个想法或多或少与您原始测试设备（您拥有设计的设备）上的字体大小相匹配，并使其适应其他分辨率。

这个想法是基本的等式：

DesignScreenWidth -> 24pt(当前字体大小) Note9ScreenWidth -> x (note9 调整后的字体大小)

x = Note9ScreenWidth * 24 / DesignScreenWidth

所以，这就是你如何根据宽度、高度、屏幕 PPI 或其他任何比例来调整内容。您基本上将这些值视为比例并乘以该归一化因子

currentFactor=currentValue/designedValue.

希望它对“多分辨率意识”的概念有所澄清

Answer 2

为不同屏幕尺寸制作响应式文本的最简单方法是Sizer插件。\n

\n

检查这个插件 \xe2\xac\x87\xef\xb8\x8f
\n https://pub.dev/packages/sizer

\n

.sp\xc2\xa0- for font size\n

\n

如果您想在任何屏幕尺寸设备以及平板电脑中设置响应式文本大小，请使用.sp后值。

\n

例子：

\n

Text(\'Sizer\', style: TextStyle(fontSize: 12.0.sp))   //use SomeValue.sp in fonsize for responsive text\n

\n

您也可以使用此插件来实现响应式小部件

\n

.h\xc2\xa0 - for widget height\n.w\xc2\xa0 - for widget width\n

\n

例子：

\n

Container(\n  height: 10.0.h,  //10% height of screen\n  width: 80.0.w,   //80% width of screen\n  child: Text(\'Sizer\', style: TextStyle(fontSize: 12.0.sp)),\n);\n

\n