ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Flutter BLoC
    lang/dart 2020. 9. 14. 13:36

    main.dart

    import 'package:flutter/material.dart';
    import 'src/app.dart';
    
    void main() => runApp(App());

    src/app.dart

    import 'package:flutter/material.dart';
    import 'screens/login_screen.dart';
    
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Login',
          home: Scaffold(
            appBar: AppBar(
              title: Text('LoginForm'),
            ),
            body: LoginScreen(),
          ),
        );
      }
    }

    BLOC Structor and Screen

    src/screens/login_screen.dart

    import 'package:flutter/material.dart';
    import '../blocs/bloc.dart';
    
    class LoginScreen extends StatefulWidget {
      @override
      _LoginScreenState createState() => _LoginScreenState();
    }
    
    class _LoginScreenState extends State<LoginScreen> {
    
      @override
      Widget build(BuildContext context) {
        return Container(
          margin: EdgeInsets.all(8.0),
          child: Form(child: 
            Column(children: <Widget>[
              fieldEmail(),
              fieldPassword(),
              _submit(),
              ],
            ),
          ),
        );
      }
    
      Widget fieldEmail() {
        return StreamBuilder(
          stream: bloc.email,
          builder: (context, snapshot) {
            return TextField(
              onChanged: bloc.changeEmail,
              keyboardType: TextInputType.emailAddress,
              decoration: InputDecoration(
                labelText: 'Email',
                hintText: 'useanem@domain.com',
                errorText: snapshot.error,
              ),
            );
          }
        );
      }
    
      Widget fieldPassword() {
        return StreamBuilder(
          stream: bloc.password,
          builder: (context, snapshot) {
            return TextField(
              onChanged: bloc.changePassword,
              obscureText: true,
              decoration: InputDecoration(
                labelText: 'Password',
                hintText: 'over 3 charactor',
                errorText: snapshot.error,
              ),
            );
          }
        );
      }
    
      Widget _submit() {
        return RaisedButton(
          color: Colors.blue,
          child: Text('Submit', style: TextStyle(color: Colors.white),),
          onPressed: (){
            print('onPressed Submit');
          },
        );
      }
    }

    BLOC Structor
    BLOC Private/Public

    src/bloc/bloc.dart

    import 'dart:async';
    import 'validators.dart';
    
    class Bloc extends Object with Validators {
      final _email = StreamController<String>();
      final _passwd = StreamController<String>();
    
      Stream<String> get email => _email.stream.transform(validatorEmail);
      Stream<String> get password => _passwd.stream.transform(validatorPassword);
    
      Function(String) get changeEmail => _email.sink.add;
      Function(String) get changePassword => _passwd.sink.add;
    
      dispose() {
        _email.close();
        _passwd.close();
      }
    }
    
    final bloc = Bloc();

    BLOC Communicate

    src/bloc/validators.dart

    import 'dart:async';
    
    class Validators {
      final validatorEmail = StreamTransformer<String, String>.fromHandlers(
        handleData: (String email, sink) {
          if( email.contains('@') ){
            sink.add(email);
          } else {
            sink.addError('Enter a valid email');
          }
        }
      );
    
      final validatorPassword = StreamTransformer<String, String>.fromHandlers(
        handleData: (String passwd, sink) {
          if( passwd.length >= 3 ) {
            sink.add(passwd);
          } else {
            sink.addError('password must be at leat 3 characters');
          }
        }
      );
    }

    BLOC ValidationMixin

    Flutter State

    'lang > dart' 카테고리의 다른 글

    Flutter BLoC, Scoped Instances  (0) 2020.09.16
    Flutter BLoC, Single Global Instance  (0) 2020.09.15
    Flutter BLoC  (0) 2020.09.14
    Dart BLoC Pattern  (0) 2020.09.11
    Dart onClick, timeout, take, where, onDone  (0) 2020.09.11
    Dart Async, Stream, StreamController, StreamTransformer  (0) 2020.09.11

    댓글 0

Designed by Tistory.