flutterrenderingexpanded

Flutter: Unable to get the Expanded widget to work with trailing property for my list to render properly on the screen


I need the Expanded widget to co-operate with the trailing property otherwise all the ListTile contents is squished to the far-right of the screen.

However, I get the following error message and not sure how to fix the issue.

Error message:

======== Exception caught by widgets library > ======================================================= The following assertion was thrown while applying parent data.: Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to > a RenderObject, which has been set up to accept ParentData of incompatible type > BoxParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget.

Typically, Expanded widgets are placed directly inside Flex widgets. The offending Expanded is currently placed inside a _ListTile widget.

children: List.generate(
          10,
          (index) => ListTile(
            key: keys[index],
            trailing: Expanded(
                child: ReorderableDragStartListener(
                  index: index,
                  child: Row(
                    children: <Widget>[
                      Text(index.toString()),
                      Text('   The index is {$index.toString()}'),
                      IconButton(
                        icon: const Icon(Icons.edit),
                        onPressed: () {},
                        color: Theme.of(context).primaryColor,
                      ),
                      IconButton(
                        icon: const Icon(Icons.delete),
                        onPressed: () {},
                        color: Theme.of(context).shadowColor,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),


Solution

  • i don't think trailing accept Expanded

    instead of trailing and Expanded you can use title and Row to achieve the design

      ListTile(
                    title: ReorderableDragStartListener(
                      index:index,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text(index.toString()),
                          Text('   The index is {index.toString()}'),
                          Row(
                            children: [
                              IconButton(
                                icon: const Icon(Icons.edit),
                                onPressed: () {},
                                color: Theme.of(context).primaryColor,
                              ),
                              IconButton(
                                icon: const Icon(Icons.delete),
                                onPressed: () {},
                                color: Theme.of(context).shadowColor,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),