Что такое Material?

Material — система дизайна и компоненты в Flutter

Material - это дизайн система от Google, реализованная в Flutter через пакет flutter/material.dart. Она обеспечивает готовые компоненты (widgets), цвета, шрифты и анимации, соответствующие Material Design спецификации.

Основное назначение Material

1. Стандартные компоненты (Widgets)

import 'package:flutter/material.dart';

AppBar() - верхняя панель
FloatingActionButton() - круглая кнопка
Scaffold() - основная структура страницы
Drawer() - боковое меню
NavigationBar() - нижняя навигация
Card() - карточка с тенью
Button(), ElevatedButton(), TextButton() - кнопки
TextField(), TextFormField() - поля ввода

2. Themeинг и стили

MaterialApp(
  title: "My App",
  theme: ThemeData(
    primaryColor: Colors.blue,
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    useMaterial3: true,
  ),
  home: HomePage(),
)

3. Цвета Material Design

Colors.red
Colors.blue
Colors.green
Colors.grey
Colors.transparent

// С оттенками
Colors.red[100]  // светло-красный
Colors.red[500]  // основной красный
Colors.red[900]  // темно-красный

Material Design 2 vs Material Design 3

Material Design 2:

• Классический Material Design
• Четкие границы, скругления 4-8px
• Фиксированные цвета

Material Design 3 (динамический):

ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.blue,
    brightness: Brightness.light,
  ),
)

• Адаптивные цвета (Material You - берут из обоев)
• Больше скруглений
• Лучше адаптируется к системной теме

Основная структура Material приложения

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage();

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Material Demo"),
      ),
      body: Center(
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {},
              child: Text("Click me"),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

Основные Material компоненты

Структура экрана:

• Scaffold - базовая структура (AppBar, Body, FAB, Drawer)
• AppBar - верхняя панель
• BottomNavigationBar - нижняя навигация
• NavigationBar - современная нижняя навигация (M3)

Кнопки:

• ElevatedButton - приподнятая кнопка (основная)
• TextButton - текстовая кнопка
• OutlinedButton - кнопка с границей
• IconButton - кнопка с иконкой

Ввод данных:

• TextField - текстовое поле
• TextFormField - с валидацией
• Checkbox - чекбокс
• Radio - радиокнопка
• Switch - переключатель

Контейнеры:

• Card - карточка с тенью
• Container - базовый контейнер
• Padding - отступы
• ListView - прокручиваемый список

Material Icons

import 'package:flutter/material.dart';

Icon(Icons.home)
Icon(Icons.settings)
Icon(Icons.favorite)
Icon(Icons.search)
Icon(Icons.menu)
Icon(Icons.arrow_back)

Полный список: https://fonts.google.com/icons

Темирование с Material

// Светлая тема
ThemeData(
  brightness: Brightness.light,
  primaryColor: Colors.blue,
  scaffoldBackgroundColor: Colors.white,
  appBarTheme: AppBarTheme(
    backgroundColor: Colors.blue,
    titleTextStyle: TextStyle(color: Colors.white),
  ),
)

// Темная тема
ThemeData(
  brightness: Brightness.dark,
  primaryColor: Colors.blue,
  scaffoldBackgroundColor: Colors.grey[900],
)

Material vs Cupertino

Material - для Android дизайна (most apps) Cupertino - для iOS дизайна (CupertinoApp, CupertinoButton)

Best Practice

• Используй Material для большинства приложений
• Следуй Material Design спецификации
• Включи useMaterial3: true для современного дизайна
• Используй ColorScheme.fromSeed для адаптивных цветов
• Применяй темирование через ThemeData

Material - стандартный и рекомендуемый выбор для Flutter приложений.