你们都是如何在Flutter中指定fontSize的?

8fsztsew  于 2023-10-22  发布在  Flutter
关注(0)|答案(4)|浏览(167)

我在ThemeData的textTheme中指定了textSize。

textTheme: const TextTheme(
    displayLarge: TextStyle(
      color: Colors.black,
      letterSpacing: 4,
      fontSize: 25,
    ),
    displayMedium: TextStyle(
      color: Colors.black,
      letterSpacing: 2,
      fontSize: 18,
    ),
  ),

然而,使用这种方法,文本在某些设备上可能会变得非常小。因此,您需要获取设备的大小并指定fontSize,如下所示。

fontSize: MediaQuery.of(context).size.width * 0.01,

由于需要上下文,因此无法在ThemeData中获取设备的大小。因此,在ThemeData中使用TextTheme指定fontSize似乎不是最佳做法。
你们都是怎么指定字体大小的?

5gfr0r5j

5gfr0r5j1#

您可以检查flutter_screenutil包,或编写将使用上下文的实用程序函数:

TextStyle myTextStyle(BuildContext context) {
  return TextStyle(
    fontSize: MediaQuery.of(context).size.width * ... ,
  );
}
x0fgdtte

x0fgdtte2#

使用textScaleFactor进行全局缩放。

return MaterialApp(
  ...
  builder: (context, child) {
    var defaultScaleFactor = MediaQuery.maybeOf(context)?.textScaleFactor ?? 1.0
    defaultScaleFactor += MediaQuery.of(context).size.width / 1000;
    var clamppedScaleFactor = clampDouble(defaultScaleFactor, 0.7, 1.3);
    return MediaQuery(
      data: MediaQuery.of(context).copyWith(textScaleFactor: clamppedScaleFactor),
      child: child ?? emptyWidget,
    );
  },
);

注意:请注意大字体的兼容性。不要过度使用或修复textScaleFactortextScaleFactor和屏幕尺寸上的加权因子的限制范围更自然。

bkhjykvo

bkhjykvo3#

可以使用auto_size_text包。
自动调整文本大小以完全符合其边界的Flutter小部件。
新方法--
如果你需要在上下文中指定textTheme中的textSize。

import 'package:flutter/material.dart';

class CustomTheme{
  static ThemeData getTheme(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

     return ThemeData(
      textTheme: TextTheme(
        headline1: TextStyle(fontSize: screenWidth * 0.05)
      )
    );
   }
 }

你可以在你的main.dart类中使用CustomThem类。

StatelessWidget {
  @override
  Widget build(BuildContext context) {
   return MaterialApp(
     theme: CustomTheme.getTheme(context)
     home: HomePage(),
  );
 }

}

vd8tlhqk

vd8tlhqk4#

考虑使用auto_size_text包。它会根据屏幕自动调整文本大小。我不建议使用这个包。它往往会在一些非常小的设备或一些非常大的设备,如标签疯狂,它使您的小部件看起来都头晕目眩。
就个人而言,我离开文本是默认大小。我有一个名为ui.dart的文件,其中有一些变量,例如

const titleTextSize = 20.0;
const subtitleTextSize = 16.0;

每当我觉得某些文本应该比平常大时,我就在代码中使用这些常量之一,例如

TextStyle(fontSize: titleTextSize)

如果有些文本应该保持正常,我让它正常。在某些设备上发短信后,如果我觉得标题太大,我只需修改常量的值,直到找到最佳位置。

相关问题