Search code examples
flutterdartformattingswipe

Slidable resizes widget below

I am using Slidable and whenever it is used, the widget below is moved up.

enter image description here

enter image description here

Widget buildItemList(BuildContext context, DocumentSnapshot document) {
    return new Container(
          child: Card(
          elevation: 10.0,
          margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
            child: Slidable(
                actionPane: SlidableDrawerActionPane(),
                //actionExtentRatio: 0.25,
                closeOnScroll: false,
                secondaryActions: <Widget>[
                  IconSlideAction(
                    caption: 'Delete',
                    color: Colors.red,
                    icon: Icons.delete,
                    onTap: (){},
                  )
                ],
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,

              // Unnecessary code was removed

              children: <Widget>[
                Container(
                  padding: const EdgeInsets.only(right: 12.0),
                  child: Row(
                    children: <Widget>[
                      Text('0'),
                      Text('/'),
                      Text(document['value'].toString())
                    ],)
                )          
              ]
            ),
        ),
      ),
    );
  }

It does not matter where i put Slidable, it always resizes the widget. Someone able to help?

Thank you!

Solution

  • This will fix the issue

      child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Expanded(
        child: Container(
            height: double.maxFinite,
            width: double.maxFinite,
            padding: const EdgeInsets.only(right: 12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                Text('0'),
                Text('/'),
                Text('value'.toString())
              ],
            )),
      )
    ],
  ),

    If you don't need extra functionality you can remove the two rows and simply write something like

    child: Container(
  alignment: Alignment.centerRight,
  padding: const EdgeInsets.only(right: 12.0),
  child: Text('0/${document['value'].toString()}'),
),