Flutter remove border expansion tile

Question

i created an expansion tile and i cannot find a way how to remove the border or shadow of the box. Do you guys know the command?

here is a picture

https://gyazo.com/6dc133ca91071c0afeb65899688311aa

here is a picture, you can see it on the corner edge sorry because it is long but this is the full expansion

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

                , )
        )
    ),
])

user_12338147 · Answer

You can wrap it in a Theme widget and do like this:

Theme(
  data: ThemeData().copyWith(dividerColor: Colors.transparent),
  child: ExpansionTile(

or if you're using custom theme settings, you can use Theme.of(context) instead of ThemeData() like this:

Theme(
  data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
      child: ExpansionTile(

user_6813907 · Answer

this Color comes From Your App Theme and dividerColor ... now You can add this Code in Your Theme

theme: ThemeData(
    dividerColor: Colors.transparent
  ),

Edit - second way

another way ... you can change every thing with this way(full customization) copy the file from flutter sdk to your lib

how to find the file :

click + ctrl on class name

click on target icon at here

right click on show in Explorer

then you should

change the file name and copy this on your lib .
fix imports
change class name (very important) ( with right click and refactor)
finally use it !! :)

user_8244632 · Answer

This solution is intended for people who've already set-up Project's Theme.

The already existing answers provide a solution to wrap the ExpansionTile with Theme and pass it ThemeData but the problem with this way is it will override your app's theme and will change all values of app's ThemeData even when the value passed to it is only the dividerColor. This will change the theme to default theme of a Flutter app.

There are two ways:

To change it locally only for the respective widget: Wrap it with Theme but instead of default ThemeData().copyWith() as in above answers, change it your already existing theme data YourThemeData().copyWith(), this way it will follow your app's theme as:
```
 Theme(
   data: YourThemeData().copyWith(dividerColor: Colors.transparent),
   child: ExpansionTile(
   ),
 );
```
Globally, for every widget in the project:

So, if you're already using ThemeModel with ThemeData for dark and light mode, then, just add
```
 dividerColor: Colors.transparent,
```
to your theme. To find out if you're using ThemeData already, then check your main file:
```
 MaterialApp(
   debugShowCheckedModeBanner: false,
   theme: ThemeModel().lightMode,
   darkTheme: ThemeModel().darkMode,
   themeMode:
     mode.darkTheme == true ? ThemeMode.dark : ThemeMode.light,
   home: Title(
     title: 'Your App name',
     color: DefaultColor,
     child: SplashScreen()),
 );
```
See, ThemeModel().lightmode and ThemeModel().darkMode are two ThemeData in which you've to add the aforementioned dividerColor line.

Flutter remove border expansion tile

3 Answers