make appbar the same color of the body

Question

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

Why not just remove the appBar? Also check [this](https://stackoverflow.com/questions/53080186/make-appbar-transparent-and-show-background-image-which-is-set-to-whole-screen) — tomerpacific, Sep 08 '21 at 17:50

Anas Nadeem · Accepted Answer · 2021-09-08T17:57:33.907

3

set appbar color to transparent:

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

edited Sep 08 '21 at 17:57

answered Sep 08 '21 at 17:50

Anas Nadeem

779
6
10

score 0 · Answer 2 · edited Sep 10 '22 at 02:42

I suggest removing the appBar completely and use the Align widget to place your other widget on top of the page like it was the appBar.

If you do remove the appBar, make sure to place your Scaffold inside a SafeArea widget.

I hope this helps until someone else can show how to make the appBar background color invisible.

return SafeArea(
  child: Scaffold(
    body: ListView(
      children: [
        Align(
          alignment: Alignment.topLeft,
          child: TextButton(),
        )
      ],
    ),
  ),
);

make appbar the same color of the body

2 Answers2