'Flutter expansion tile remove trailing

i have a exoansiontile and i want it to be like a box, everything centered, the problem is that if i add a text that is too long, i get the overflow error and i think this is caused by the trailing of the expansion tile. Here is a picture: https://gyazo.com/c29329106dc5dcb162b71b5f41951b67

Here is the code:

ExpansionTile(

    trailing: Text(''),
    leading: Container(
        margin: new EdgeInsets.only(left: 0, top: 10.0, right: 0.0, bottom: 0.0),
        child: Image.asset(
            'images/food.png'
        )),
    title: Row(
        children: < Widget > [


            Padding(
                padding: const EdgeInsets.only(right: 0, left: 10, top: 15, bottom: 15),
                    child: Column(textDirection: TextDirection.ltr, crossAxisAlignment: CrossAxisAlignment.start, children: < Widget > [



                        Container(
                            margin: new EdgeInsets.only(left: 0.0, top: 7.0, right: 0.0, bottom: 3.0),
                            child: Text(
                                'Food System', textAlign: TextAlign.left,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 25,
                                ),
                            )),
                        Text(
                            'Customize the food system', textAlign: TextAlign.left,
                            style: TextStyle(

                                color: Colors.white,
                                fontSize: 15,
                            ),
                        )

                    ])),

        ], ),
    children: < Widget > [



        Container(
            width: 300,
            margin: new EdgeInsets.only(left: 10.0, top: 0.0, right: 10.0, bottom: 10.0),
            color: Colors.transparent,
            child: new Container(


                padding: new EdgeInsets.all(20),
                child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: < Widget > [
                    Container(
                        margin: new EdgeInsets.only(left: 15.0, top: .0, right: 20.0, bottom: 5.0),
                        child: Text('Storage', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), ),
                    Center(child: Column(children: < Widget > [
                        Container(
                            child: Column(children: < Widget > [
                                Text('2.4 KG left        -        7 Days', style: TextStyle(color: Colors.white, fontSize: 20)),
                                Text('200 G / Meal  - 600 G / Day', style: TextStyle(color: Colors.white, fontSize: 20)),
                            ], ),
                            margin: new EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 10.0),
                        )

                    ], )),
                    Container(
                        margin: new EdgeInsets.only(left: 18.0, top: .0, right: 20.0, bottom: 5.0),
                        child: Text('Meal times', style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), ),
                    Center(child: Column(children: < Widget > [

                        Text('1.   Breakfast   -   8:30 AM', style: TextStyle(color: Colors.white, fontSize: 20)),
                        Text('2.   Lunch         -   2:00 PM', style: TextStyle(color: Colors.white, fontSize: 20)),
                        Text('3.   Dinner        -   9:15  PM', style: TextStyle(color: Colors.white, fontSize: 20)),
                    ], ))
                ], ), )
        ),




        Container(
            height: 50.0,
            width: 300,

            margin: new EdgeInsets.only(left: 10.0, top: 10.0, right: 10.0, bottom: 10.0),
            color: Colors.transparent,
            child: new Container(
                decoration: new BoxDecoration(
                    color: Colors.blue,
                    gradient: LinearGradient(
                        begin: Alignment.topRight,
                        end: Alignment.bottomLeft,
                        colors: [Color(0xff37b9ff), Color(0xff5d3afd)]),
                    borderRadius: new BorderRadius.only(
                        topLeft: const Radius.circular(40.0),
                            topRight: const Radius.circular(40.0),
                                bottomLeft: const Radius.circular(40.0),
                                    bottomRight: const Radius.circular(40.0),

                    )
                ),
                child: Center(child:

                    Text('Edit', style: TextStyle(color: Colors.white, fontSize: 15))

                    , )
            )
        ),
    ]

Solution 1:^[1]

Update

just add

trailing: const SizedBox(),

if you wants to make full customizing on each matrail classes you can flow second way of this answer

Solution 2:^[2]

I've tried suggested solutions but I found myself unnecessary to override anything or use other library. How?

You can try this piece of code:

trailing: (shouldBeEmpty)
      ? const SizedBox()
      : Icon(
          selected
            ? Icons.keyboard_arrow_up
            : Icons.keyboard_arrow_down,
          color: Colors.red,
        ),

I added an additional conditional, but basically if you want to hide trailing, place a SizedBox() or any non-visible widget as trailing.

Solution 3:^[3]

I found a solution by use Matrix4.translationValues

ExpansionTile(
    title: Container(
        transform: Matrix4.translationValues(48, 0, 0),
        color: Colors.red,
        child: Text("title"),
    ),
    children: [],
    trailing: const SizedBox(),
)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	AdriGB
Solution 3	Phuc Nguyen

'Flutter expansion tile remove trailing

Solution 1:[1]

Update

just add

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]