Home > Mobile >  how to change the image based on the number prefix entered by the user in Flutter
how to change the image based on the number prefix entered by the user in Flutter

Time:10-25

i'm new in Flutter. I want to change the image of the String "operatorIcon" based on the number prefix entered by the user, but my code below is not working. the image still not change

This is my Model

    class PrefixOperator {
  final String id;
  final String name;
  final String image;
  final List<PrefixList> prefixList;

  PrefixOperator({
    required this.id,
    required this.name,
    required this.image,
    required this.prefixList,
  });
}

class PrefixList {
  final String id;
  final String code;

  PrefixList({
    required this.id,
    required this.code,
  });
}

List<PrefixOperator> prefixOperator = [
  PrefixOperator(
    id: "1",
    name: "aaa",
    image: AssetsCollection.icAaa,
    prefixList: prefixAaa,
  ),
  PrefixOperator(
    id: "2",
    name: "bbb",
    image: AssetsCollection.icBbb,
    prefixList: prefixBbb,
  ),
  
];

List<PrefixList> prefixAaa = [
  PrefixList(id: "1", code: "0711"),
  PrefixList(id: "2", code: "0712"),
  PrefixList(id: "3", code: "0713"),
];

List<PrefixList> prefixBbb = [
  PrefixList(id: "1", code: "0614"),
  PrefixList(id: "2", code: "0615"),
  PrefixList(id: "3", code: "0616"),
];

This is my Stateful widget

    final TextEditingController _controller = TextEditingController();
  String phoneNumber = "";
  bool isContains = false;
  String prefixNumber = "";
  String operatorIcon = "";

  handleTextChange() {
    if (_controller.text != "" && _controller.text.length > 8) {
      setState(() {
        prefixNumber = _controller.text.substring(0, 4);
      });
    }
  }

  checkIcon() {
    if (prefixNumber != "") {
      prefixOperator.map((item) {
        isContains =
            item.prefixList.map((e) => e.code).toList().contains(prefixNumber);

        if (isContains == true) {
          setState(() {
            operatorIcon = item.name;
          });
        }
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(children: [
          Image.asset(operatorIcon != "" ? operatorIcon : widget.icon,
              height: 40),
          Expanded(
            child: Column(
              children: [
                SizedBox(
                  height: 10,
                ),
                InputLabel(
                  labelText: "Phone Number",
                  isRequired: false,
                ),
                TextField(
                  controller: _controller,
                  onChanged: (value) {
                    handleTextChange();
                    checkIcon();
                  },
                  keyboardType: TextInputType.phone,
                  decoration: InputDecoration(
                    hintText: 'Enter your mobile number',
                  ),
                ),
              ],
            ),
          )
        ]),
      ],
    );
  }

......................................................................................................................................................................................................................................................................................................

CodePudding user response:

did you know that map is not a void function?

Iterable<T> map<T>(T toElement(E e)) sync* {
  for (var value in this) {
    yield toElement(value);
  }
}

map is Returns a new lazy Iterable with elements that are created by calling toElement on each element of this Iterable in iteration order.


so, that what you missed. Just ad .toList() to your first map. you will get the value.

 prefixOperator.map((item) {
    isContains =
        item.prefixList.map((e) => e.code).toList().contains(prefixNumber);
    ....

  }).toList();  // add this 

I've tested on dartpad. and it works fine

  • Related