how to set font size dynamically according to device height and width without use any package-CodePudding

I want to give size in flutter according to device size which size given in Figma I saw many solution but not too perfect for example I give size 65 to text then it use for all devices

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

CodePudding user response：

You may use the ThemeData is from material In ThemeData you can use

    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();

> Note :comforta and nunito is my fontfamily

For usecase

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

CodePudding user response：

You can use MediaQuery.of(context).size to get the device size.

and then get device data like width or whatever you want:

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

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

For example, I use this method to handle padding, I use MediaQuery.of(context).size.width to determine padding of general elements

CodePudding user response：

You can use FittedBox for this:

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

Try using BoxFit.scaleDown or BoxFit.cover for different variations