Flutter expansion tile remove trailing

Question

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))

                    , )
            )
        ),
    ]

Sajjad · Accepted Answer · 2022-02-01 04:48:02Z

17

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

edited Feb 1, 2022 at 4:48

answered Oct 1, 2020 at 19:56

Sajjad

3,30823 silver badges34 bronze badges

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

2 Comments

Balaji Over a year ago

Error: A library can't opt out of null safety by default, when using sound null safety

Sajjad Over a year ago

please look at this answer ... and follow second way stackoverflow.com/a/64124471/6813907

Phuc Nguyen · Accepted Answer · 2022-04-26 10:32:26Z

6

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(),
)

answered Apr 26, 2022 at 10:32

Phuc Nguyen

3203 silver badges6 bronze badges

2 Comments

Martin Berger Over a year ago

Problem with this is that icon space that you "freed" with SizedBox() will still be occupied, and Title text cannot go there.

sandulasanth-7 Over a year ago

@MartinBerger that's exactly what's happening

Zackysh · Accepted Answer · 2022-01-06 01:57:11Z

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.

answered Jan 6, 2022 at 1:57

Zackysh

751 silver badge7 bronze badges

Comments

Sludge · Accepted Answer · 2024-08-19 19:52:45Z

0

You can now just change showTrailingIcon to false in ExpansionTile

The reserved space for the icon is also freed up:

return ExpansionTile(
    showTrailingIcon: false,
    title: Text("Title"),
    children: [Text("child")],
),

answered Aug 19, 2024 at 19:52

Sludge

7,7946 gold badges36 silver badges46 bronze badges

2 Comments

Priya Sindkar Over a year ago

There is no such property as showTrailingIcon

Sludge Over a year ago

@PriyaSindkar try Googling or reading the docs first: api.flutter.dev/flutter/material/ExpansionTile/…

Collectives™ on Stack Overflow

Flutter expansion tile remove trailing

4 Answers 4

Update

just add

2 Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Update

just add

2 Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related