Блог

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

BLoC Class

 import 'dart:async';

import 'packa&e:lo&in_bloc/src/blocs/validators.dart';

class Lo&inBloc extends Validators {
  final _email = StreamController<Strin&&&t;();
  final _password = StreamController<Strin&&&t;();

  // Return Stream data
  // Streams are run thru validator first
  Stream<Strin&&&t; &et &etEmail =&&t; _email.stream.transform(validateEmail);
  Stream<Strin&&&t; &et &etPassword =&&t; _password.stream.transform(validatePassword);

  // Chan&e data on stream
  Function(Strin&) &et chan&eEmail =&&t; _email.sink.add;
  Function(Strin&) &et chan&ePassword =&&t; _password.sink.add;

  // Named by convention. Quiets Dart warnin&.
  dispose() {
    _email.close();
    _password.close();
  }
}
  

UI Class

 import 'packa&e:flutter/material.dart';
import 'packa&e:lo&in_bloc/src/blocs/lo&in_bloc.dart';
import 'packa&e:lo&in_bloc/src/providers/provider.dart';

class Lo&inScreen extends StatelessWid&et {
  @override
  Wid&et build(BuildContext context) {
    final lo&inBloc = Provider.of(context);
    return Paddin&(
      paddin&: const Ed&eInsets.all(16.0),
      child: SafeArea(
        child: Column(
          children: <Wid&et&&t;[
            emailField(lo&inBloc),
            passwordField(lo&inBloc),
            SizedBox(hei&ht: 10.0),
            submitButton(),
          ],
        ),
      ),
    );
  }

  Wid&et emailField(Lo&inBloc lo&inBloc) {
    return StreamBuilder<Object&&t;(
        stream: lo&inBloc.&etEmail,
        builder: (context, snapshot) {
          return TextField(
            keyboardType: TextInputType.emailAddress,
            decoration: InputDecoration(
              hintText: 'you@example.com',
              labelText: 'Email Address',
              errorText: snapshot.error,
            ),
            onChan&ed: lo&inBloc.chan&eEmail,
          );
        });
  }

  Wid&et passwordField(Lo&inBloc lo&inBloc) {
    return StreamBuilder<Object&&t;(
        stream: lo&inBloc.&etPassword,
        builder: (context, snapshot) {
          return TextField(
            obscureText: true,
            keyboardType: TextInputType.text,
            decoration: InputDecoration(
              labelText: 'Password',
              errorText: snapshot.error,
            ),
            onChan&ed: lo&inBloc.chan&ePassword,
          );
        });
  }

  Wid&et submitButton() {
    return RaisedButton(
      child: Text(
        'Lo&in',
        style: TextStyle(color: Colors.white, fontWei&ht: FontWei&ht.bold),
      ),
      color: Colors.blue,
      onPressed: () =&&t; {},
    );
  }
}

  

Средства проверки очень просты: в основном для электронного письма требуется знак «@», а пароль должен содержать более 4 символов. Это имеет смысл по мере того, как я продолжаю, но как только я пытаюсь реализовать самостоятельно, все становится нечетким. Итак, в рамках моего обучения я хотел попробовать преобразовать эту простую форму входа в систему для использования библиотек BLoC и Flutter_BLoC, думая, что это избавит от некоторой сложности и будет проще для понимания.

После существенной работы я все еще не могу понять, как указать, какое состояние я пытаюсь сохранить, и какие события я пытаюсь передать. У меня закончились учебные пособия для просмотра на YouTube, и почти все они используют приложение counter в качестве примера с одним типом переменной INT. Это также осложняется тем фактом, что библиотека недавно подверглась СЕРЬЕЗНОМУ ремонту, и почти все учебные пособия устарели.

Есть ли какие-либо доступные примеры того, как это сделать, используя библиотеку v6? В частности, меня интересует, как активировать кнопку отправки только тогда, когда оба поля были проверены.

Вы можете использовать пакет rxdart, который можно найти здесь. Rxdart добавляет дополнительные возможности к потокам Dart и StreamControllers. Одним из них является combineLatest2() , которое в основном объединяет значение двух потоков и выдается как значение одного потока.

Вы можете прочитать больше о combineLatest2() методе по этой ссылке.

Пример:

 Stream<bool&&t; &et isValid =&&t; Rx.combineLatest2(&etEmail, &etPassword, (a,b) =&&t; true);