skip to Main Content

I have a ListView builder inside a Card. In a column (in the card), each card shows a job and a list of staff members. If the staff member listed is the user who has logged in to the app, their background color is changed to highlight them in the list :

color: gblStaffId == data[index].staffId
                          ? kMainColor20
                          : Colors.white,

I would like to be able to allow them to tap their own name to popup some extra details. They shouldn’t be able to tap anyone else.

I think I should use an InkWell, but I’m not sure how or where to put it.

    ListView.builder(
        itemCount: data.length,
        shrinkWrap: true,
        physics: NeverScrollableScrollPhysics(),
        itemBuilder: (_, int index) {
          return Container(
            padding: EdgeInsets.all(5.0),
            margin: EdgeInsets.symmetric(vertical: 1.0),
            decoration: BoxDecoration(
              color: gblStaffId == data[index].staffId
                  ? kMainColor20
                  : Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(4)),
            ),
            child: Row(
              children: <Widget>[
                Expanded(
                  flex: 49,
                  child: Text(
                    data[index].staffName!,
                    style: TextStyle(color: kBodyText, fontSize: 16),
                  ),
                ),
                Expanded(
                  flex: 23,
                  child: Text(
                    formatJsonTime24To12(data[index].startTime!)!
                        .toLowerCase(),
                    style: TextStyle(color: kBodyText, fontSize: 16),
                    textAlign: TextAlign.right,
                  ),
                ),
                Expanded(
                  flex: 5,
                  child: Text(
                    ' -',
                    style: TextStyle(color: kBodyText, fontSize: 16),
                    textAlign: TextAlign.center,
                  ),
                ),
                Expanded(
                  flex: 23,
                  child: Text(
                    formatJsonTime24To12(data[index].finishTime!)!
                        .toLowerCase(),
                    style: TextStyle(color: kBodyText, fontSize: 16),
                    textAlign: TextAlign.right,
                  ),
                ),
              ],
            ),
          );
        })

2

Answers


  1. You can return Gesture widget(or any tappable) from itemBuilder. Then add ternary or conditional statement on onTap method.

    physics: NeverScrollableScrollPhysics(),
    itemBuilder: (_, int index) {
      return GestureDetector(
        onTap: gblStaffId == data[index].staffId ? () {
          // your stuffs
        } : null,
        child: Container(
          padding: EdgeInsets.all(5.0),
          margin: EdgeInsets.symmetric(vertical: 1.0),
          decoration: BoxDecoration(
            color: gblStaffId == data[index].staffId
                ? kMainColor20
                : Colors.white,
    
    Login or Signup to reply.
  2. you can use like

    onTap :  gblStaffId == data[index].staffId
                              ? funcToCall(data[index].staffId)
                              : null
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search