'How to change value in only one textformfield flutter?

I am using in the function Counter in a row. But when I click on increment or decrement, I am changing the data in two fields at the same time. I understand that in CounterCubit I have only one value declared and it passes twice to the same function and therefore it changes. Tell me how to correctly separate the values ​​​​for each field so that the value does not change in two fields at the same time, but only in one corresponding one?

filter dialog

Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Dialog(
        insetPadding: const EdgeInsets.only(top: 100, left: 24, right: 24),
        backgroundColor: Colors.transparent,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(24))),
        child: Container(
          width: MediaQuery.of(context).size.width,
          decoration: const BoxDecoration(
            color: constants.Colors.greyDark,
            borderRadius: BorderRadius.all(Radius.circular(24)),
          ),
          child: Padding(
            padding: const EdgeInsets.fromLTRB(21, 38, 21, 24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                 const PriceCounter(title: 'From'),
              ]

price counter

Widget build(BuildContext context) {
    final CounterCubit cubit = BlocProvider.of<CounterCubit>(context);

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          children: [
            BlocBuilder<CounterCubit, CounterState>(
              builder: (context, state) => InputField(
                  price: state.countValue.toString(),
                  textStyle: constants.Styles.normalBookTextStyleWhite),
            ),
            Row(
              children: [
                IconButton(
                  onPressed: () => cubit.increment(),
                  icon: SvgPicture.asset(constants.Assets.plus),
                  constraints: const BoxConstraints(),
                  padding: EdgeInsets.zero,
                ),
                const SizedBox(width: 24),
                Text(title, style: constants.Styles.smallLtStdTextStyleWhite),
                const SizedBox(width: 24),
                IconButton(
                  onPressed: () => cubit.decrement(),
                  icon: SvgPicture.asset(constants.Assets.minus),
                  constraints: const BoxConstraints(),
                  padding: EdgeInsets.zero,
                ),
              ],
            ),
          ],
        ),
        // const SizedBox(width: 24),
        Column(
          children: [
            BlocBuilder<CounterCubit, CounterState>(
              builder: (context, state) => InputField(
                  price: state.countValue.toString(),
                  textStyle: constants.Styles.normalBookTextStyleWhite),
            ),
            Row(
              children: [
                IconButton(
                  onPressed: () => cubit.increment(),
                  icon: SvgPicture.asset(constants.Assets.plus),
                  constraints: const BoxConstraints(),
                  padding: EdgeInsets.zero,
                ),
                const SizedBox(width: 24),
                Text(title, style: constants.Styles.smallLtStdTextStyleWhite),
                const SizedBox(width: 24),
                IconButton(
                  onPressed: () => cubit.decrement(),
                  icon: SvgPicture.asset(constants.Assets.minus),
                  constraints: const BoxConstraints(),
                  padding: EdgeInsets.zero,
                ),

input field

class InputField extends StatefulWidget {
  final String price;
  final TextStyle textStyle;

  const InputField({Key? key, required this.price, required this.textStyle})
      : super(key: key);

  @override
  State<InputField> createState() => _InputField();
}

class _InputField extends State<InputField> {
  final _formKey = GlobalKey<FormState>();
  final _priceController = TextEditingController();

  @override
  void dispose() {
    _priceController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => SizedBox(
        width: 90,
        child: Form(
          key: _formKey,
          child: TextFormField(
            keyboardType: TextInputType.number,
            controller: _priceController..text = '€${widget.price} KWh',
            style: widget.textStyle,
            textAlign: TextAlign.center,
            decoration: const InputDecoration(
              contentPadding: EdgeInsets.zero,
              border: InputBorder.none,
            ),
          ),
        ),
      );
}

counter state

class CounterState {
  final double countValue;
  const CounterState({required this.countValue});
}

counter cubit

class CounterCubit extends Cubit<CounterState> {
  CounterCubit() : super(const CounterState(countValue: 0.13));

  void increment() => emit(CounterState(countValue: state.countValue + 0.01));

  void decrement() => emit(CounterState(countValue: state.countValue - 0.01));
}

Here is the result

enter image description here



Solution 1:[1]

You are passing the exactly same state to both inputs:

state.countValue

Why you not just create another state to the other input field?

state.firstCountValue
state.secondCountValue

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1