Как определить медиа-запрос на уровне MaterialApp, чтобы его можно было применять ко всем экранам / каркасам в flutter?

#flutter #flutter-layout #flutter-dependencies #flutter-web

#flutter #flutter-layout #flutter-зависимости #flutter-web

Вопрос:

В моем веб-приложении flutter для добавления медиа-запроса я добавил css класс в body тег в index.html досье.

 <head>
    ....
    <style>
      .mobile{
        max-width:auto;
      }
      @media (min-width: 600px) {
        .mobile{
           max-width:400px;
        }
      }
    </style>
</head>
<body class="mobile">
   <script src="main.dart.js" type="application/javascript"></script>
</body>

Но flutter здесь создает flt-glass-pane тег внутри body тега и отображает пользовательский интерфейс, переполняющий body тег.

В моем втором подходе я должен добавить MediaQuery на уровне экрана, но я не хочу добавлять медиа-запрос в каждый scaffold/screen .

Итак, есть ли какая-либо альтернатива, чтобы я мог применить медиа-запрос в MateriaApp или в index.html файле только один раз.

1. Вы уже рассматривали возможность использования LayoutBuilder виджета в качестве дочернего элемента MaterialApp виджета. Это приводит к информации о доступном размере в качестве ограничений, с помощью которых вы могли бы адаптировать свой пользовательский интерфейс.

Ответ №1:

Используйте «builder» в приложении Material

 MaterialApp(
 ...
 ...
 builder: (context, child) {
    double screenWidth = MediaQuery.of(context).size.width;
    return Center(
             child: Container(
                      width: screenWidth > 600 ? 400 : screenWidth,
                      child: child,
                    ),
           );
      }, 
);