Flutter 移除边框扩展磁贴

Question

我创建了一个扩展图块，但我找不到如何删除框的边框或阴影的方法。大家知道这个命令吗？

这是一张图片

https://gyazo.com/6dc133ca91071c0afeb65899688311aa

这是一张图片，你可以在角落边缘看到它抱歉，因为很长，但这是完整的扩展

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

                , )
        )
    ),
])

Answer 1

您可以将其包装在主题小部件中，然后执行以下操作：

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

或者如果您使用自定义 主题设置，您可以使用

Theme.of(context)

而不是

ThemeData()

，如下所示：

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

Answer 2

此颜色来自您的应用程序主题和

dividerColor

... 现在您可以在您的主题中添加此代码

theme: ThemeData(
    dividerColor: Colors.transparent
  ),

或使用 Theme widget 和

Theme.of(context)

并在本地更改此值

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

完全定制方式

另一种方式...你可以用这种方式改变一切（完全定制）将文件从 flutter sdk 复制到您的 lib

如何找到文件：

在类名上单击 + Ctrl

单击此处的目标图标

右键单击在资源管理器中显示

那么你应该

更改文件名并将其复制到您的库中。
修复导入
更改类名（非常重要）（右键单击并重构）
终于可以用了！！ :)

Answer 3

使用

shape

参数：

shape: const Border(),

文档说：

/// The tile's border shape when the sublist is expanded.
///
/// If this property is null, the [ExpansionTileThemeData.shape] is used. If that
/// is also null, a [Border] with vertical sides default to [ThemeData.dividerColor] is used

Answer 4

只需在扩展标题中添加这一行

shape: Border.all(color: Colors.transparent),

Answer 5

此解决方案适用于已经设置项目主题的人员。

现有的答案提供了一种解决方案，用

ExpansionTile

包装

Theme

并传递它

ThemeData

但这种方式的问题是它将覆盖您的应用程序的主题，并且即使在传递给它的值只是

ThemeData

。这会将主题更改为 Flutter 应用程序的默认主题。

有两种方法：

仅针对相应的小部件在本地更改它：
用 dividerColor 包裹它，而不是像上面的答案中那样使用默认的
```
Theme
```
，将其更改为您已经存在的主题数据
```
ThemeData().copyWith()
```
，这样它将遵循您的应用程序的主题为：
YourThemeData().copyWith()
全局范围内，对于项目中的每个小部件：
因此，如果您已经将
Theme( data: YourThemeData().copyWith(dividerColor: Colors.transparent), child: ExpansionTile( ), );
与
```
ThemeModel
```
用于深色和浅色模式，那么只需添加
ThemeData
```
你的主题。要了解您是否已经在使用 ThemeData，请检查您的主文件：
```
dividerColor: Colors.transparent,
```
看，
```
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()), );
和
```
ThemeModel().lightmode
```
是两个
```
ThemeModel().darkMode
```
，您必须在其中添加前面提到的
```
ThemeData
```
行。

Answer 6

要在扩展图块时删除边框：

dividerColor

上面的代码将帮助您从扩展图块中删除边框:)

要更改尾随图标（扩展图块箭头）颜色：

Theme( data : ThemeData().copyWith(dividerColor: Colors.transparent), ExpansionTile( tilePadding: EdgeInsets.zero, childrenPadding: const EdgeInsets.all(0.0), children: [ Text("Flutter Developer", style: textTheme.headline1!.copyWith( color: Colors.black, fontSize: 14, fontWeight: FontWeight.w400)) ], title: Text("Mobile", style: textTheme.headline1!.copyWith( color: Colors.black, fontSize: 14, fontWeight: FontWeight.w400))))

快乐飘飘！！

Answer 7

expansion_tile_group

。该软件包包含ExpansionTile( collapsedShape: RoundedRectangleBorder( side: BorderSide.none, ), shape: RoundedRectangleBorder( side: BorderSide.none, ), ...的所有参数，因此您可以轻松地将所有当前参数移动到新参数。导入此包后，使用

ExpansionTile

小部件替换

ExpansionTileItem

。之后，添加

ExpansionTile

=

isHasTopBorder

和

false

=

isHasBottomBorder

，现在您就完全删除了 ExpansionTile 的默认边框。祝你好运

Flutter 移除边框扩展磁贴

问题描述投票：0回答：9

9个回答

完全定制方式

最新问题

Flutter 移除边框扩展磁贴

问题描述 投票：0回答：9

9个回答

完全定制方式

最新问题

问题描述投票：0回答：9