Question 119755 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – How to change icon based on a String value in Flutter

I have an app where im trying to set different icons for different values of text.

import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

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

class WidgetCard extends StatefulWidget {
  const WidgetCard({Key? key, required this.week, required this.status})
      : super(key: key);
  final String week;
  final String status;

  @override
  State<WidgetCard> createState() => _WidgetCardState();
}

class _WidgetCardState extends State<WidgetCard> {

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Get.toNamed('/weekform', arguments: widget.week);
      },
      child: Container(
        width: MediaQuery.of(context).size.width,
        padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
        child: Card(
          color: AppColors.yellow_accent,
          elevation: 5.0,
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * (1 / 6),
            padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
            decoration: BoxDecoration(
                color: AppColors.yellow_accent,
                borderRadius: BorderRadius.circular(20)),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Align(
                  alignment: AlignmentDirectional.centerStart,
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                       Align(
                        alignment: AlignmentDirectional.center,
                        child: Container(
                            height: 55.0,
                            child: Image.asset("assets/icons/checked.png")),
                      ),
                      SizedBox(
                        width: 17,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          Container(
                            width: 100,
                            child: Text(
                              widget.week,
                              style: GoogleFonts.poppins(
                                  color: Colors.black,
                                  fontSize: 18.0,
                                  fontWeight: FontWeight.bold),
                              maxLines: 4,
                              overflow: TextOverflow.ellipsis,
                            ),
                          ),
                          Row(
                            children: [
                              Align(
                                alignment: AlignmentDirectional.bottomEnd,
                                child: Text("Status :  ",
                                    style: GoogleFonts.poppins(
                                        color: Colors.black,
                                        fontSize: 15.0,
                                        fontWeight: FontWeight.normal)),
                              ),
                              Align(
                                alignment: AlignmentDirectional.bottomEnd,
                                child: Text(widget.status,
                                    style: GoogleFonts.poppins(
                                        color: Colors.green,
                                        fontSize: 15.0,
                                        fontWeight: FontWeight.normal)),
                              ),
                            ],
                          ),
                        ],
                      ),
                      SizedBox(
                        width: 10,
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

The value is stored in the string status. How can i use it in a conditional to change the icon. There are three values for status. It can either be "Approved" , "Pending" or "Rejected"

I tried giving a conditional if(status) == "Approved" ? but it gives the error

The element type 'bool' can't be assigned to the list type 'Widget'.
Tags:

3

Answers


  1. 0

    Do like this:

         Row(
    children:[
       
        status=="approved"?Icon(Icons.approve)
        
        :status=="pending"?Icon(Icons.pending):Icon(Icons.rejected)

         ]
       )
    Login or Signup to reply.
  2. 0

    How about choosing asset directory first?
    After declairing your final String status, add

    String assetKind;
  
  if (status=="Approved") {
    assetKind = "assets/icons/checked.png";
  } else if (status == "Pending") {
    assetKind = "~~";
  } else if (status == "Rejected") {
    assetKind = "~~";
  }

    and the directory of your own.

    Then, change your Align Widget like this :

    Align(
  alignment: AlignmentDirectional.center,
  child: Container(
  height: 55.0,
  child: Image.asset(assetKind),
),
    Login or Signup to reply.
  3. 0

    You can use ternary operators to do this.

         Container(
      child: status == 'Approved'
          ? const ImageIcon(AssetImage('assets/icons/checked.png'))
          : status == 'Pending'
              ? const ImageIcon(AssetImage('assets/icons/pending.png'))
              : const ImageIcon(AssetImage('assets/icons/rejected.png')),
    );

    or if you use enum for your status

    import 'package:flutter/material.dart';

enum Status { approved, pending, rejected }

class DemoWidget extends StatelessWidget {
  const DemoWidget({super.key, required this.status});
  final Status status;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: status == Status.approved
          ? const ImageIcon(AssetImage('assets/icons/checked.png'))
          : status == Status.pending
              ? const ImageIcon(AssetImage('assets/icons/pending.png'))
              : const ImageIcon(AssetImage('assets/icons/rejected.png')),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search