Sobes.tech
Назад к вопросам
Junior — Middle
141

Объясните структуру архитектурных слоёв в Flutter и их роль в построении приложения

Компании, где спрашивали
HamkorBank

Ответ от нейросети

sobes.tech AI

Что хотят услышать интервьюеры:

В Flutter обычно ожидают понимание слоистой архитектуры: что UI не работает напрямую с данными и платформой, а взаимодействует через промежуточные уровни. Важно уметь объяснить, зачем нужны каждый из слоёв и как они помогают изолировать бизнес-логику от представления. Также хорошо, если есть понимание, как Flutter использует framework, engine и embedder.

Определение:

Архитектура Flutter обычно рассматривается как несколько слоёв, где верхний слой отвечает за интерфейс приложения, средний — за высокоуровневый фреймворк, а нижние — за отрисовку, компоновку, выполнение кода и взаимодействие с платформой.

Упрощённо структура такая:

  • Embedder — встраивает Flutter в конкретную ОС и обеспечивает запуск приложения.
  • Engine — отвечает за рендеринг, текст, доступ к графике, работу с Dart runtime и взаимодействие с платформой.
  • Framework — набор библиотек на Dart, где находятся виджеты, анимации, layout, gesture system и остальные инструменты для построения UI.

В прикладной разработке поверх этого часто выделяют и архитектуру самого приложения: presentation layer, business logic layer, data layer. Это уже не внутренняя архитектура Flutter, а способ организовать код приложения.

Пример использования:

Например, экран списка товаров может быть устроен так: UI-слой показывает список и кнопки, слой бизнес-логики управляет загрузкой и состоянием, а слой данных обращается к API или локальной базе.

// UI layer
class ProductsPage extends StatelessWidget {
  final ProductsController controller;

  const ProductsPage({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    final products = controller.products;

    return ListView.builder(
      itemCount: products.length,
      itemBuilder: (context, index) {
        return ListTile(title: Text(products[index].name));
      },
    );
  }
}

// Business logic layer
class ProductsController {
  List<Product> products = [];

  Future<void> loadProducts() async {
    products = await ProductRepository().fetchProducts();
  }
}

// Data layer
class ProductRepository {
  Future<List<Product>> fetchProducts() async {
    // запрос к API или БД
    return [Product(name: 'Phone'), Product(name: 'Laptop')];
  }
}

class Product {
  final String name;
  Product({required this.name});
}

Пояснение кода:

  • ProductsPage отвечает только за отображение данных на экране.
  • ProductsController хранит состояние и содержит логику загрузки.
  • ProductRepository изолирует работу с источником данных.
  • Такой подход упрощает тестирование: UI, логика и доступ к данным можно проверять отдельно.
  • Если изменить API или способ хранения данных, UI-слой почти не меняется.

Ключевые моменты:

  • Flutter как фреймворк обычно описывают через Framework → Engine → Embedder.
  • Framework — это виджеты, layout, анимации и всё, с чем работает разработчик на Dart.
  • Engine выполняет тяжёлую низкоуровневую работу: рендеринг, текст, графику, взаимодействие с платформой.
  • В реальных приложениях важно дополнительно разделять код на UI, бизнес-логику и данные.
  • Слоистая структура уменьшает связанность, упрощает тестирование и поддержку.
  • Если слои смешаны, приложение быстро становится трудно расширять и сопровождать.