How to create Cupertino picker that has both kg and lbs option in Flutter

Question

I'm trying to create a Cupertino Picker that will show weight and other option like kg and lb. Ive tried to work it out. It working for "kg" but how can i display for "lb" and also how to get after selecting 55 kg and display same 121.245 lb vice versa so both values should be equal for example 55 kg = 121.254 lb

this is my code

// weight - 22.0 to 227.0 kg

  // weight declarations
  var _selectedWeight = 150;
  var _selectedWeightDecimals = 0;
  var _selectedUnits = "lbs";
  var units = ['kgs', 'lbs'];
  var lbs = [];
  var kgs = []; 

@override
  void initState() {
    

    for (int j = 22; j <= 227; j++) {
      kgs.add(j);
      lbs.add(j * 2.20462);
    }
  }



//Selection dropdown for Kgs and Lbs

            const SizedBox(height: 15),
            const Text(
              'WEIGHT',
              style: TextConstants.feildHeadText,
            ),
            const SizedBox(
              height: 2,
            ),
            Container(
              height: 51,
              width: double.infinity,
              padding: const EdgeInsets.only(left: 10, right: 10),
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(40)),
                border: Border.all(
                  color: Colors.grey,
                  width: 1,
                ),
              ),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  CupertinoButton(
                    onPressed: () {
                      showModalBottomSheet(
                        context: context,
                        builder: (BuildContext context) {
                          return SizedBox(
                            height: 200,
                            child: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Expanded(
                                  child: CupertinoPicker(
                                    itemExtent: 32,
                                    onSelectedItemChanged: (int index) {
                                      if (_formKey.currentState!.validate()) {
                                        const Text(
                                          "Please select Weight",
                                          style: TextStyle(
                                            color: Colors.red,
                                            fontSize: 16,
                                          ),
                                        );
                                      }
                                      setState(
                                        () {
                                          _selectedWeight = kgs[index];
                                        },
                                      );
                                    },
                                    children: List<Widget>.generate(
                                      kgs.length,
                                      (int index) {
                                        return Center(
                                          child: Text(kgs[index].toString()),
                                        );
                                      },
                                    ),
                                  ),
                                ),
                                Expanded(
                                  child: CupertinoPicker(
                                    itemExtent: 32,
                                    onSelectedItemChanged: (int index) {
                                      if (_formKey.currentState!.validate()) {
                                        const Text(
                                          "Please select Units",
                                          style: TextStyle(
                                            color: Colors.red,
                                            fontSize: 16,
                                          ),
                                        );
                                      }
                                      setState(
                                        () {
                                          _selectedUnits = units[index];
                                        },
                                      );
                                    },
                                    children: List<Widget>.generate(
                                      units.length,
                                      (int index) {
                                        return Center(
                                          child: Text(units[index]),
                                        );
                                      },
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          );
                        },
                      );
                    },
                    child: Text(
                      '$_selectedWeight.$_selectedWeightDecimals  $_selectedUnits',
                      style: const TextStyle(
                        height: 1,
                        color: Colors.black,
                        fontSize: 16,
                      ),
                    ),
                  ),
                  SvgPicture.asset(
                    'assets/icons/dropdown.svg',
                  ),
                ],
              ),
            ),

and my results are

how to get lbs values and as discribed above

expected result as below

Solution

You have to ensure that you are rebuilding the weight CupertinoPicker. To do so, first, make _selectedUnits a ValueNotifier.

final _selectedUnits = ValueNotifier('lbs');

Then wrap the weight CupertinoPicker in a ValueListenableBuilder, checking the value of _selectedUnits to determine which values to display in the lis.

Expanded(
  child: ValueListenableBuilder<String>(
    valueListenable: _selectedUnits,
    builder: (context, selectedUnits, _) {
      return CupertinoPicker(
        itemExtent: 32,
        onSelectedItemChanged: (int index) {
          if (_formKey.currentState!.validate()) {
            const Text("Please select Weight",
              style: TextStyle(
                color: Colors.red,
                fontSize: 16,
              ),
            );
          }
          setState(
            () {
              if (selectedUnits == 'Kgs') {
                _selectedWeight = kgs[index];
              } else {
              _selectedWeight = lbs[index];
             },
            },
          );
        },
        children: List<Widget>.generate(
          kgs.length,
          (int index) {
            return Center(
              child: Text(
                '${selectedUnits == 'kgs' ? kgs[index] : lbs[index]}'),
            );
          },
        ),
      );
  }),
),

Finally, replace the setState call in your unit CupertinoPicker's onSelectedItemChanged with

_selectedUnits.value = units[index];

Comments

[Yeasin Sheikh]

Ok you like to create two pickers at the same time?

[Vamsee.]

Only in single picker with 2 options

[Yeasin Sheikh]

ok, should it be 2options(picker) on single dialog?

[Vamsee.]

Yes exactly, what I have explained.

[Yeasin Sheikh]

Sorry I'm not getting very well about what are you trying to archive, your widget show two pickers at the same time, can you point the issue you are facing and an view what are you trying to archive.

[Vamsee.]

just a moment please modifying answer

[Vamsee.]

@Yeasin Sheikh please check now

[Vamsee.]

its working but, its apperaring somting string like 150.0 ValueNotifier<String>#16987(kgs)

[Vamsee.]

and also lbs value is not showing up in field

[Lee3]

Make sure you are using _selectedUnits.value. It appears you are displaying the notifier object rather than it's String value.

[Lee3]

If you still experience an issue. Please update with a screenshot and your updated code.

[Vamsee.]

how to gwt custom scale slider like i asked in question (in expected result)