[又重學flutter]使用Bloc套件做登入狀態管理

 

//main.dart
import 'package:flutter/material.dart';
import 'package:bloc_pattern/bloc_pattern.dart';
import 'login_bloc.dart';
import 'home_page.dart';
import 'login_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      dependencies: [],
      blocs: [Bloc((inject) => LoginBloc())],
      child: MaterialApp(
        home: LoginManagement(),
      ),
    );
  }
}

class LoginManagement extends StatelessWidget {
  const LoginManagement({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    LoginBloc loginBloc = BlocProvider.getBloc<LoginBloc>();
    return StreamBuilder(
        stream: loginBloc.currentPageStream,
        builder: (context, snap) {
          return IndexedStack(
            index: loginBloc.currentPage,
            children: [MyLoginPage(), MyHomePage()],
          );
        });
  }
}

//login_bloc.dart
import 'dart:async';
import 'package:bloc_pattern/bloc_pattern.dart';

class LoginBloc extends BlocBase {
  int _currentPage = 0;
  StreamController<int> _currentStreamController = StreamController<int>();
  //因為是內部的變數，所以需要get and set
  int get currentPage => _currentPage;
  Stream<int> get currentPageStream => _currentStreamController.stream;
  set currentPage(int value) {
    _currentPage = value;
    _currentStreamController.sink.add(value);
  }

  @override
  void dispose() {
    _currentStreamController.close();
    super.dispose();
  }
}

//login_page.dart
import 'package:flutter/material.dart';
import 'package:bloc_pattern/bloc_pattern.dart';
import 'login_bloc.dart';

class MyLoginPage extends StatefulWidget {
  const MyLoginPage({Key? key}) : super(key: key);

  @override
  _MyLoginPageState createState() => _MyLoginPageState();
}

class _MyLoginPageState extends State<MyLoginPage> {
  LoginBloc? _loginBloc;
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loginBloc = BlocProvider.getBloc<LoginBloc>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('登入頁')),
        body: Center(
          child: TextButton(
            onPressed: () {
              _loginBloc!.currentPage = 1;
            },
            child: Text('登入'),
          ),
        ));
  }
}

import 'package:bloc_pattern/bloc_pattern.dart';
import 'package:flutter/material.dart';
import 'login_bloc.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  LoginBloc? _loginBloc;
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loginBloc = BlocProvider.getBloc<LoginBloc>();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主頁'),
      ),
      body: Center(
        child: TextButton(
          child: Text('登出'),
          onPressed: () {
            _loginBloc!.currentPage = 0;
          },
        ),
      ),
    );
  }
}

呈現效果https://github.com/fenturechance/flutterPractice2021/tree/e2324669bf68e0427bab6b6e885cab77116125e7