flutter - 如何使用 flutter_screenutil 根据设备大小缩放字体

Question

我无法在更大的屏幕上将字体缩放到更大的尺寸。无论设备大小如何，字体大小都保持不变。我如何实现这一目标？

这是我的 MaterialApp 代码；

ScreenUtilInit(
          designSize: Size(412, 869),
          builder: () => MaterialApp(
            debugShowCheckedModeBanner: false,
            title: 'Progressive Institute Events',
            theme: ThemeData(
              primarySwatch: Colors.blue,
              textTheme: TextTheme(
                bodyText1: TextStyle(fontSize: 16.sp),
                bodyText2: TextStyle(fontSize: 16.sp),
              ),
            ),
            home: _runIntroSlider
                ? IntroScreen(
                    disableIntroScreen: _disableIntroScreen,
                  )
                : auth.isAuth
                    ? HomeScreen()
                    : FutureBuilder(
                        future: auth.tryAutoLogin(),
                        builder: (ctx, authResultSnapshot) =>
                            authResultSnapshot.connectionState ==
                                    ConnectionState.waiting
                                ? Center(child: CircularProgressIndicator())
                                : AuthScreen(),
                      ),
            routes: {
              TabsScreen.routeName: (ctx) => TabsScreen(),
              SponsorDetailsScreen.routeName: (ctx) => SponsorDetailsScreen(),
              QuestionScreen.routeName: (ctx) => QuestionScreen(),
              SendPushNotificationScreen.routeName: (ctx) =>
                  SendPushNotificationScreen(),
              AboutAppScreen.routeName: (ctx) => AboutAppScreen(),
            },
          ),
        ),

标签： flutter

Answer 1

这就是您可以创建自己的尺寸管理器的方法。

如下创建 SizeManager 类。(size_manager.dart)

class SizeManager {
  static Orientation _orientation;
  static DeviceType _deviceType;
  static double _width;
  static double _height;

  void init(Size size, Orientation orientation) {
    _orientation = orientation;
    if (orientation == Orientation.portrait) {
      _width = size.width;
      _height = size.height;
    } else {
      _width = size.height;
      _height = size.width;
    }

    //for mobile and tablet screen
    if (0 < _width && _width <= 310) {
      _deviceType = DeviceType.SMobile;
    } else if (310 < _width && _width <=600) {
      _deviceType = DeviceType.Mobile;
    } else {
      _deviceType = DeviceType.Tablet;
    }
  }

  static fs(var i) {
    return _width / 100 * (i / 3);
  }

  static get orientation => _orientation;

  static get deviceType => _deviceType;
}

enum DeviceType {
  SMobile,
  Mobile,
  Tablet,
}

double getSize({double tabVal, double mobVal, double sMobVal}) {
  switch (SizeManager.deviceType) {
    case DeviceType.Tablet:
      return tabVal;
      break;

    case DeviceType.Mobile:
      return mobVal;
      break;

    case DeviceType.SMobile:
      return sMobVal;
      break;

    default:
      return mobVal;
  }
}

然后创建一个扩展。(size_manager_extensions.dart)

extension SizeManagerExtensions on double {
  double get fs => SizeManager.fs(this);
}

最后，您必须在 OrientationBuilder 的帮助下初始化 SizeManager

return Scaffold(
        body: OrientationBuilder(builder: (context, orientation) {
          SizeManager().init(MediaQuery.of(context).size, orientation);
          return Text(
            'How to scale font size',
            style: TextStyle(
                //fontSize: 12.0.fs - this also works but you can controll it base on device size as below
                fontSize:getSize(tabVal: 8.0.fs, mobVal: 12.0.fs, sMobVal: 16.0.fs),
                color: Color(0xFF67AD5B),
                fontWeight: FontWeight.w600),
          );
        }));