4

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

2
  • What is the current and expected behavior? May 28, 2020 at 19:30
  • @ChristopherMoore list items should change from 1 to 2 i.e. new state should be output and the blocprovider should rebuild
    – Dev Man
    May 28, 2020 at 19:56

1 Answer 1

5

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())
1
  • aaah no wonder, i spend 4 days reading the docs thinking its something to do with the way equatable handles things. Thanks a ton
    – Dev Man
    May 28, 2020 at 20:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.