调整大小时 Flutter 应用程序出现问题

Question

我在设计 flutter 程序时遇到了麻烦。
当我运行程序并调整程序大小时，一切都崩溃了并且不正常。

您可以在下图中看到。

Answer 1

使用 MediaQuery 使其响应不同的屏幕尺寸

    Container(
      color: Colors.red,
      width: MediaQuery.of(context).size.width,
      child: Text(
        'Always full width container',
      ),
    ),

Answer 2

如果你想监听调整大小事件，你必须将你的根小部件包装在这个：

  @override
  Widget build(BuildContext context) {
    return NotificationListener<SizeChangedLayoutNotification>(
      onNotification: (notification) {
        //here you can't use setState, so you can't have a bool on which differentiate the layout, 
        //but you should be able to call build(context) to force a rebuild
      },
      child: SizeChangedLayoutNotifier(
        child:  MediaQuery.of(context).size.width> 400?  //set your width threshold here
        //widget layout for small window
       :
        //widget layout for big window

至于你最后的评论，小部件不适合宽度的事实并不是 flutter 的错。您正在使用固定大小的小部件或其他不会默认扩展以适应可用 space 的小部件。 Scaffold 应该这样做，例如：我在我的一个应用程序中测试了上面的代码，以 Scaffold 作为根，并且小部件拉伸以适应 window 的宽度。

调整大小时 Flutter 应用程序出现问题

Problem with the Flutter app when resizing

windows

dart

flutter

flutter-layout