Создайте страницу профиля пользователя с помощью Bloc, RxDart и Flutter

Моя цель - создать страницу редактирования профиля во Flutter, используя шаблон блока.

Я искал лучший / более чистый способ создать страницу профиля пользователя во Flutter с помощью Bloc, но ничего не нашел.

Прямо сейчас я должен перечислить все поля. Вот пример двух полей:

final _firstNameController = BehaviorSubject<String>();
final _lastNameController = BehaviorSubject<String>();

Function(String) get firstNameChanged => _firstNameController.sink.add;
Function(String) get lastNameChanged => _lastNameController.sink.add;

Stream<String> get firstNameStream => _firstNameController.stream;
Stream<String> get lastNameStream => _lastNameController.stream;

String get firstName => _firstNameController.value;
String get lastName => _lastNameController.value;


@override
  void dispose() {
_firstNameController?.close();
_lastNameController?.close();
}

Здесь намного больше полей, и я не хочу иметь весь этот код, если я могу его избежать.

Я бы предпочел иметь только 1 пользовательский блок и обновлять конкретное поле этого пользователя. Я добавил следующее в пользовательский блок.

final _userFetcher = BehaviorSubject<User>();

Observable<User> get userStream => _userFetcher.stream;
User get user => _userFetcher.value;
Function(User) get changeUser => _userFetcher.sink.add;

@override
  void dispose() async {
    await _userFetcher.drain();
    _userFetcher.close();
  }

Вот пример моей пользовательской модели:

class User {

  final Name name;

  User.fromJson(Map<String, dynamic> json)
      : name = Name.fromJson(json);

  Map<String, dynamic> toJson() => {
    "first": name.first,
    "last": name.last,
  };
}

Проблема в том, что я не могу понять, как использовать текстовое поле для редактирования полей «первое имя» и «фамилия» в моей модели «Пользователь».

Возможно ли это, я ошибаюсь, или я должен придерживаться перечисления каждого поля по отдельности?


flutter firebase bloc rxdart
person Kentond    schedule 18.05.2019    source источник
comment
Я использую streambuilder на странице editProfile для прослушивания: Widget buildProfile () {_loadUser (); return StreamBuilder ‹User› (stream: _bloc.userStream, builder: (context, snapshot) {if (snapshot.hasError) return _buildErrorWidget (snapshot.error); if (snapshot.hasData) {return _buildUserWidget (snapshot.data);} else {return _buildLoadingWidget ();}},); }   -  person Kentond    schedule 18.05.2019

Ответы (2)


arrow_upward
1
arrow_downward

Индивидуальное управление всеми этими потоками для каждого отдельного поля может быть обременительным. Я бы порекомендовал вам попробовать эту библиотеку блок флаттера. Это действительно хороший инструмент, который хорошо справляется с управлением государством. Вам просто нужно определить состояния и события, а затем для каждого события вы можете создать состояние.

Так, например, вы хотите проверять поле пароля во время ввода пользователем. Вы определяете событие (например, PasswordChanged). Это вызовет метод в блоке. В котором вы можете написать свою бизнес-логику для проверки валидации.

После логики проверки вы можете создать новое состояние (ошибка, успех). Это приведет к тому, что ваш пользовательский интерфейс будет перестроен, а затем вы сможете обновить свой пользовательский интерфейс в соответствии с вашим состоянием.

Вы должны проверить документацию этой библиотеки. Там также есть несколько очень хороших примеров.

person nick.tdr    schedule 19.05.2019
comment
Спасибо, Ник. Я использую bloc, но не могу понять, как изменить значение вложенного поля. Я смог изменить его, создав новую пользовательскую переменную и отредактировав ее поле. Затем он возвращается к _userFetcher в моем пользовательском блоке. - person Kentond; 19.05.2019

arrow_upward
0
arrow_downward

Всем спасибо за помощь!

В итоге я смог редактировать вложенные поля имени и фамилии в моей пользовательской модели, которую я перечислил выше, реализовав следующее в моем текстовом поле:

onChanged:(text) {
        User thisUser = _bloc.user;
        thisUser.name.last = text;
      }
person Kentond    schedule 19.05.2019