在上下文之外访问屏幕宽度答案

【问题标题】：Accesing screen width outside of context在上下文之外访问屏幕宽度
【发布时间】：2020-11-08 21:01:54
【问题描述】：

我正在使用bot_toast 为上下文之外的通知创建一个类，该类将在 API 错误等时调用。我需要留出相对于屏幕宽度的边距，但这里没有上下文。我可以传递上下文，这似乎不是最好的选择。

所以我最终会得到这样的结果

Function CustomToast (message) {
  return BotToast.showAttachedWidget(
      attachedBuilder: (_) => Align(
        alignment: Alignment.topRight,
        child: Container(
          margin: new EdgeInsets.only(top: 25, right: 25.0),
          color: Colors.blue,
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              message,              
            ),
          ),
        ),
      ),
      duration: Duration(seconds: 20),
      target: Offset(520, 520));
}

我需要将右边距设置为百分比。我如何在这里访问屏幕宽度？没有上下文有可能吗？欢迎提出任何建议，甚至更改 toast 库

【问题讨论】：

标签： flutter flutter-layout toast flutter-web

【解决方案1】：

也许是应用级别的模型。一旦有了上下文，您就可以设置屏幕分辨率，以便以后检索计算的百分比。我经常使用这种方法。

  class ScreenInfoViewModel {
  List<String> _setupCompleted = [];

  String appName;
  String packageName;
  String version;
  String buildNumber;
  double screenWidth;

  ScreenInfoViewModel() {
    init();
  }

  init() async {
    var packageInfo = await PackageInfo.fromPlatform();
    appName = packageInfo.appName;
    packageName = packageInfo.packageName;
    version = packageInfo.version;
    buildNumber = packageInfo.buildNumber;
  }

  bool _smallScreen = false;
  bool _mediumScreen = false;
  bool _largeScreen = false;

  void setScreenSize(double this.screenWidth, double diagonalInches) {
    _smallScreen = diagonalInches < 5.11;
    _mediumScreen = !_smallScreen && diagonalInches <= 5.6;
    _largeScreen = diagonalInches > 5.6;
  }

  bool get isSmallScreen => _smallScreen;
  bool get isMediumScreen => _mediumScreen;
  bool get isLargeScreen => _largeScreen;

  String get screenSize {
    String size = 'S';
    if (_mediumScreen) size = 'M';
    if (_largeScreen) size = 'L';
    return size;
  }
}

我是这样用的：

class SetupScreenInfo extends HookWidget {
  // Use GetIt package to retrieve the model
  final ScreenInfoViewModel _s = locator(); 

  final _scaffoldKey = new GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {

    ///  This is the first 'context' with a MediaQuery, therefore,
    ///  this is the first opportunity to set these values.
    ///  widthPx and diagonalInches are from sized_context package.
    _s.setScreenSize(context.widthPx, context.diagonalInches);

    WidgetsBinding.instance.addPostFrameCallback((_) {
      if (context == null) return;
      Navigator.pushReplacementNamed(context, splashRoute);
    });

    return SafeArea(
      child: Scaffold(
        key: _scaffoldKey,
        body: Material(color: Colors.yellow[300]),
      ),
    );
  }
}

最后，SetupScreenInfo 是我的 MaterialApp 的初始路径。

此代码是我的生产代码的编辑，未经测试，不是可运行的示例。

希望这有助于产生一些想法。

【讨论】：