Bloc State 已产生，但 UI 未更新

Question

I'm having an issue using bloc. The bloc state is updating but it seems to be no effect on UI. I have reproduced the issue using an example app. The issue is removing an item from the list page does not change is color back to deselected state. Actually what happens is When you select an item on home page the cart button appears and on no items selected state it disappears. So when you selected an item on homepage the cart button appears. When you click on the button you're navigated to another page ie ListPage where you can see the list of all selected items and a remove button corresponding to every item. When you remove an item it gets removed from ListPage but still it's color is Red ie selected on HomePage. I have to click again to change the color although it was deselected ie (item.active = false) on removing it from the ListPage. Just the color stays the same, it's not getting updated. The code files are given below:

item_bloc.dart

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/item_model.dart';
import 'package:demo/repository.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';

part 'items_event.dart';
part 'items_state.dart';

class ItemsBloc extends Bloc<ItemsEvent, ItemsState> {
  final ItemRepository itemRepository;
  final CartBloc cartBloc;

  ItemsBloc({
    @required this.itemRepository,
    @required this.cartBloc,
  }) : super(ItemsLoading());

  @override
  Stream<ItemsState> mapEventToState(
    ItemsEvent event,
  ) async* {
    if (event is GetItems) {
      yield* _mapGetItemsToState(event);
    } else if (event is UpdateItem) {
      yield* _mapUpdateItemToState(event);
    }
  }

  Stream<ItemsState> _mapGetItemsToState(GetItems event) async* {
    yield ItemsLoading();
    try {
      final _items = await itemRepository.loadItems();
      yield ItemsLoaded(items: _items);
      print('Yielded');
    } catch (_) {
      yield ItemsFailure();
    }
  }

  Stream<ItemsState> _mapUpdateItemToState(UpdateItem event) async* {
    try {
      _updateRepositoryItems(event.item);
      if (event.item.active) {
        cartBloc.add(ShowItems());
      } else {
        cartBloc.add(RemoveItem(itemId: event.item.id));
      }
      yield* _mapGetItemsToState(GetItems());
    } catch (_) {
      yield ItemsFailure();
    }
  }

  Item _updateRepositoryItems(Item item) => itemRepository.setItem = item;
}

cart_bloc.dart

import 'dart:async';

import 'package:bloc/bloc.dart';
import 'package:demo/item_data_model.dart';
import 'package:demo/repository.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/foundation.dart';

part 'cart_event.dart';
part 'cart_state.dart';

class CartBloc extends Bloc<CartEvent, CartState> {
  final ItemRepository itemRepository;

  CartBloc({@required this.itemRepository}) : super(CartLoading());

  @override
  Stream<CartState> mapEventToState(
    CartEvent event,
  ) async* {
    if (event is ShowItems) {
      yield* _mapShowItemsToState(event);
    } else if (event is RemoveItem) {
      yield* _mapRemoveItemToState(event);
    }
  }

  Stream<CartState> _mapShowItemsToState(ShowItems event) async* {
    try {
      final _selectedItems = await itemRepository.getSelectedItems;

      if (_selectedItems.isNotEmpty) {
        final data = ItemData(items: _selectedItems);

        yield CartLoaded(itemData: data);
      } else {
        yield CartLoading();
      }
    } catch (_) {
      yield CartFailure();
    }
  }

  Stream<CartState> _mapRemoveItemToState(RemoveItem event) async* {
    try {
      final _selectedSounds = await itemRepository.getSelectedItems;

      if (_selectedSounds.isEmpty) {
        yield CartLoading();
      } else {
        yield* _mapShowItemsToState(ShowItems());
      }
    } catch (_) {
      yield CartFailure();
    }
  }
}

homepage.dart

import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/item_tile.dart';
import 'package:demo/list_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Home Page"),
          centerTitle: true,
        ),
        body: Column(
          children: [
            Expanded(
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: BlocBuilder<ItemsBloc, ItemsState>(
                  // ignore: missing_return
                  builder: (context, state) {
                    if (state is ItemsLoading) {
                      return Center(
                        child: CircularProgressIndicator(),
                      );
                    } else if (state is ItemsLoaded) {
                      print('Items Loaded');
                      return GridView.count(
                        crossAxisCount: 3,
                        crossAxisSpacing: 20.0,
                        mainAxisSpacing: 20.0,
                        childAspectRatio: 0.6,
                        children: [
                          for (var item in state.items) ItemTile(item: item),
                        ],
                      );
                    } else if (state is ItemsFailure) {
                      return Center(
                        child: Text(
                          'Unexpected Failure, Cannot Load Items',
                          style: Theme.of(context).textTheme.headline6,
                        ),
                      );
                    }
                  },
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: CartButton(),
            ),
          ],
        ),
      ),
    );
  }
}

class CartButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CartBloc, CartState>(
      // ignore: missing_return
      builder: (context, state) {
        if (state is CartLoading) {
          return SizedBox.shrink();
        } else if (state is CartLoaded) {
          print('Cart Loaded');
          return TextButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) {
                  return ListPage(
                    items: state.itemData.items,
                  );
                }),
              );
            },
            child: Text('Go To Cart'),
          );
        } else if (state is CartFailure) {
          return Center(
            child: Text(
              'Unexpected Failure, Cannot Load Cart',
              style: Theme.of(context).textTheme.headline6,
            ),
          );
        }
      },
    );
  }
}

item_tile.dart

import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/get_it.dart';
import 'package:demo/item_model.dart';
import 'package:flutter/material.dart';

class ItemTile extends StatefulWidget {
  final Item item;

  const ItemTile({Key key, this.item}) : super(key: key);
  @override
  _ItemTileState createState() => _ItemTileState();
}

class _ItemTileState extends State<ItemTile> {
  bool active;

  @override
  void initState() {
    super.initState();
    active = widget.item.active;
  }

  void _onItemTap() {
    setState(() {
      active = !active;
    });

    getIt<ItemsBloc>()
        .add(UpdateItem(item: widget.item.copyWith(active: active)));
  }

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(widget.item.title),
      tileColor: active ? Colors.redAccent : Colors.blueAccent,
      onTap: () {
        _onItemTap();
      },
    );
  }
}

item_page.dart

import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/get_it.dart';
import 'package:flutter/material.dart';

import 'item_model.dart';

class ListPage extends StatefulWidget {
  final List<Item> items;

  const ListPage({Key key, this.items}) : super(key: key);
  @override
  _PlayerScreenState createState() => _PlayerScreenState();
}

class _PlayerScreenState extends State<ListPage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(
            'Cart List Page',
            style: Theme.of(context).textTheme.headline6,
          ),
          centerTitle: true,
        ),
        body: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: ListView.separated(
                  itemCount: widget.items.length,
                  separatorBuilder: (BuildContext context, int index) =>
                      Divider(),
                  itemBuilder: (BuildContext context, int index) {
                    return ListTile(
                      trailing: IconButton(
                        icon: Icon(
                          Icons.close_rounded,
                          color: Colors.black,
                        ),
                        onPressed: () {
                          getIt<ItemsBloc>().add(UpdateItem(
                            item: widget.items.elementAt(index).copyWith(
                                active: !widget.items.elementAt(index).active),
                          ));

                          setState(() {
                            widget.items.removeAt(index);
                          });
                          if (widget.items.isEmpty) {
                            Navigator.pop(context);
                          }
                        },
                      ),
                      title: Text(
                        widget.items.elementAt(index).title,
                      ),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

get_it.dart

import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/repository.dart';
import 'package:get_it/get_it.dart';

final getIt = GetIt.instance;

Future<void> init() async {
  // Bloc

  getIt.registerLazySingleton<CartBloc>(() => CartBloc(itemRepository: getIt()));

  getIt.registerFactory(() => ItemsBloc(
        itemRepository: getIt(),
        cartBloc: getIt(),
      ));

  // Repository
  getIt.registerSingleton<ItemRepository>(ItemRepository());
}

main.dart

import 'package:demo/bloc/cart/cart_bloc.dart';
import 'package:demo/bloc/items/items_bloc.dart';
import 'package:demo/get_it.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import 'get_it.dart' as di;
import 'package:flutter/material.dart';

import 'home_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  di.init();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) => getIt<ItemsBloc>()..add(GetItems()),
        ),
        BlocProvider(
          create: (context) => getIt<CartBloc>(),
        ),
      ],
      child: MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: HomePage(),
      ),
    );
  }
}

Down Here are the images of the issue:

Answer 1

Ok, so based on the comments, that indicates that you're already in an ItemsLoaded state when removing the item. Since it's not a new state, then a rebuild is not triggered. So it's behaving as expected. Looks like you need to rethink how you do this, perhaps by yielding an ItemsUpdated state before then yielding the ItemsLoaded state.