I am passing the list into my dropdown and string to split the value in the dropdown widget but gives an error. RangeError (index): Invalid value: Only valid value is 0: 1. I have posted the code for your reference.

"LPSUE5~> 10 Years~1",
"LPSUE4~5-10years~0",
"LPSUE3~2-5Years~0",
"LPSUE2~1-2 Years~0",
"LPSUE1~0-1year~0",
"999999~Select~0"

trying to convert to LPSUE5 and > 10 Years and 1 I have to show only > 10 Years on the drop-down.

My drop-down widget

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import '../utils/colors.dart';

class DropdownButtonField extends StatelessWidget {
  final String? value;
  final String? errorText;
  final String? type;
  final String? labelText;
  final List<String> items;
  final String hintText;
  final TextStyle? hintStyle;
  final Widget? suffixIcon;
  final Widget? prefixIcon;
  final Function(String? type, String? outPut) onChange;

  const DropdownButtonField({
    Key? key,
    required this.items,
    required this.errorText,
    required this.type,
    required this.labelText,
    this.value,
    required this.hintText,
    this.hintStyle,
    this.suffixIcon,
    this.prefixIcon,
    required this.onChange,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FormField(builder: (FormFieldState<int> state) {
      return InputDecorator(
        decoration: InputDecoration(
          labelText: labelText,
          labelStyle: GoogleFonts.mulish(
            fontSize: 15.6,
            fontWeight: FontWeight.w600,
            color: CustomColors.black,
          ),
          errorText: errorText,
          hintText: hintText,
          hintStyle: const TextStyle(color: Colors.black),
          enabledBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey),
          ),
          focusedBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: CustomColors.orange),
          ),
          focusedErrorBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: CustomColors.orange),
          ),
          border: const OutlineInputBorder(
            borderSide: BorderSide(color: Colors.grey),
          ),
          errorBorder: const OutlineInputBorder(
            borderSide: BorderSide(color: CustomColors.orange),
          ),
        ),
        child: DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            isExpanded: true,
            hint: FittedBox(
                fit: BoxFit.fitWidth,
                child: ConstrainedBox(
                    constraints: const BoxConstraints(minWidth: 1, minHeight: 1),
                    child: Text(hintText),),),
            style: GoogleFonts.mulish(
              fontSize: 15.6,
              fontWeight: FontWeight.w600,
              color: CustomColors.black,
            ),
            isDense: true,
            value: value,
            items: items.map<DropdownMenuItem<String>>((String data) {
              return DropdownMenuItem<String>(
                value: data,//what I have tried data.split("~")[1];
                child: Text(
                  data, //what I have tried data.split("~")[1];
                  style: const TextStyle(color: Colors.black),
                  overflow: TextOverflow.ellipsis,
                  softWrap: true,
                ),
              );
            }).toList(),
            onChanged: (outPut) {
              onChange(type, outPut);
            },
          ),
        ),
      );
    });
  }
}

This I'm passing value from my screen

DropdownButtonField(
              errorText: documentProvider.getSubVerticalError
                  ? ErrorMessages.invalidSubVertical
                  : null,
              type: 'subVertical',
              items: documentProvider.dropdownItemsSubVertical,
              hintText: documentProvider.subVerticalController.text,
              labelText: "Sub Vertical",
              onChange: (String? type, String? value) async{
                System.printValue("Onchange :: $value :: $type");
                documentProvider.setDropDownValue(type!, value!, 1);
                if(documentProvider.subVerticalController.text.toLowerCase() != 'select'){
                  Loader.startLoad(context);
                  await documentProvider.getSecVerticalDetail();
                  if (!mounted) return;
                  Loader.stopLoader(context);
                }
              },
            ),

CodePudding user response：

If I understand the question correctly this will convert stings of this type of format:

"LPSUE5~> 10 Years~1",
"LPSUE4~5-10years~0",
"LPSUE3~2-5Years~0",
"LPSUE2~1-2 Years~0",
"LPSUE1~0-1year~0",
"999999~Select~0"

To

> 10 Years
5-10years
2-5Years
1-2 Years
0-1year
Select

Here is the method

String snipString(String s) {
  String newString = "";
  int firstIndex = s.indexOf('~')   1; //   1 to get rid of "~"
  int secondIndex = s.lastIndexOf('~');
  for (int i = firstIndex; i < secondIndex; i  ) {
    newString  = s[i];
  }
  return newString;
}

example usage

return DropdownMenuItem<String>(
                value: snipString(data),//what I have tried data.split("~")[1];
                child: Text(
                  snipString(data), //what I have tried data.split("~")[1];
                  style: const TextStyle(color: Colors.black),
                  overflow: TextOverflow.ellipsis,
                  softWrap: true,
                ),
              );

code not tested may need to play around with it a bit