flutter 如何根据设备高度和宽度动态设置字体大小而不使用任何软件包

x759pob2  于 2023-01-18  发布在  Flutter
关注(0)|答案(4)|浏览(194)

我想根据设备大小给予Flutter的大小,在Figma中给出的大小我看到了许多解决方案,但不是太完美,例如,我给文本65大小,然后它用于所有设备

Text(
'Find your\nGadget',
      style:  TextStyle(
      fontSize:  65,
      color: AppColors.splashTextColor,
      fontFamily: AppFonts.raleWayExtraBold
))
xfb7svmp

xfb7svmp1#

您可以使用MediaQuery.of(context).size来获取设备大小。
然后获取设备数据,比如宽度或任何你想要的数据:

`MediaQuery.of(context).size.height, 

MediaQuery.of(context).size.width, MediaQuery.of(context).size.aspectRatio`

例如,我使用此方法处理填充,使用MediaQuery.of(context).size.width确定常规元素的填充

klsxnrf1

klsxnrf12#

您可以使用SizedBox和FittedBox Package 文本小部件,SizedBox将动态处理高度/宽度,FittedBox将根据FittedBox的父对象(即SizedBox)来适应Text子对象的大小:

SizedBox( //Preferred to use either width or height according to your requirements
  height: MediaQuery.of(context).size.height * 0.02 //(2% of screen height)
  child: FittedBox(
    child: Text(
        'Find your\nGadget',
              style:  TextStyle(
              //fontSize:  65,
              color: AppColors.splashTextColor,
              fontFamily: AppFonts.raleWayExtraBold
        )
     )
  }
}
ux6nzvsh

ux6nzvsh3#

您可以使用FittedBox来执行以下操作:

FittedBox(
fit: BoxFit.scaleDown,
child: 
  Text(
    "Text here",
    style: TextStyle(fontSize: 18),
  )
)

尝试使用BoxFit.scaleDownBoxFit.cover进行不同的变化

y3bcpkx1

y3bcpkx14#

您可以使用ThemeData,它来自您可以使用的ThemeData中的材料

static final ThemeData appTheme = ThemeData(
        scaffoldBackgroundColor: Colors.white,
        brightness: Brightness.light,
        textTheme: textTheme, 
       ........
 1. you have to set `textTheme` 

         static final TextTheme textTheme = TextTheme(
            headline1: _headline1,
            headline2: _headline2,
            headline3: _headline3,
            subtitle1: _subtitle1,
            subtitle2: _subtitle2,
            bodyText1: _bodyText1,
            bodyText2: _bodyText2,
            caption: _caption,
            button: _buttonText,
          );
    
     static final TextStyle _headline1 = const TextStyle(
        color: black,
        letterSpacing: 0,
        fontWeight: FontWeight.w400,
      ).comfortaa();
    
      static final TextStyle _headline2 = const TextStyle(
        color: black,
        fontWeight: FontWeight.w400,
      ).comfortaa();
    
      static final TextStyle _headline3 = const TextStyle(
        color: black,
        fontWeight: FontWeight.w400,
      ).comfortaa();
    
      static final TextStyle _subtitle1 = const TextStyle(
        color: black,
        fontWeight: FontWeight.w400,
      ).comfortaa();
    
      static final TextStyle _subtitle2 = const TextStyle(
        color: black,
        fontWeight: FontWeight.w400,
      ).comfortaa();
    
    
      static final TextStyle _bodyText1 = const TextStyle(
        color: black,
        fontWeight: FontWeight.w400,
      ).nunito();
    
      static final TextStyle _bodyText2 = const TextStyle(
        color: black,
        fontWeight: FontWeight.w400,
      ).nunito();
    
      static final TextStyle _caption = const TextStyle(
        color: black,
        fontWeight: FontWeight.w400,
      ).nunito();
  • 〉注:comforta和nunito是我的字体家族 *

使用案例

Text( "hello",
      style: Theme.of(context).textTheme.caption),

相关问题