Flutter: адаптивные шрифты и размеры
С размерами блоков воFlutter относительно всё в порядке — очень помогает виджет Expanded. Некоторое же неудобство разработки как оказалось — это отсутствие в «из коробки» возможности указывать размер шрифтов в «адаптиве» под разные разрешения экрана.
Что делать? Решений множество. Ниже некоторые варианты:
Вариант 1:
Создать отдельный класс-обертку, через которую пропускать потом все размеры шрифтов:
class ScaleSize {
static double textScaleFactor(BuildContext context, {double maxTextScaleFactor = 2}) {
final width = MediaQuery.of(context).size.width;
double val = (width / 1400) * maxTextScaleFactor;
return max(1, min(val, maxTextScaleFactor));
}
}
Text(
intro.subtitle,
style: Theme.of(context).textTheme.subtitle1,
textAlign: TextAlign.center,
textScaleFactor: ScaleSize.textScaleFactor(context),
),Вариант 2:
Использовать различную отрисовку виджетов в зависимости от размера экранов. Как-то типа:
Widget build(BuildContext context) {
final isSmall = MediaQuery.of(context).size.width < 500;
return Provider.value(
value: isSmall
? AdaptativeTheme(
smallFontSize: 10,
bigSpace: 20,
smallSpace: 10,
)
: AdaptativeTheme(
smallFontSize: 20,
bigSpace: 40,
smallSpace: 12,
),
child: Child(),
);
}Вариант 3:
Использовать один из множества пакетов. Например Sizer. Тогда вся адаптация сведется к обёртыванию корневого виджета через виджет Sizer, и далее указание во всех нижележащих виджетах относительных размеров. Например так:
return Sizer(
builder: (context, orientation, deviceType) {
return
Scaffold(
...
...
child: Container(
width: 48.sp,
height: 48.sp,
...
...
child: Text(ListEZS[index]["nameazs"],style: TextStyle(fontSize: 14.0.sp, color: Colors.black)),