AppBar全透明

Question

问题

Is there any way to make the AppBar fully transparent without using the Stack Widget??

This is my AppBar right now (It's transparent but not fully, it has a little white shadow)

AppBar(
  automaticallyImplyLeading: false,
  backgroundColor: const Color.fromARGB(0, 255, 255, 255).withOpacity(0.1),
  shadowColor: const Color.fromARGB(0, 255, 255, 255).withOpacity(0.1),
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Row(
        children: [
          IconButton(
            onPressed: () {}, 
            icon: const Icon(
              Icons.menu,
              color: colors.BLACK,
              size: 24,
            ),
          ),
          IconButton(
            onPressed: () {}, 
            icon: const Icon(
              Icons.notifications,
              color: colors.BLACK,
              size: 24,
            ),
          ),
        ],
      ),
      Row(
        children: const [
          Text('Location', style: TextStyle(color: colors.BLACK, fontSize: 14)),
          Icon(
            Icons.location_on,
            color: colors.BLACK,
            size: 24,
          ),
        ]
      ),
      IconButton(
        onPressed: () {}, 
        icon: const CircleAvatar(
          backgroundImage: AssetImage('assets/images/icons/temp_profile_pic.png'),
          radius: 20,
        )
      )
    ],
  ),
);

版画

这里有一些打印件可以向您展示正在发生的事情：

滚动到顶部

滚动时

Answer 1

要将 AppBar 设置为完全透明，您需要将 elevation 设置为 0 并将颜色设置为 transparent，如：

AppBar(
   backgroundColor: Colors.transparent,
   elevation: 0
)

AppBar 的颜色将与 Scaffold 的背景颜色相同。