Ответ
Я условно делю часто используемые виджеты на несколько категорий:
1. Виджеты компоновки (Layout): Базовый строительный блок любого UI.
Column/Row: Для вертикального и горизонтального расположения дочерних виджетов.Stack: Для наложения виджетов друг на друга (например, кнопка поверх изображения).Expanded/Flexible: Для управления тем, как дочерние виджеты внутриColumn/Rowзанимают доступное пространство.Container: Универсальный виджет для отступов (padding), границ (decoration), ограничений по размеру (constraints).
2. Виджеты для списков и скролла:
ListView: Основной виджет для скроллируемых списков. Чаще всего используюListView.builderдля эффективного рендеринга больших списков.GridView: Для отображения данных в виде сетки.SingleChildScrollView: Для добавления скролла к экрану, который не помещается в область просмотра.
3. Базовые виджеты содержимого и интерактива:
TextсTextStyle: Для любого текста.ElevatedButton,TextButton,IconButton: Для интерактивных элементов.TextField: Для ввода текста.Image(.asset,.network): Для отображения изображений.
4. Структурные виджеты:
Scaffold: Каркас экрана, предоставляет AppBar, Drawer, BottomNavigationBar, FloatingActionButton.MaterialApp/CupertinoApp: Корневой виджет, задающий дизайн-систему и навигацию всего приложения.
Пример типичной структуры экрана:
Scaffold(
appBar: AppBar(title: Text('Список товаров')),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: TextField(decoration: InputDecoration(hintText: 'Поиск...')),
),
Expanded(
child: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return ProductCard(product: products[index]);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => _addNewProduct(),
child: Icon(Icons.add),
),
) Ответ 18+ 🔞
А, ну так вот, смотри. Я тут условно все эти виджеты, с которыми постоянно приходится возиться, по полочкам разложил. Не то чтобы это какая-то священная истина, но так проще в голове держать, когда очередной экран пишешь.
1. Виджеты компоновки (Layout): Это, блядь, фундамент, на котором всё держится. Без них нихуя не соберёшь.
Column/Row: Ну это вообще основа основ. Хочешь вертикально —Column, горизонтально —Row. Без них как без рук, ёпта.Stack: Когда нужно наложить одно говно поверх другого. Типа аватарку в кружок обернуть, или кнопку «play» на превью видео воткнуть.Expanded/Flexible: Вот эти ребята — настоящие хитрожопые. Когда внутриRowилиColumnнужно, чтобы один виджет жрал всё свободное место, а другие ютились по краям. Без них иногда просто пиздец, всё расползается.Container: Универсальная бандура. Нужны отступы?padding. Нужна рамка или фон?decoration. Ограничить размер?constraints. Швейцарский нож, только для виджетов.
2. Виджеты для списков и скролла:
ListView: Король скроллируемых списков. Если список длинный — толькоListView.builder, иначе приложение сожрёт всю оперативку и накроется медным тазом. Серьёзно, доверия к обычномуListView— ноль ебать.GridView: Для тех случаев, когда нужно не в линию, а сеткой. Галерея фоток, каталог товаров — его вотчина.SingleChildScrollView: Ленивое, но иногда спасительное решение. Когда весь экран не влезает, оборачиваешь его в эту штуку и поехали. Но если внутри будет сложная вёрстка, может начать тормозить, имей в виду.
3. Базовые виджеты содержимого и интерактива:
TextсTextStyle: Ну тут всё ясно, без текста никуда. АTextStyle— это чтобы не просто серые буквы, а с душой, с жирностью, с цветом.ElevatedButton,TextButton,IconButton: Кнопки на все случаи жизни. Нажал — что-то произошло. Магия, блядь.TextField: Куда же без поля для ввода. Логин, пароль, поиск — везде он.Image: Картинки. Либо из своих ресурсов (.asset), либо из интернета (.network). С последними осторожнее, а то могут и не загрузиться, и будет вместо фото пустое место, удивление пиздец.
4. Структурные виджеты:
Scaffold: Это типа каркас, скелет твоего экрана. В него ты уже вставляешьAppBar(шапку),body(тело),BottomNavigationBar(нижнее меню) илиFloatingActionButton(эту плавающую хрень). Без него как будто голый.MaterialApp/CupertinoApp: А это, можно сказать, главный начальник всего приложения. Задаёт, по каким правилам всё будет выглядеть (материал от Google или купертино от Apple) и как будет работать навигация.
Вот смотри, как это обычно в коде выглядит, типичная история:
Scaffold(
appBar: AppBar(title: Text('Список товаров')),
body: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: EdgeInsets.all(16.0),
child: TextField(decoration: InputDecoration(hintText: 'Поиск...')),
),
Expanded(
child: ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
return ProductCard(product: products[index]);
},
),
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () => _addNewProduct(),
child: Icon(Icons.add),
),
)
Вот видишь? Scaffold — каркас. Внутри Column, чтобы поиск был сверху, а под ним список. А список (ListView.builder) обёрнут в Expanded, чтобы он занял всё оставшееся место и нормально скроллился. И сверху ещё плавающая кнопка болтается. Всё логично, ебать мои старые костыли. Сначала кажется, что овердохуища всего, но потом привыкаешь и собираешь интерфейсы как конструктор.