Где применяется MaterialApp?

Где применяется MaterialApp

MaterialApp — это корневой виджет Flutter-приложения, который предоставляет Material Design инфраструктуру, навигацию и глобальные настройки для всего приложения.

Что такое MaterialApp

MaterialApp — это обёртка вокруг вашего приложения, которая настраивает:

• Material Design визуальный язык
• Тему приложения (цвета, шрифты, стили)
• Навигацию и маршруты
• Локализацию
• Поддержку Accessibility

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

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

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

Мобилизоримо:

1. runApp() запускает приложение и рендерит корневой виджет
2. MyApp — это обычно MaterialApp
3. MaterialApp настраивает Material Design окружение
4. home — отображает домашний экран

Основные свойства MaterialApp

1. Title — название приложения

MaterialApp(
  title: 'Banking App',
  // Видно в системной информации, на экране многозадачности
)

2. Theme — глобальная тема приложения

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    useMaterial3: true,
    fontFamily: 'Roboto',
    appBarTheme: AppBarTheme(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      ),
    ),
  ),
)

3. Dark theme — тёмная тема

MaterialApp(
  theme: ThemeData(brightness: Brightness.light),
  darkTheme: ThemeData(brightness: Brightness.dark),
  themeMode: ThemeMode.system, // Следует системным настройкам
)

4. Home — домашний экран

MaterialApp(
  home: HomePage(),
)

5. Routes — навигационные маршруты (старый подход)

MaterialApp(
  home: HomePage(),
  routes: {
    '/profile': (context) => ProfilePage(),
    '/settings': (context) => SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith('/user/') ?? false) {
      final userId = settings.name?.split('/').last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

// Навигация
Navigator.of(context).pushNamed('/profile');
Navigator.of(context).pushNamed('/user/123');

6. Локализация

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('en'),
    const Locale('ru'),
  ],
)

Структура типичного приложения с MaterialApp

void main() async {
  // Инициализация
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  await getIt.init(); // Service Locator

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Banking App',
      
      // Тема
      theme: _buildTheme(),
      darkTheme: _buildDarkTheme(),
      themeMode: ThemeMode.system,
      
      // Навигация (современный подход с go_router)
      routerConfig: _router,
      
      // Локализация
      supportedLocales: AppLocalizations.supportedLocales,
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      
      // Builder для контекста всего приложения
      builder: (context, home) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
          child: home ?? SizedBox.shrink(),
        );
      },
    );
  }

  ThemeData _buildTheme() {
    return ThemeData(
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
      ),
    );
  }

  ThemeData _buildDarkTheme() {
    return ThemeData(
      useMaterial3: true,
      brightness: Brightness.dark,
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.blue,
        brightness: Brightness.dark,
      ),
    );
  }
}

final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
      routes: [
        GoRoute(
          path: 'profile',
          builder: (context, state) => ProfilePage(),
        ),
        GoRoute(
          path: 'user/:id',
          builder: (context, state) {
            final userId = state.pathParameters['id']!;
            return UserPage(userId: userId);
          },
        ),
      ],
    ),
  ],
);

Альтернатива: CupertinoApp

Для iOS-стиля приложений используется CupertinoApp вместо MaterialApp:

CupertinoApp(
  title: 'My iOS App',
  theme: CupertinoThemeData(
    primaryColor: CupertinoColors.activeBlue,
  ),
  home: CupertinoPageScaffold(
    navigationBar: CupertinoNavigationBar(
      middle: Text('Home'),
    ),
    child: Center(
      child: Text('iOS Style'),
    ),
  ),
)

Где именно используется MaterialApp

1. Корневое дерево приложения

MaterialApp используется в точке входа (main.dart) как корневой виджет. Всё приложение живёт внутри него.

2. Глобальные настройки

Тема, локализация, поддержка тёмного режима — все эти настройки влияют на всё приложение через MaterialApp.

3. Навигация

MaterialApp предоставляет Navigator для управления стеком экранов. Это основа навигации в приложении.

4. Scaffold в каждом экране

Внутри MaterialApp экраны часто используют Scaffold для структурирования с AppBar, body, FloatingActionButton:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Content'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

5. Material Design компоненты

Внутри MaterialApp доступны Material Design компоненты:

• ElevatedButton, TextButton, OutlinedButton
• AppBar, BottomNavigationBar
• Card, Dialog, SnackBar
• TextField, Checkbox, Radio

ElevatedButton(
  onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(content: Text('Button pressed!')),
  ),
  child: Text('Press me'),
)

Зачем отдельный класс MyApp

// ✅ Хорошо
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
    );
  }
}

runApp(MyApp());

// vs

// ❌ Можно, но не эстетично
runApp(
  MaterialApp(
    // ...
  ),
);

Отдельный класс MyApp:

• Позволяет добавлять логику инициализации (провайдеры, зависимости)
• Улучшает структуру кода
• Упрощает тестирование

Типично с провайдерами:

class MyApp extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final theme = ref.watch(themeProvider);
    
    return MaterialApp(
      theme: theme,
      home: HomePage(),
    );
  }
}

Вывод

MaterialApp применяется как корневой контейнер всего Flutter-приложения, предоставляя:

• Material Design окружение
• Глобальные темы и стили
• Навигационную инфраструктуру
• Локализацию
• Поддержку тёмного режима

Он — то, что обёртывает ваше приложение, как граница между Flutter framework'ом и вашим кодом. Всё остальное (экраны, компоненты, логика) живёт внутри MaterialApp.