我如何在颤动中制作透明的appBar [重复]答案

【问题标题】：How can i make transparent appBar in flutter [duplicate]我如何在颤动中制作透明的appBar [重复]
【发布时间】：2021-01-09 22:46:01
【问题描述】：

现在我想做透明的appBar

所以我找了一种方法，但是示例将 appBar 放在图像顶部，但我想将 appBar 放在小部件顶部，而不是图像上。

我想知道如何在小部件顶部而不是图像上制作透明 appBar。

这是我的代码

// main.dart

void main() => runApp(Main());
    
    class Main extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
            debugShowCheckedModeBanner: false,
            home: SideBarLayout(),
          );
      }
    }

// SideBarLayout.dart

class SideBarLayout extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MultiProvider(
            providers: [
                ....
          ],
          child: Scaffold(
            appBar: AppBar(
              centerTitle: true,
              title: Text('Help'),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(
                  bottom: Radius.circular(30),
                ),
              ),
            ),
            body: Stack(
              children: <Widget>[
                Consumer<MenuItem>(
                  builder: (BuildContext context, MenuItem value, Widget child){
                  if(value.menuType == MenuType.pomodoro) { return Pomodoro(); }
                  else if (value.menuType == MenuType.calendar) { return MonthTable(); }
                  else if (value.menuType == MenuType.todoList) { return TodoList(); }
                  else if (value.menuType == MenuType.settings) { return SettingView(); }}),
                  SideBar(),
              ],
            ),
          ),
        );
      }
    }

【问题讨论】：

将backgroundColor 和shadowColor 设置为透明。

标签： flutter

【解决方案1】：

AppBar 使用MaterialApp 的Theme 对象的原色。

您还可以更改backgroundColor 属性并将其设置为Colors.transparent。

检查first answer！

【讨论】：

【解决方案2】：

我会将您的AppBar 的backgroundColor 设置为Colors.transparent 和elevation 为零，并将extendBodyBehindAppBar: true, 设置为您的Scaffold。

Scaffold(
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    ...
  ),
  body: ...,
)

【讨论】：