flutter bloc 实例

为了便于理解flutter bloc 我们先看看他是怎么用的

我们先定义相关的bloc

test_bloc.dart

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:test_flutter/blocs/test_event.dart';
import 'package:test_flutter/blocs/test_state.dart';

class TestBloc extends Bloc<TestEvent, TestState> {
  TestBloc() : super(TestState()) {
    //获取用户的孩子
    on<LoadTestEvent>(
      (event, emit) async {

        emit(TestSuccessState('Hello'+event.type.toString()));
        return;
      },
    );
  }
}

test_event.dart

import 'package:equatable/equatable.dart';

class TestEvent extends Equatable {
  @override
  List<Object?> get props => [];
}

class LoadTestEvent extends TestEvent {
  int type;
  LoadTestEvent(this.type);
}

class  TestChangeEvent extends TestEvent {
  TestChangeEvent() {
    print('TestChangeEvent');
  }
}

test_state.dart

import 'package:equatable/equatable.dart';

class TestEvent extends Equatable {
  @override
  List<Object?> get props => [];
}

class LoadTestEvent extends TestEvent {
  int type;
  LoadTestEvent(this.type);
}

class  TestChangeEvent extends TestEvent {
  TestChangeEvent() {
    print('TestChangeEvent');
  }
}

我们定义了相关的Bloc State Event

下么我们看看怎么使用：

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:test_flutter/blocs/test_bloc.dart';
import 'package:test_flutter/blocs/test_event.dart';
import 'package:test_flutter/blocs/test_state.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
        create: (context) =>TestBloc(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home:MyHomePage(title: 'dddd',),
        ));

  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title}) : super();

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}
BuildContext? context2;
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    _counter++;
    BlocProvider.of<TestBloc>(context).add(LoadTestEvent(_counter));

  }

  @override
  void initState() {

     }

  @override
  Widget build(BuildContext context) {
    context2=context;
      return  Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:PageBody() ,
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );;

  }
}

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

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

class _PageBodyState extends State<PageBody> {
  @override
  Widget build(BuildContext context) {

    return Stack(
      children: [
        Test1(),
        Test2()
       ,
      ],
    );
  }
}

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

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

class _Test1State extends State<Test1> {
  @override
  Widget build(BuildContext context) {
    // StreamBuilder
    return   BlocBuilder<TestBloc, TestState>(builder: (context, state) {
      print("_Test1State -----");
      print((state as TestSuccessState).data);

        return Container(height: 30,color: Colors.black, child: Text('Test1',style: Theme.of(context).textTheme.bodyLarge!.copyWith(color: Colors.white),),);
        // }
      }

    );

  }
}

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

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

class _Test1State2 extends State<Test2> {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<TestBloc, TestState>(listener: (context, state) {
      print('_Test1State2  1111');
      print(state);
      print((state as TestSuccessState).data);
      switch (state.runtimeType) {
      }
    }, builder: (context, state) {
      print('_Test1State2  222');
      print((state as TestSuccessState).data);

      return Container(
        height: 200,
        color: Colors.red,
        child: Text('Test2'),
      );
    });
  }
}