⭐⭐⭐⭐⭐ Используем provider для state management в Flutter приложении.

При использовании Clean Architecture в Flutter-приложении, вы можете внедрить provider для управления состоянием в слое представления (Presentation Layer). Вот пошаговое руководство по интеграции provider в ваше приложение:

1. Структурируйте приложение по слоям

Слой данных (Data Layer): отвечает за получение данных из внешних источников (API, базы данных и т.д.).
Доменный слой (Domain Layer): содержит бизнес-логику, сущности и use cases.
Слой представления (Presentation Layer): включает UI-компоненты и управление состоянием.

2. Настройте зависимость `provider`

Добавьте в файл pubspec.yaml зависимость:

dependencies:
  provider: ^6.0.0

3. Создайте классы для управления состоянием

В слое представления создайте классы, наследующиеся от ChangeNotifier, которые будут управлять состоянием и взаимодействовать с доменным слоем.

class ExampleViewModel extends ChangeNotifier {
  final GetDataUseCase _getDataUseCase;

  ExampleViewModel(this._getDataUseCase);

  String _data;
  bool _isLoading = false;

  String get data => _data;
  bool get isLoading => _isLoading;

  Future<void> fetchData() async {
    _isLoading = true;
    notifyListeners();

    _data = await _getDataUseCase.execute();

    _isLoading = false;
    notifyListeners();
  }
}

4. Настройте Dependency Injection

Используйте пакет get_it для внедрения зависимостей.

final getIt = GetIt.instance;

void setup() {
  // Регистрация use cases
  getIt.registerLazySingleton<GetDataUseCase>(() => GetDataUseCaseImpl());

  // Регистрация ViewModel
  getIt.registerFactory<ExampleViewModel>(() => ExampleViewModel(getIt<GetDataUseCase>()));
}

5. Предоставьте провайдеры в главном виджете

В main.dart используйте MultiProvider для предоставления ваших ViewModel всему дереву виджетов.

void main() {
  setup();
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => getIt<ExampleViewModel>(),
        ),
      ],
      child: MyApp(),
    ),
  );
}

6. Используйте ViewModel в виджетах

В ваших UI-компонентах получайте данные из ViewModel.

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<ExampleViewModel>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Пример')),
      body: viewModel.isLoading
          ? Center(child: CircularProgressIndicator())
          : Center(child: Text(viewModel.data ?? 'Нет данных')),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.fetchData,
        child: Icon(Icons.download),
      ),
    );
  }
}

7. Соблюдайте принципы Clean Architecture

Слой представления взаимодействует с доменным слоем через use cases.
Доменный слой независим и не зависит от других слоев.
Слой данных реализует интерфейсы из доменного слоя и предоставляет данные.

8. Разделите ответственность

Держите бизнес-логику в доменном слое.
Используйте ViewModel для управления состоянием и взаимодействия с use cases.
UI-компоненты должны быть ответственны только за отображение.

9. Тестирование

Благодаря четкому разделению на слои и использованию DI, вы можете легко писать модульные тесты для каждого слоя.

Таким образом, внедрение provider в ваше приложение с использованием Clean Architecture позволит вам создать масштабируемое и поддерживаемое приложение с четким разделением ответственности.

Посмотреть подходящие вакансии для Flutter-разработчика можно тут!

Поделиться этим постом

Используем provider для state management в Flutter приложении.