Flutter: use slider with state management - flutter

Question

Does anybody have a code example where a slider is used with BloC state management? I really don't understand how I Update the state of the slider and change the textvalue
Short e.g. of my problem:
Normally I would do something like
Text(number,...)
Slider(vale: number.toDouble()
onChanged: (...){setState(() {_smth=number;}
But this is clearly not possible when I want to use bloc.
So back to my question: How does this work. Maybe a example.
Thank you <3

Answer 1

Actually, You may use cubit for this, But for the Bloc here a way of doing it.
abstract class MySliderState extends Equatable {
const MySliderState();
#override
List<Object> get props => [];
}
class MySliderInitial extends MySliderState {
final double value;
const MySliderInitial({required this.value});
#override
List<Object> get props => [value];
}
class MySliderOnChanged extends MySliderState {
final double value;
const MySliderOnChanged({required this.value});
#override
List<Object> get props => [value];
}
//event
abstract class MySliderEvent extends Equatable {
const MySliderEvent();
#override
List<Object> get props => [];
}
class MySliderOnChangedEvent extends MySliderEvent {
final double value;
const MySliderOnChangedEvent({
required this.value,
});
#override
List<Object> get props => [value];
}
//* bloc
class MySliderBloc extends Bloc<MySliderEvent, MySliderState> {
MySliderBloc() : super(const MySliderInitial(value: 0)) {
on<MySliderOnChangedEvent>(_onValueChanged);
}
_onValueChanged(MySliderOnChangedEvent event, emit) {
emit(MySliderOnChanged(value: event.value));
}
}
void main() {
runApp(
MultiBlocProvider(
providers: [
BlocProvider(
create: (context) => MySliderBloc(),
)
],
child: const MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.\
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const SliderExample(),
);
}
}
class SliderExample extends StatelessWidget {
const SliderExample({Key? key}) : super(key: key);
Widget _buildItem(
BuildContext context,
double value,
) {
return Column(
children: [
Text(" Value: $value"),
Slider(
value: value,
onChanged: (v) {
BlocProvider.of<MySliderBloc>(context)
.add(MySliderOnChangedEvent(value: v));
},
),
],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
BlocConsumer<MySliderBloc, MySliderState>(
listener: (context, state) {},
builder: (context, state) {
if (state is MySliderInitial) {
return Column(
children: [
const Text("Initial Value"),
_buildItem(context, state.value),
],
);
}
if (state is MySliderOnChanged) {
return Column(
children: [
const Text("On Changed Value"),
_buildItem(context, state.value),
],
);
}
return const Text("unimplemented state");
},
),
],
),
);
}
}
Make sure to import equatable. I tried to avoid code- duplication, But for the example purpose I've extended the code. This may help you. Also, I am not an expert on bloc architecture.
You can explore about flutter bloc