Ответ
Material и Cupertino — это две разные дизайн-системы, предоставляемые Flutter для создания нативных интерфейсов.
-
Material (
package:flutter/material): Реализация Material Design от Google. Характерны плоские поверхности, чёткие геометрические формы, насыщенные цвета и выразительные анимации. Стандартный выбор для приложений на Android и кроссплатформенных проектов.MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Material App')), body: Center( child: ElevatedButton( onPressed: () {}, child: const Text('Кнопка'), ), ), ), ); -
Cupertino (
package:flutter/cupertino): Реализация Human Interface Guidelines от Apple. Имитирует нативные iOS-компоненты с полупрозрачностями, размытием, скевоморфными деталями (например, переключатели) и плавными анимациями.CupertinoApp( home: CupertinoPageScaffold( navigationBar: const CupertinoNavigationBar( middle: Text('Cupertino App'), ), child: Center( child: CupertinoButton( onPressed: () {}, child: const Text('Кнопка'), ), ), ), );
На практике я часто использую условную логику для автоматического выбора стиля в зависимости от платформы:
Widget getPlatformButton() {
if (Platform.isIOS) {
return CupertinoButton(onPressed: () {}, child: const Text('Далее'));
} else {
return ElevatedButton(onPressed: () {}, child: const Text('Далее'));
}
}Также существуют библиотеки (например, adaptive_components), которые помогают создавать адаптивные интерфейсы.
Ответ 18+ 🔞
Э, слушай, тут часто спрашивают, в чём разница между этими двумя штуками. Ну, Material и Cupertino — это как две разные религии, ёпта. Одна от Гугла, другая от Эппла. И каждая со своим набором иконок, кнопок и прочей мишуры.
Material (это package:flutter/material) — это такой гугловский стиль, прямолинейный и яркий. Плоские кнопки, чёткие тени, цветастые акценты. Если делаешь под Андроид или просто хочешь, чтобы выглядело современно и технологично — это твой выбор, блядь. Тут всё по канонам Material Design, который они там постоянно обновляют.
MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Material App')),
body: Center(
child: ElevatedButton(
onPressed: () {},
child: const Text('Кнопка'),
),
),
),
);А Cupertino (это package:flutter/cupertino) — это уже яблочная вселенная. Полупрозрачности, размытия, эти их фирменные переключатели, которые щёлкают. Выглядит так, будто приложение родилось прямо в недрах iOS. Если хочешь, чтобы айфонюзер не охуел от непохожести интерфейса — юзай это.
CupertinoApp(
home: CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('Cupertino App'),
),
child: Center(
child: CupertinoButton(
onPressed: () {},
child: const Text('Кнопка'),
),
),
),
);На практике же, если делаешь кроссплатформенное приложение, приходится хитрить, как жопа. Самый простой способ — смотреть, на какой платформе запустились, и показывать соответствующую кнопку. Доверия к автоматике — ноль, поэтому проверяем вручную.
Widget getPlatformButton() {
if (Platform.isIOS) {
return CupertinoButton(onPressed: () {}, child: const Text('Далее'));
} else {
return ElevatedButton(onPressed: () {}, child: const Text('Далее'));
}
}Есть, конечно, библиотеки, которые обещают сделать эту адаптивность за тебя, но это уже на твой страх и риск, чувак. Иногда проще самому всё проконтролировать, чем потом разбираться, почему на андроиде кнопка выглядит как пидарас шерстяной.