0

I'm trying to have a background image on my Flutter app but I have not been able to make it so far. I have the following structure:

  • AppBar with 2 tabs
  • Some content inside each Tab

enter image description here

I have achieved this with the following code:

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            bottom: const TabBar(
              indicatorColor: Colors.red,
              tabs: [
                Tab(text: 'First Tab'),
                Tab(text: 'Second Tab'),
              ],
            ),
            title: const Text('First Tab'),
          ),
          body: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage("assets/images/tree.jpg"),
                fit: BoxFit.cover,
              ),
            ),
            child: const TabBarView(
              children: [
                HomeScreen(), // contains the card with some text etc.
                Icon(Icons.directions_transit),
              ],
            ),
          ),
        ),
      ),
    );
  }

I read that to make the AppBar transparent and have the same background image, I should add the following:

  • To the Scaffold: extendBodyBehindAppBar: true
  • To the AppBar: backgroundColor: Colors.transparent

But when I add them, the content inside the Tab slides under the AppBar tabs like so:

enter image description here

What I want to achieve is keeping them the same as the first picture and having the AppBar transparent.

Any suggestions on how to fix this or any other solution is welcome.

Ergi Nushi
  • 837
  • 1
  • 6
  • 17
  • backgroundColor: Colors.transparent this one is enough to transparent the appbar. You should remove extendBodyBehindAppBar: true. – Timur Turbil Mar 08 '22 at 14:55
  • @Timurturbil then it will only make the AppBar transparent and it will not have the background image. – Ergi Nushi Mar 08 '22 at 15:16
  • I got you now, if you want to cover your image all screen, you need to wrap your scaffold with a stack and add it an image. In your example you just add the image to body. that is why appbar looks like this. Here is how it is done; https://stackoverflow.com/questions/54241753/background-image-for-scaffold – Timur Turbil Mar 08 '22 at 15:29
  • This works exactly as I wanted. I have used Stack for a thing similar to this but I couldn't make it work for this. Thank you! – Ergi Nushi Mar 08 '22 at 16:09
  • If you have your answer now, please could we have the person who posted the answer as a comment post it again as an actual answer which you can accept then? That way this question will be marked as closed. – Vandad Nahavandipoor Mar 09 '22 at 07:42

0 Answers0