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

CodePudding user response：

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