Question

现在我要制作透明的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(),
              ],
            ),
          ),
        );
      }
    }

Answer 1

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

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

检查first answer！

Answer 2

我会将backgroundColor的{{1}}设置为AppBar，将Colors.transparent设置为零，并将elevation设置为extendBodyBehindAppBar: true,。

Scaffold

如何在flutter中制作透明的appBar

2 个答案: