Home > OS >  How to pass data to textfield and return new changed data?
How to pass data to textfield and return new changed data?

Time:06-09

I faced the following problem. I have a database from which I get data through bloc - state.mapFilter.maxPrice. I want to transfer this data to the textfield where it will be displayed. In the textfield I have a counter which is also implemented via bloc with increment and decrement. How can I pass a value from state.mapFilter.maxPrice to a textfield so that this value can be changed and then returned back and updated in state.mapFilter.maxPrice ?

main - state.mapFilter.maxPrice is the data from the database that I want to show in the text field

PriceCounter(
    price: state.mapFilter.maxPrice,
 ),

price_counter - this is the widget itself with a text field and buttons to increase/decrease the value

class PriceCounter extends StatelessWidget {
  PriceCounter({Key? key, required this.price}) : super(key: key);
  double price;

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

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 21),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          IconButton(
            onPressed: () => cubit.priceFilterDecrement(),
            icon: SvgPicture.asset(constants.Assets.minus),
            constraints: const BoxConstraints(),
            padding: EdgeInsets.zero,
          ),
          const SizedBox(width: 20),
          BlocBuilder<CounterCubit, CounterState>(
            builder: (context, state) => InputFieldPrice(
                price: state.priceFilterCountValue,
                textStyle: constants.Styles.normalBookTextStyleWhite),
          ),
          const SizedBox(width: 20),
          IconButton(
            onPressed: () => cubit.priceFilterIncrement(),
            icon: SvgPicture.asset(constants.Assets.plus),
            constraints: const BoxConstraints(),
            padding: EdgeInsets.zero,
          ),
        ],
      ),
    );
  }
}

input_field_price - this is the text field

class InputFieldPrice extends StatefulWidget {
  final double price;
  final TextStyle textStyle;
  final Function(double)? onChanged;

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

  @override
  State<InputFieldPrice> createState() => _InputFieldPrice();
}

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 100,
      child: Form(
        key: _formKey,
        child: TextFormField(
          keyboardType: TextInputType.number,
          controller: _priceController..text = widget.price.toStringAsFixed(2),
          style: widget.textStyle,
          textAlign: TextAlign.center,
          decoration: InputDecoration(
            prefix: Text('JC', style: widget.textStyle),
            suffix: const Text(
              'KWh',
              style: constants.Styles.smallerBookTextStyleWhite,
            ),
            contentPadding: EdgeInsets.zero,
            border: InputBorder.none,
          ),
          // onChanged: (value) {
          //   cubit.setPrice(value);
          //   double price = double.parse(value);
          //   widget.onChanged!(price);
          // },
        ),
      ),
    );
  }
}

counter_cubit

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

  void priceFilterIncrement() => emit(
        CounterState(
          countValue: 0,
          priceFilterCountValue: state.priceFilterCountValue   0.01,
        ),
      );

  void priceFilterDecrement() => emit(
        CounterState(
          countValue: 0,
          priceFilterCountValue: state.priceFilterCountValue >= 0.01
              ? state.priceFilterCountValue - 0.01
              : state.priceFilterCountValue - 0,
        ),
      );
}

counter_state

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

CodePudding user response:

You could set data in textfield with TextEditingController.text = <your data> and the reverse to set data to variable; <var / getx> = TextEditingController.text

  • Related