Bloc: Implement local state management using flutter_bloc

[abdulmuaz97]

Hey there, I'm trying to implement a local state using bloc, but the problem is that when I add an event StartLoading() the bloc returns a Loading() state to every Widget [HomePage, SecondPage]
what I want is to get a state to only the HomePage Widget and not the SecondPage

here's my code.. I'll be glad if soon I get response from you @felangel

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LoadingBloc(),
      child: MaterialApp(
        title: 'Flutter Demo',
        home: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        leading: IconButton(
          icon: Icon(Icons.person),
          onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage())),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add_circle_outline),
            onPressed: () => BlocProvider.of<LoadingBloc>(context).add(StartLoading()),
          ),
          IconButton(
            icon: Icon(Icons.remove_circle_outline),
            onPressed: () => BlocProvider.of<LoadingBloc>(context).add(StopLoading()),
          ),
        ],
      ),
      body: Center(
        child: BlocBuilder<LoadingBloc, LoadingState>(
          builder: (context, state) {
            if (state is Loading) return CupertinoActivityIndicator();
            return Text('Initial');
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second')),
      body: Center(
        child: BlocBuilder<LoadingBloc, LoadingState>(
          builder: (context, state) {
            if (state is Loading) return CupertinoActivityIndicator();
            return Text('Initial');
          },
        ),
      ),
    );
  }
}

Thanks in advance.

[felangel]

Hi @abdulmuaz97 👋
Thanks for opening an issue!

Since both pages are interacting with the same bloc this is expected behavior. I would recommend having two different blocs to manage the state of your HomePage and SecondPage. If you want to use the exact same type of bloc you can just provide different instances of the same bloc to each page like:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: BlocProvider(
        create: (context) => LoadingBloc(),
        child: HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        leading: IconButton(
          icon: Icon(Icons.person),
          onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (context) => BlocProvider(create: (_) => LoadingBloc(), child: SecondPage()))),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.add_circle_outline),
            onPressed: () => BlocProvider.of<LoadingBloc>(context).add(StartLoading()),
          ),
          IconButton(
            icon: Icon(Icons.remove_circle_outline),
            onPressed: () => BlocProvider.of<LoadingBloc>(context).add(StopLoading()),
          ),
        ],
      ),
      body: Center(
        child: BlocBuilder<LoadingBloc, LoadingState>(
          builder: (context, state) {
            if (state is Loading) return CupertinoActivityIndicator();
            return Text('Initial');
          },
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second')),
      body: Center(
        child: BlocBuilder<LoadingBloc, LoadingState>(
          builder: (context, state) {
            if (state is Loading) return CupertinoActivityIndicator();
            return Text('Initial');
          },
        ),
      ),
    );
  }
}

Hope that helps 👍

[abdulmuaz97]

This means I have to make an instance for each page (the two pages) of the same bloc.. But then I'll have to use a StatefulWidget to dispose the bloc instance and here where I get confuse about it... Should I use StatefulWidget at this point just to close or dispose the bloc instance?

[abdulmuaz97]

And yeah I need to make two different instances of the same bloc in each page but how would I do that?

[felangel]

@abdulmuaz97 the code I included shows how to create two different instances for each each page.

[abdulmuaz97]

@felangel thank you so much as always helping a lot ❤️ serious fan of BLoC pattern.
I also forked the repo.

Thanks again dear.