Flutter 移除边框扩展磁贴

And*_*rin 5 flutter flutter-layout

我创建了一个扩展图块,但找不到如何删除框的边框或阴影的方法。你们知道命令吗?

这是一张图片

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

                , )
        )
    ),
])
Run Code Online (Sandbox Code Playgroud)

小智 27

使用shape参数:

shape: const Border(),
Run Code Online (Sandbox Code Playgroud)

文档说:

/// 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
Run Code Online (Sandbox Code Playgroud)

  • 这是最简单的解决方案,可以完美地完成工作 (2认同)

小智 19

您可以将其包装在 Theme 小部件中,然后执行以下操作:

Theme(
  data: ThemeData().copyWith(dividerColor: Colors.transparent),
  child: ExpansionTile(
Run Code Online (Sandbox Code Playgroud)

或者,如果您使用的是自定义主题设置,则可以使用Theme.of(context)而不是ThemeData()这样:

Theme(
  data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
      child: ExpansionTile(
Run Code Online (Sandbox Code Playgroud)


moh*_*esR 14

这个颜色来自你的应用程序主题dividerColor......现在你可以在你的主题中添加这个代码

theme: ThemeData(
    dividerColor: Colors.transparent
  ),
Run Code Online (Sandbox Code Playgroud)

编辑 - 第二个也是最后一个方式

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

如何找到文件:

在类名上单击 + ctrl

在此处输入图片说明

单击此处的目标图标

在此处输入图片说明

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

在此处输入图片说明

那么你应该

  1. 更改文件名并将其复制到您的 lib 上。
  2. 修复进口
  3. 更改类名(非常重要)(右键单击并重构)
  4. 终于用上了!!:)

在此处输入图片说明


小智 9

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

shape: Border.all(color: Colors.transparent),
Run Code Online (Sandbox Code Playgroud)


小智 9

ExpansionTile(
    collapsedShape: RoundedRectangleBorder(
         side: BorderSide.none,
    ),
    shape: RoundedRectangleBorder(
       side: BorderSide.none,
    ),
...
Run Code Online (Sandbox Code Playgroud)