Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@felangel
Last active September 13, 2021 21:33
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save felangel/1e5b2c25b263ad1aa7bbed75d8c76c44 to your computer and use it in GitHub Desktop.
Save felangel/1e5b2c25b263ad1aa7bbed75d8c76c44 to your computer and use it in GitHub Desktop.
[flutter_bloc_recipes] Show SnackBar
import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:meta/meta.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (context) => DataBloc(),
child: MaterialApp(
home: Home(),
),
);
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: BlocListener<DataBloc, DataState>(
listener: (context, state) {
if (state is Success) {
Scaffold.of(context).showSnackBar(
SnackBar(
backgroundColor: Colors.green,
content: Text('Success'),
),
);
}
},
child: BlocBuilder<DataBloc, DataState>(
builder: (context, state) {
if (state is Initial) {
return Center(child: Text('Press the Button'));
}
if (state is Success) {
return Center(child: Text('Success'));
}
return Center(child: CircularProgressIndicator());
},
),
),
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
child: Icon(Icons.play_arrow),
onPressed: () {
context.read<DataBloc>().add(FetchData());
},
),
],
),
);
}
}
@immutable
abstract class DataEvent {}
class FetchData extends DataEvent {}
@immutable
abstract class DataState {}
class Initial extends DataState {}
class Loading extends DataState {}
class Success extends DataState {}
class DataBloc extends Bloc<DataEvent, DataState> {
DataBloc() : super(Initial()) {
on<FetchData>((event, emit) async {
emit(Loading());
await Future.delayed(Duration(seconds: 2));
emit(Success());
});
}
}
@IhwanID
Copy link

IhwanID commented Sep 13, 2020

nice

@bsanderson1981
Copy link

as a newbie getting...lib/main.dart:78:7: Error: The superclass, 'Bloc', has no unnamed constructor that takes no arguments.
class DataBloc extends Bloc<DataEvent, DataState> {..

sample code is not working out of the box...

@felangel
Copy link
Author

@bsanderson1981 sorry for the inconvenience! Just updated the snippet to support the latest version of bloc, hope that helps! 👍

@bsanderson1981
Copy link

Felix, as always your the best in your quick response.

@bsanderson1981
Copy link

Felix cubit questions. not getting any reply to mt stackoverflow question.

I have one variable that my cubit work with today dec/increment. But this one variable base for calculating two other variables on my app display .

emit(CounterCubitIncreased(
totalbagels: (state.totalbagels + 1), // this is in the cubit state
dozcount: ((state.totalbagels +1) ~/ 13),
singcount: ((state.totalbagels +1) % 13),
));
I cannot find an example of using cubit in muitiple variable states.

is cubit design for only one object to track and change state? or do I need a cubitA cubitB cubitC for each above counters totalbagels dozcount and singcount?

thanks

@felangel
Copy link
Author

@bsanderson1981 each cubit is associated with a single state object but you can control what that state object looks like. In this case you could break it up into three different objects and have three cubits but if it's all managing state for a single feature I would recommend restructuring your state to look like:

class BagelState {
  const BagelState({
    this.totalCountA = 0,
    this.totalCountB = 0,
    this.totalCountC = 0,
  });

  final int totalCountA;
  final int totalCountB;
  final int totalCountC;

  BagelState copyWith({
    int totalCountA,
    int totalCountB,
    int totalCountC,
  }) {
    return BagelState(
      totalCountA: totalCountA ?? this.totalCountA,
      totalCountB: totalCountB ?? this.totalCountB,
      totalCountC: totalCountC ?? this.totalCountC,
  }
}

Hope that helps 👍

@bsanderson1981
Copy link

thank you for help.. i will try to implement this... l will have to play with it. still learning class / oop. maybe a future tutorial on cubit managing multiple states would be great ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment