首页 > 解决方案 > 使appbar与body颜色一致

问题描述

我需要使用 的属性AppBar,但我需要应用栏与正文颜色相同。好像没有appbar。我对 body 和 appBar 使用了相同的颜色,但 appBar 的颜色更深!

材料应用程序代码:

class MyApp extends StatelessWidget {
  const MyApp();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppName',
      theme: ThemeData(
        backgroundColor: Color(pagesBackgroundColor),
        appBarTheme: AppBarTheme(
          color: Color(pagesBackgroundColor),
        ),
      ),
      home: const HomePage(),
    );
  }
}

主页代码:

class HomePage extends StatelessWidget {
  const HomePage();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(pagesBackgroundColor),
        title: Text(
          "What's up!",
          style: TextStyle(color: Colors.black),
        ),
        elevation: 0.0,
      ),
      body: Column(),
    );
  }
}

在此处输入图像描述

标签: flutterbackground-colorappbar

解决方案


将应用栏颜色设置为透明:

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text(
          "What's up!",
          style: TextStyle(color: Colors.black),
        ),
        elevation: 0.0,
      ),
      body: Column(),
    );

推荐阅读