如何在覆盖全屏的背景图像上创建一列小部件？

Question

我正在尝试创建以下内容：

我已经设法使背景图像正常工作，并且还使图像在顶部工作，使用：

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

以上代码产生以下结果：

但是当我将图像 Container() 包裹在 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(),
                    ),
                  ],
                ),
              ),
            ),
          ),

顶部的图像消失，只留下背景

为什么我把它包装在列中时它现在可以工作？

如何获得我想要的外观？

Answer 1

您应该为具有非模糊图像的容器指定大小。

您可以通过指定其高度来实现：

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

或者将其封装在 Expanded 小部件中：

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

在这种情况下，我的偏好是将其封装在 AspectRatio 小部件中：

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