如何在 ListTile flutter 中添加阴影，如“海拔”

Question

我需要在 flutter 的项目 listTile 元素中添加阴影，但我无法使用 BoxShadow 执行此操作，因为它只能在 Container 中实现

这是我的 listTile：

                        child: ListTile(

                          leading: const Icon(Icons.flight_land),
                          tileColor: Colors.black.withOpacity(0.5),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(15),
                            side: BorderSide(
                              color: Colors.black,
                            ),
                          ),

                          title: Text(
                            snapshot
                                .data!.docChanges[index].doc['nameCourse'],
                            style: TextStyle(
                              fontSize: 20,
                              //COLOR DEL TEXTO TITULO
                              color: Colors.blueAccent,
                            ),
                          ),
                          contentPadding: EdgeInsets.symmetric(
                            vertical: 8,
                            horizontal: 16,
                          ),
                        ),

Answer 1

您不能向 ListTile 本身添加阴影。 所以一个解决方案可以是用这样的容器包装它

Container(
  decoration: BoxDecoration(
    color: Colors.white, // Your desired background color
    borderRadius: BorderRadius.circular(15),
    boxShadow: [
      BoxShadow(color: Colors.black.withOpacity(0.3), blurRadius: 15),
    ]
  ),
  child: ListTile(
    leading: const Icon(Icons.flight_land),
    tileColor: Colors.black.withOpacity(0.5),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(15),
      side: const BorderSide(
        color: Colors.black,
      ),
    ),
    title: const Text(
      'Text',
      style: TextStyle(
        fontSize: 20,
        //COLOR DEL TEXTO TITULO
        color: Colors.blueAccent,
      ),
    ),
    contentPadding:
    const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
  ),
),

Answer 2

您可以使用Material小部件包装您的ListTile小部件并为其提供阴影。

例如：

Material(
  elevation: 20.0,
  shadowColor: Colors.blueGrey,
...
),

Answer 3

试试下面的代码希望它对你有帮助。

使用卡：

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(15),
    side: BorderSide(
      color: Colors.black,
    ),
  ),
  elevation: 16,
  shadowColor: Colors.red,
  child: ListTile(
    leading: const Icon(Icons.flight_land),
    title: Text(
      'Title',
      style: TextStyle(
        fontSize: 20,
        //COLOR DEL TEXTO TITULO
        color: Colors.blueAccent,
      ),
    ),
    subtitle: Text(
      'Sub Title',
    ),
    trailing: const Icon(Icons.add),
  ),
),

您的结果屏幕->

参考Card在这里

使用物理模型：

PhysicalModel(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.green,
        borderRadius: BorderRadius.circular(20),
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

在此处参考PhysicalModel模型

在此处参考ListTile

您的结果屏幕->

使用物理形状

PhysicalShape(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.yellow,
        clipper: ShapeBorderClipper(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10.0),
            ),
          ),
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

在此处参考PhysicalShape形状

您的结果屏幕->

使用材料

Material(
        color: Colors.white,
        elevation: 18,
        shadowColor: Colors.blue,
        child: ListTile(
          leading: const Icon(Icons.flight_land),
          title: Text(
            'Title',
            style: TextStyle(
              fontSize: 20,
              //COLOR DEL TEXTO TITULO
              color: Colors.blueAccent,
            ),
          ),
          subtitle: Text(
            'Sub Title',
          ),
          trailing: const Icon(Icons.add),
        ),
      ),

在此处参考材料

您的结果屏幕->

Answer 4

可以用卡，把这个放进卡里

elevation: 16,
  shadowColor: Colors.black,

Answer 5

boxShadow: [
  BoxShadow(
    color: Colors.grey.withOpacity(0.5),
    spreadRadius: 5,
    blurRadius: 7,
    offset: Offset(0, 3),
  ),
]