美文网首页Flutter
flutter bloc 登录demo

flutter bloc 登录demo

作者: 林祖朋 | 来源:发表于2020-07-01 16:23 被阅读0次

    业务逻辑和视图分开
    main.dart

    import 'package:flutter/material.dart';
    import 'package:flutterdemo/login_bloc.dart';
    import 'package:flutterdemo/user_model.dart';
    
    void main() => runApp(MyApp());
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Bloc登录Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: MyHomePage(title: 'Bloc研究'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
    
      TextEditingController _nameTextEditingController;
      TextEditingController _pwdTextEditingController;
    
      LoginBloc _loginBloc;
    
    
      @override
      void initState() {
        // TODO: implement initState
        super.initState();
    
        _nameTextEditingController = new TextEditingController();
        _pwdTextEditingController = new TextEditingController();
        _loginBloc=LoginBloc();
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    margin: const EdgeInsets.only(left: 16, right: 16, top: 10),
                    child: TextField(
                      controller: _nameTextEditingController,
                      decoration: InputDecoration(
                        hintText: "请输入用户名",
                      ),
                    ),
                  ),
                  Container(
                    margin: const EdgeInsets.only(left: 16, right: 16, top: 10),
                    child: TextField(
                      controller: _pwdTextEditingController,
                      decoration: InputDecoration(
                        hintText: "请输入密码",
                      ),
                    ),
                  ),
                  GestureDetector(
                    onTap: () {
                      _loginBloc.login(context, _nameTextEditingController.text,
                      _pwdTextEditingController.text);
                    },
                    child: Container(
                      alignment: Alignment.center,
                      margin: const EdgeInsets.only(left: 16, right: 16, top: 20),
                      color: Colors.green,
                      height: 44,
                      width: double.infinity,
                      child: Text(
                        '登录',
                        style: TextStyle(fontSize: 18, color: Colors.white),
                      ),
                    ),
                  )
                ],
              ),
              StreamBuilder(
                  stream: _loginBloc.getStream(),
                  builder: (BuildContext context, AsyncSnapshot<UserModel> snapshot){
                    if(snapshot.data!=null&&snapshot.data.yesLoading!=null&&snapshot.data.yesLoading){
                      return Container(
                        alignment: Alignment.center,
                        color: Colors.red,
                        width: 100,
                        height: 100,
                        child: Text("加载中",style: TextStyle(
                          color: Colors.white
                        ),),
                      );
                    }else{
                      return Container();
                    }
                  }
              )
            ],
          ),
        );
      }
    
      @override
      void dispose() {
        // TODO: implement dispose
        super.dispose();
        _loginBloc.dispose();
    
        _nameTextEditingController.dispose();
        _pwdTextEditingController.dispose();
      }
    }
    
    

    login_bloc.dart

    
    //这里主要处理登录页面的逻辑
    import 'dart:async';
    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:flutterdemo/user_model.dart';
    import 'package:flutterdemo/user_page.dart';
    
    class LoginBloc {
    
      UserModel _userModel;
      StreamController<UserModel> _streamController;
    
      LoginBloc(){
        _userModel=UserModel();
        _streamController= StreamController.broadcast();
      }
    
      Stream<UserModel> getStream(){
        return _streamController.stream;
      }
    
    
      void login(BuildContext context,String name,String pwd){
        if(name==""){
          print("请输入用户名");
          return;
        }
    
        if(pwd==""){
          print("请输入密码");
          return;
        }
    
        _userModel.yesLoading=true;
        _streamController.sink.add(_userModel);
    
        Future.delayed(Duration(seconds: 3),(){
          _userModel.yesLoading=false;
          _userModel.name="张三";
          _userModel.id=1;
          _userModel.info="test info test";
          _streamController.sink.add(_userModel);
          Navigator.of(context).push(MaterialPageRoute(
            builder:(context)=>UserPage()
          ));
        });
      }
    
      void dispose(){
        _streamController.close();
      }
    
    
    }
    

    UserModel

    class UserModel{
    
      String name;
      int id;
      String info;
      bool yesLoading
    
    
    }
    

    user_page.dart

    
    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    
    class UserPage extends StatelessWidget{
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          appBar: AppBar(title: Text('个人信息页'),),
        );
      }
    }
    

    相关文章

      网友评论

        本文标题:flutter bloc 登录demo

        本文链接:https://www.haomeiwen.com/subject/kchhqktx.html