Изучение архитектуры проектирования во Flutter: подробное руководство - Fcodenotes

При разработке приложений Flutter выбор правильной архитектуры имеет решающее значение для создания масштабируемого, поддерживаемого и многократно используемого кода. Flutter предлагает различные архитектуры дизайна, соответствующие различным требованиям проекта и стилям разработки. В этой статье мы рассмотрим некоторые популярные архитектуры проектирования во Flutter и предоставим примеры кода, которые помогут вам понять их реализацию.

Модель-Представление-Контроллер (MVC):
Архитектура MVC разделяет приложение на три компонента: модель, представление и контроллер. Модель представляет данные и бизнес-логику, представление управляет пользовательским интерфейсом, а контроллер выступает в качестве посредника между моделью и представлением. Вот упрощенный пример:

// Model
class User {
  String name;
  int age;
}
// View
class UserProfilePage extends StatelessWidget {
  final User user;
  UserProfilePage(this.user);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Column(
        children: [
          Text('Name: ${user.name}'),
          Text('Age: ${user.age}'),
        ],
      ),
    );
  }
}
// Controller
class UserProfileController {
  User fetchUser() {
    // Fetch user data from an API or database
    return User(name: 'John Doe', age: 25);
  }
}

Модель-Представление-ViewModel (MVVM):
MVVM — это архитектура проектирования, которая отделяет пользовательский интерфейс (представление) от бизнес-логики (модели) путем введения модели представления. Модель представления взаимодействует с моделью и предоставляет данные и команды, к которым может быть привязано представление. Вот пример:

// Model
class User {
  String name;
  int age;
}
// View
class UserProfilePage extends StatelessWidget {
  final UserProfileViewModel viewModel;
  UserProfilePage(this.viewModel);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Column(
        children: [
          Text('Name: ${viewModel.user.name}'),
          Text('Age: ${viewModel.user.age}'),
        ],
      ),
    );
  }
}
// View Model
class UserProfileViewModel {
  User user;
  void fetchUser() {
    // Fetch user data from an API or database
    user = User(name: 'John Doe', age: 25);
  }
}

BLoC (компонент бизнес-логики):
BLoC — это шаблон архитектуры, который отделяет пользовательский интерфейс от бизнес-логики с помощью потоков и приемников для управления состоянием. Он состоит из трех основных компонентов: BLoC, пользовательского интерфейса и событий. Вот пример:

// BLoC
class UserProfileBloc {
  final _userController = StreamController<User>();
  Stream<User> get userStream => _userController.stream;
  void fetchUser() {
    // Fetch user data from an API or database
    _userController.add(User(name: 'John Doe', age: 25));
  }
  void dispose() {
    _userController.close();
  }
}
// UI
class UserProfilePage extends StatelessWidget {
  final UserProfileBloc userProfileBloc = UserProfileBloc();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: StreamBuilder<User>(
        stream: userProfileBloc.userStream,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final user = snapshot.data;
            return Column(
              children: [
                Text('Name: ${user.name}'),
                Text('Age: ${user.age}'),
              ],
            );
          } else {
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
  @override
  void dispose() {
    userProfileBloc.dispose();
    super.dispose();
  }
}

Redux:
Redux — это предсказуемая архитектура управления состоянием, которая централизует состояние приложения и отделяет его от пользовательского интерфейса. Он использует действия и редукторы для обновления состояния. Вот упрощенный пример:

// State
class AppState {
  User user;
  AppState({this.user});
}
// Actions
class FetchUserAction {}
// Reducer
AppState appReducer(AppState state, dynamic action) {
  if (action is FetchUserAction) {
    // Fetch user data from an API or database
    final user = User(name: 'John Doe', age: 25);
    return AppState(user: user);
  }
  return state;
}
// UI
class UserProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final store = Store<AppState>(
      appReducer,
      initialState: AppState(),
    );
   return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Column(
        children: [
          Text('Name: ${store.state.user.name}'),
          Text('Age: ${store.state.user.age}'),
        ],
      ),
    );
  }
}

Поставщик:
Поставщик — это популярное решение для управления состоянием во Flutter, которое позволяет эффективно обмениваться данными между виджетами. Он следует шаблону InheritedWidget и предоставляет простой способ управления состоянием и доступа к нему. Вот пример:

// State
class UserState extends ChangeNotifier {
  User _user;
  User get user => _user;
  void fetchUser() {
    // Fetch user data from an API or database
    _user = User(name: 'John Doe', age: 25);
    notifyListeners();
  }
}
// UI
class UserProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userState = Provider.of<UserState>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('User Profile'),
      ),
      body: Column(
        children: [
          Text('Name: ${userState.user.name}'),
          Text('Age: ${userState.user.age}'),
        ],
      ),
    );
  }
}

В этой статье мы рассмотрели несколько архитектур проектирования во Flutter, включая MVC, MVVM, BLoC, Redux и Provider. Каждая архитектура предлагает разные подходы к разделению задач и управлению состоянием в приложениях Flutter. Понимая эти архитектуры и их реализацию, вы сможете принимать обоснованные решения при проектировании и разработке приложений Flutter.