Add a clickable icon next to existing trailing in List Tile Flutter

Question

We want to add a second clickable icon in the trailing in a ListTile. Here is a the code. Its a basic shopping list screen we are modifying so we want a Favorites icon next to the delete icon. I tried adding it as a subtitle but it places it in the middle of the line. I tried adding a row with children but it removed the shopping item from the screen.

import 'package:flutter/material.dart';
import 'package:lightbridge_mobile/models/shopping_item.dart';
import 'package:lightbridge_mobile/models/user.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;


class Shopping extends StatefulWidget {
 @override
_HomePageState createState() => _HomePageState();

final User user; 
Shopping({Key key, @required this.user}) : super(key: key);
}

class _HomePageState extends State<Shopping> {
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState> 
  ();
final TextEditingController _textEditingController =
  TextEditingController();

List<ShoppingItem> items = [
ShoppingItem('Milk'),
ShoppingItem('Eggs'),
ShoppingItem('Fabric Softener'),
 ];

 void initState() {
 super.initState();

 }

 _onAddItemPressed() {
_scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) {
  return  Container(
    decoration:  BoxDecoration(color: Colors.brown[200]),
    child:  Padding(
      padding: const EdgeInsets.fromLTRB(32.0, 50.0, 32.0, 32.0),
      child:  TextField(
        controller: _textEditingController,
        decoration: InputDecoration(
          hintText: 'Please enter an item',
        ),
        onSubmitted: _onSubmit,
      ),
    ),
  );
});
}

  _onSubmit(String s) {
  if (s.isNotEmpty) {
  insertShoppingItem(widget.user.userId, s);
  items.add(ShoppingItem(s));
  _textEditingController.clear();
  setState(() {});
  }
}

 _onDeleteItemPressed(item) {
  items.removeAt(item);
  setState(() {});
 }

Future<void> insertShoppingItem(String userId, String item) async {

final response =
  await http.post('http://35.226.136.162/api/Shopping',
  headers: {"Content-Type": "application/json", 
             'Accept': 'application/json',},
  body: json.encode({'userid' : userId ,  'Item' : item}));

  if (response.statusCode == 204) {

 }

}

 @override
 Widget build(BuildContext context) {
 return  Scaffold(
  key: _scaffoldKey,
  appBar: AppBar(
    title: Text('Sams Shopping List'),
    backgroundColor: Colors.brown[300],
  ),
  body: Container(
     decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.brown[300], Colors.brown[300]],
            begin: Alignment.bottomLeft,
            end: Alignment.topRight
        )
    ),
    child: ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(
            '${items[index].title}',
             style: TextStyle( color: Colors.white70, fontWeight: FontWeight.normal, fontSize: 20.0 ) ,
          ),
         // subtitle: GestureDetector(
                  //   child: Icon(
                   //  FontAwesomeIcons.heart,
                   //  size: 20.0,
                  //   color: Colors.brown[900],
             //),
            //      onTap: () {
              //_onDeleteItemPressed(index);
          //  },
        //  ),
          trailing: GestureDetector(
                     child: Icon(
                     FontAwesomeIcons.trash,
                     size: 20.0,
                     color: Colors.brown[900],
             ),
                  onTap: () {
              _onDeleteItemPressed(index);
            },
          ),
        );
      },
    ),
  ),
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.brown[700],
    onPressed: _onAddItemPressed,
    tooltip: 'Add item',
    child: Icon(Icons.add),
  ),
);
}

}

Answer 1

Well, I don't see any issue in doing this.

code:

ListTile(
          title: Text(
            'Fabric Softener',
            style: new TextStyle(
                color: Colors.white70,
                fontWeight: FontWeight.normal,
                fontSize: 20.0),
          ),
          trailing: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              IconButton(
                icon: Icon(
                  Icons.favorite_border,
                  size: 20.0,
                  color: Colors.brown[900],
                ),
                onPressed: () {
                  //   _onDeleteItemPressed(index);
                },
              ),
              IconButton(
                icon: Icon(
                  Icons.delete_outline,
                  size: 20.0,
                  color: Colors.brown[900],
                ),
                onPressed: () {
                  //   _onDeleteItemPressed(index);
                },
              ),
            ],
          ),
        )

Output: