flutterbackground-colorappbar

make appbar the same color of the body


I need to use the property of AppBar, but I need the app bar to be the same color as the body. As if there is no appbar. I used the same color to the body and appBar but the appBar have a darker color!

Material App code:

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(),
    );
  }
}

Home Page Code:

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(),
    );
  }
}

enter image description here


Solution

  • set appbar color to transparent and 0 elevation:

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