使类之外的if语句颤抖

Question

大家好，我正在创建一个Flutter应用，我需要做一个简单的if语句来决定设备类型我可以在这样的原始类中完成它，当然可以正常工作

class _MyHomePageState extends State<MyHomePage> {

  @override

 Widget build(BuildContext context) {

    double font;
    double categoriesFont;
    double navHeight;
    double navIcons;
    if(DeviceInformation(context).width > 600){
      font = fontTablet;
      categoriesFont = categoriesTabletFont;
      navHeight = navTabletHeight;
      navIcons = navTabletIcons;
    }else{
      font = fontPhone;
      categoriesFont = categoriesPhoneFont;
      navHeight = navPhoneHeight;
      navIcons = navPhoneIcons;
    }

    return Scaffold(....

但不是将这段代码放到我拥有的每个页面中，我想创建一个将在if语句中执行此操作的类，它将返回font，CategoriesFont，navHeight和navIcons变量，以便我可以根据需要使用它们其他页面

我想做这样的事情

//this class decides device type and use its corresponding percentages
class SetDeviceType{
  final context;
  SetDeviceType(this.context);
  double font;
  double categoriesFont;
  double navHeight;
  double navIcons;
  void deviceType(){
    if(DeviceInformation(context).width > 600){
      font = fontTablet;
      categoriesFont = categoriesTabletFont;
      navHeight = navTabletHeight;
      navIcons = navTabletIcons;
    }else{
      font = fontPhone;
      categoriesFont = categoriesPhoneFont;
      navHeight = navPhoneHeight;
      navIcons = navPhoneIcons;
    }
  }
  double get responsiveFont => font;
  double get responsiveCategoriesFont => categoriesFont;
  double get responsiveNavHeight => navHeight;
  double get responsiveNavIcons => navIcons;

}

然后我就可以做

DeviceType(context).font 

在确定设备屏幕类型并使用它之后获取字体变量，但我没有找到解决方法。

这里的主要思想是使此if语句可重用，并使代码更简洁。

知道如何实现这一目标吗？它不必是一类，任何可以做的工作都是受欢迎的，即函数，等等

提前感谢。

Answer 1

如果我正确理解了您的问题，则需要一个可以重复使用的类，以根据设备的宽度提供不同的值。

我认为您的解决方案非常接近。您可以将构造函数与主体一起使用，然后可以进行条件赋值。像这样：

import 'package:flutter/material.dart';

class DeviceInformation{

  //These fields are just some dummy values i used to test this
  //You can have these values wherever 
  static const fontTablet = 2.0;
  static const categoriesTabletFont = 2.0;
  static const navTabletHeight = 2.0;
  static const navTabletIcons = 2.0;
  static const fontPhone = 1.0;
  static const categoriesPhoneFont = 1.0;
  static const navPhoneHeight = 1.0;
  static const navPhoneIcons = 1.0;

  double _font;
  double _categoriesFont;
  double _navHeight;
  double _navIcons;

  double get responsiveFont => _font;
  double get responsiveCategoriesFont => _categoriesFont;
  double get responsiveNavHeight => _navHeight;
  double get responsiveNavIcons => _navIcons;

  DeviceInformation(BuildContext context){
  //This gives me the display width
  //Context.size.width would throw an error because
  //the widget;'s size hasn't been calculated at this point
  if(MediaQuery.of(context).size.width > 600){
      _font = fontTablet;
      _categoriesFont = categoriesTabletFont;
      _navHeight = navTabletHeight;
      _navIcons = navTabletIcons;
    }else{
      _font = fontPhone;
      _categoriesFont = categoriesPhoneFont;
      _navHeight = navPhoneHeight;
      _navIcons = navPhoneIcons;
    }
  }
}

然后您只需从构建中调用它
class _MyHomePageState  extends State<MyHomePage>{
  @override
  Widget build(BuildContext context) {

    DeviceInformation deviceInfo = DeviceInformation(context);

    return Text('${deviceInfo.responsiveFont}');
  }
}

我希望这是您想要的：D