Flutter Bloc state does not update no matter what

Issue

I am currently trying to learn state management for flutter and i have the below code, but for some reason the state is never updated, am i missing something?

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => ItemBloc(),
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Bloc Demo"),
      ),
      body: Lister(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ItemBloc().add(AddEvent());
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class Lister extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<ItemBloc, ListState>(
      builder: (context, state) {
        if (state is ListAdded) {
          return ListView.builder(
            itemCount: state.items.length,
            itemBuilder: (context, index) {
              return Text("item"); // This never increases in count
            },
          );
        }
        return Center(
          child: Text('err'),
        );
      },
    );
  }
}

// BLOC
class ItemBloc extends Bloc<ListEvent, ListState> {
  @override
  get initialState => ListAdded(items: ["initial"]);

  @override
  Stream<ListState> mapEventToState(ListEvent event) async* {
    if (event is AddEvent) {
      final lister = ["first", "second"];
      yield ListAdded(items: lister);
    }
  }
}

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

class AddEvent extends ListEvent {}

abstract class ListState extends Equatable {
  const ListState();

  @override
  List<Object> get props => [];
}

class ListAdded extends ListState {
  final List<String> items;

  const ListAdded({
    this.items,
  });

  @override
  List<Object> get props => [items];

  @override
  String toString() => 'ItemsLoaded { items: ${items.length} }';
}

Please note: I have tried separating the code into individual files and importing the bloc.dart package instead of flutter_bloc.dart package in the Bloc file

Solution

When you do

ItemBloc().add(AddEvent())

you’re creating new bloc instance and add event to it. It isn’t connected with one created in MyApp and used in Lister.

You should get the created bloc instead:

BlocProvider.of<ItemBloc>(context).add(AddEvent())

Answered By – Pavel

Answer Checked By – Clifford M. (FlutterFixes Volunteer)