Блог

Я писал свои собственные адаптивные макеты следующим образом: вместо того, чтобы писать обычный код

 Container(padding: EdgeInsets.all(10)),
Text("abc", style: TextStyle(fontSize: 20)),
 

Я использовал функцию responsiveSize()

 Container(padding: EdgeInsets.all(responsiveSize(10, context))),
Text("abc", style: TextStyle(fontSize: responsiveSize(20, context))),
 

и определите функцию responsiveSize() как

 double responsiveSize(double number, BuildContext context){
  if (MediaQuery.of(context).size.width < 450) {
    return number;
  } else {
    return number * 1.5;
  }
}
 

или что-то в этом роде, что я могу легко изменить.

Но проблема в том, что мне приходится переносить каждое двойное значение в свой код с помощью функции responsiveSize(), что очень утомительно. Я ищу способ объединить все мои виджеты в один корневой виджет, например, обернуть мой виджет MaterialApp внутри виджета ResponsiveSize:

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ResponsiveSize(
      child: MaterialApp(
        home: HomePage(),
      ),
    );
  }
}
 

и написание обычного кода (как упоминалось выше, используйте двойные значения как есть, не заключая их в функцию responsiveSize()) и определите виджет ResponsiveSize каким-то образом, которого я не знаю. Таким образом, я могу использовать адаптивный макет только одним виджетом и могу легко удалить корневой виджет ResponsiveSize, если он мне не понадобится позже.

Однако это включает в себя изменение всех двойных значений во всех дочерних виджетах виджета ResponsiveSize, и это то, что я не знаю, как сделать.

Итак, я хотел бы знать, как я могу изменить все двойные значения всех виджетов-потомков корневого виджета?Как я должен определить корневой виджет?

Виджет LayoutBuilder может быть тем, что вы ищете.