How to create a Column of widgets on top of a background image that covers full screen?

user_843036 0
Viewed 286

I'm trying to create the following:

enter image description here

I've managed to get the background image work and also got the image on top to work, using:

Scaffold(
          appBar: AppBar(..),
          body: Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: MemoryImage(
                    _selectedImage
                ),
                fit: BoxFit.cover,
              ),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                color: Colors.black.withOpacity(0.4),
                // height: 450,
                child: Stack(
                  children: [
                    Container(
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        image: DecorationImage(
                          image: MemoryImage(
                              _finalImage == null ? _selectedImage: img.encodePng(_finalImage)
                          ),
                          fit: BoxFit.cover,
                        ),
                      ),
                      margin: EdgeInsets.symmetric(
                        horizontal: 30,
                        vertical: 80 - 80 * 0.6,
                      ),
                    ),
                    Center(
                      child: _working ? _Image2Widget() : Container(),
                    ),
                    Center(
                      child: _working2 ? _Image3Widget() : Container(),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );

The above code produces the following:

enter image description here

But when I wrap my image Container() inside a Column():

child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                color: Colors.black.withOpacity(0.4),
                // height: 450,
                child: Stack(
                  children: [
                    Column(
                      children: [
                        Container(
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                            image: DecorationImage(
                              image: MemoryImage(
                                  _finalImage == null ? _selectedImage: img.encodePng(_finalImage)
                              ),
                              fit: BoxFit.cover,
                            ),
                          ),
                          margin: EdgeInsets.symmetric(
                            horizontal: 30,
                            vertical: 80 - 80 * 0.6,
                          ),
                        ),
                      ],
                    ),
                    Center(
                      child: _working ? _Image2Widget() : Container(),
                    ),
                    Center(
                      child: _working2 ? _Image3Widget() : Container(),
                    ),
                  ],
                ),
              ),
            ),
          ),

The image on top disappears leaving behind the background only

enter image description here

Why does it now work when I wrap it in column?

How do I get my desired look?

flutter-layout dart flutter
1 Answers

You should give a size to the Container with the non-blurred image.

You could do that by specifying its height:

enter image description here

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('spiders/6.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                padding: EdgeInsets.all(30.0),
                color: Colors.black.withOpacity(0.4),
                child: Column(
                  children: [
                    Container(
                      height: 300,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                        image: DecorationImage(
                          image: AssetImage('spiders/6.jpg'),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    const SizedBox(height: 30.0),
                    AspectRatio(
                      aspectRatio: 3,
                      child: Container(
                        padding: EdgeInsets.all(16.0),
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(.4),
                          borderRadius: BorderRadius.circular(15),
                        ),
                        child: Center(
                          child: Text('Spiders are cool...',
                              style: TextStyle(
                                  color: Colors.white, fontSize: 24.0)),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Or by encapsulating it inside an Expanded widget:

enter image description here

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('spiders/6.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                padding: EdgeInsets.all(30.0),
                color: Colors.black.withOpacity(0.4),
                child: Column(
                  children: [
                    Expanded(
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          image: DecorationImage(
                            image: AssetImage('spiders/6.jpg'),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 30.0),
                    AspectRatio(
                      aspectRatio: 3,
                      child: Container(
                        padding: EdgeInsets.all(16.0),
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(.4),
                          borderRadius: BorderRadius.circular(15),
                        ),
                        child: Center(
                          child: Text('Spiders are cool...',
                              style: TextStyle(
                                  color: Colors.white, fontSize: 24.0)),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

My preference, in this case, would be to encapsulate it inside an AspectRatio widget:

enter image description here

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('spiders/6.jpg'),
                fit: BoxFit.cover,
              ),
            ),
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                padding: EdgeInsets.all(30.0),
                color: Colors.black.withOpacity(0.4),
                child: Column(
                  children: [
                    AspectRatio(
                      aspectRatio: 1,
                      child: Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          image: DecorationImage(
                            image: AssetImage('spiders/6.jpg'),
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                    ),
                    const SizedBox(height: 30.0),
                    AspectRatio(
                      aspectRatio: 3,
                      child: Container(
                        padding: EdgeInsets.all(16.0),
                        decoration: BoxDecoration(
                          color: Colors.white.withOpacity(.4),
                          borderRadius: BorderRadius.circular(15),
                        ),
                        child: Center(
                          child: Text('Spiders are cool...',
                              style: TextStyle(
                                  color: Colors.white, fontSize: 24.0)),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
user_101185050
Related