Flutter how to create responsive Text widget?

you can use this plugin flutter_screenutil.It is a flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!

Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option #Please set the width and height of the design draft before use, the width and height of the design draft (unit px). Be sure to set the page in the MaterialApp's home(ie the entry file, just set it once) to ensure that the fit size is set before each use:

//fill in the screen size of the device in the design//default value : width : 1080px , height:1920px , allowFontScaling:falseScreenUtil.instance = ScreenUtil.getInstance()..init(context);//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);//If you wang to set the font size is scaled according to the system's "font size" assist optionScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

Use： #Adapt screen size： #Pass the px size of the design draft：

Adapted to screen width: ScreenUtil.getInstance().setWidth(540),

Adapted to screen height: ScreenUtil.getInstance().setHeight(200),

You can also use ScreenUtil() instead of ScreenUtil.getInstance(), for example:ScreenUtil().setHeight(200)

Note

Height is also adapted according to setWidth to ensure no deformation (when you want a square)

setHeight method is mainly adapted in height, you want to control the height and actuality of a screen on the UIUsed when the same is displayed.

//for example://rectangleContainer(       width: ScreenUtil.getInstance().setWidth(375),       height: ScreenUtil.getInstance().setHeight(200),       ...        ),////If you want to display a square:Container(       width: ScreenUtil.getInstance().setWidth(300),       height: ScreenUtil.getInstance().setWidth(300),        ),

Adapter font:

//Incoming font size，the unit is pixel, fonts will not scale to respect Text Size accessibility settings//(AllowallowFontScaling when initializing ScreenUtil)ScreenUtil.getInstance().setSp(28)    //Incoming font size，the unit is pixel，fonts will scale to respect Text Size accessibility settings//(If somewhere does not follow the global allowFontScaling setting)ScreenUtil(allowFontScaling: true).setSp(28)  //for example:Column(          crossAxisAlignment: CrossAxisAlignment.start,          children: <Widget>[            Text(                'My font size is 24px on the design draft and will not change with the system.',                style: TextStyle(                  color: Colors.black,                  fontSize: ScreenUtil.getInstance().setSp(24),                )),            Text(                'My font size is 24px on the design draft and will change with the system.',                style: TextStyle(                  color: Colors.black,                  fontSize: ScreenUtil(allowFontScaling: true).setSp(24),                )),          ],        )

Other related apis：

ScreenUtil.pixelRatio       //Device pixel densityScreenUtil.screenWidth      //Device widthScreenUtil.screenHeight     //Device heightScreenUtil.bottomBarHeight  //Bottom safe zone distance, suitable for buttons with full screenScreenUtil.statusBarHeight  //Status bar height , Notch will be higher Unit pxScreenUtil.textScaleFactory //System font scaling factorScreenUtil.getInstance().scaleWidth //Ratio of actual width dp to design draft pxScreenUtil.getInstance().scaleHeight //Ratio of actual height dp to design draft px

try this: you get the adaptive text size according to different screen sizes

    class AdaptiveTextSize {      const AdaptiveTextSize();      getadaptiveTextSize(BuildContext context, dynamic value) {    // 720 is medium screen height        return (value / 720) * MediaQuery.of(context).size.height;      }    }

use case :

                 Text("Paras Arora",style: TextStyle(fontSize:                  AdaptiveTextSize().getadaptiveTextSize(context, 20)),

class SizeConfig {  static MediaQueryData _mediaQueryData;  static double screenWidth;  static double screenHeight;  static double blockSizeHorizontal;  static double blockSizeVertical;  void init(BuildContext context) {    _mediaQueryData = MediaQuery.of(context);    screenWidth = _mediaQueryData.size.width;    screenHeight = _mediaQueryData.size.height;    blockSizeHorizontal = screenWidth / 100;    blockSizeVertical = screenHeight / 100;  }}

SizeConfig().init(context); add this after widget build and usestyle: TextStyle(fontSize: 2 * SizeConfig.blockSizeVertical,),

Multiply with your desired number, try at least one time. I have attached screen shots.

My solution:

Other Solutions: