Question 199309 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: set Icon using if conditions

enter image description hereI’m new in Flutter journey.
I can use use ternary operator to set icon for 2 cases but I need to set Icon for multiple conditions. So, I need to use if or case statement. How can I do that.

I’m adding code as well as screen shoot. Kindly help.

Code

inputDecoration(title){
  return InputDecoration(
    prefixIcon:
      if(title == 'title'){
    Icon(Icons.title_outlined)
    }
     if(title == 'description'){
    Icon(Icons.description),
      },

    //prefixIcon: title =='title' ? const Icon(Icons.title_outlined) : const Icon(Icons.description),

    prefixIconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
      if(states.contains(MaterialState.focused)){
        return Colors.green;
      }if (states.contains(MaterialState.error)){
        return Colors.red;
      }
      return Colors.grey;
    }),
    border: const OutlineInputBorder(
      gapPadding: 15,
      borderRadius: BorderRadius.all(Radius.circular(3))
    )
  );
}
Tags:

2

Answers


  1. 0

    You can use ternary operators or a switch statement.

    InputDecoration(
            prefixIcon: Icon(
              title == 'title' ? Icons.title_outlined : Icons.description,
            ),
          ),

    Dart 3 switch expression:

      Icon buildPrefix(String title) {
    return switch (title) {
      'description' => const Icon(Icons.description),
      'title' => const Icon(Icons.title_outlined),
      _ => const Icon(Icons.error)
    };
  }

...

 InputDecoration(prefixIcon: buildPrefix(title)),
    Login or Signup to reply.
  2. 0

    I do not think that the syntax is acceptable if you were doing an if condition using if(){} inside the constuctor, instead you could set this logic before the build.

    Example:

    inputDecoration(title) {
  Widget prefixIcon;
  
  if (title == 'title') {
    prefixIcon = Icon(Icons.title_outlined);
  } else if (title == 'description') {
    prefixIcon = Icon(Icons.description);
  }
  
  return InputDecoration(
    prefixIcon: prefixIcon,
    prefixIconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.focused)) {
        return Colors.green;
      } else if (states.contains(MaterialState.error)) {
        return Colors.red;
      }
      return Colors.grey;
    }),
    border: const OutlineInputBorder(
      gapPadding: 15,
      borderRadius: BorderRadius.all(Radius.circular(3))
    )
  );
}

    or, you could use the ternary operator

    inputDecoration(title) {
  return InputDecoration(
    prefixIcon: title == 'title'
        ? Icon(Icons.title_outlined)
        : (title == 'description' ? Icon(Icons.description) : null),
    prefixIconColor: MaterialStateColor.resolveWith((Set<MaterialState> states) {
      if (states.contains(MaterialState.focused)) {
        return Colors.green;
      } else if (states.contains(MaterialState.error)) {
        return Colors.red;
      }
      return Colors.grey;
    }),
    border: const OutlineInputBorder(
        gapPadding: 15,
        borderRadius: BorderRadius.all(Radius.circular(3))),
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search