7

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),
  ),
);
}

}
1
  • Make sure you include the mainAxisSize: MainAxisSize.min attribute in the row Commented Nov 8, 2019 at 22:17

1 Answer 1

23

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:

enter image description here

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.