使用 Stack 和 AnimatedSwitcher 小部件的居中布局

Question

我正在努力为我的复合小部件设置正确的布局。

它是包含两个图像的 Stack 小部件，每个图像都包裹在相应的小部件中，这些小部件正在对图像应用一些视觉效果。

图像应该每隔几秒更改一次，然后我使用 AnimatedSwitcher 为它们之间的淡入淡出过渡设置动画。

现在是这样的：

我想要达到的结果应该是这样的：

对应插件的源代码如下：

import 'dart:ui';
import 'package:demo_flutter_fading_images/themes/style.dart';
import 'package:flutter/material.dart';


class ImagesStack extends StatefulWidget {
  final String imagePath;

  const ImagesStack({required Key key, required this.imagePath}) : super(key: key);

  @override
  State<ImagesStack> createState() => _ImagesStackState();
}

class _ImagesStackState extends State<ImagesStack> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Stack(children: <Widget>[
        ImageFiltered(
          imageFilter: ImageFilter.blur(
            sigmaX: 6,
            sigmaY: 6,
          ),
          child: Container(
            // constraints: const BoxConstraints.expand(),
            constraints: BoxConstraints.tight(const Size(360, 500)),
            decoration: BoxDecoration(
              image: DecorationImage(
                alignment: Alignment.center,
                image: AssetImage(widget.imagePath),
                fit: BoxFit.fill,
              ),
            ),
          ),
        ),
        Container(
          margin: const EdgeInsets.fromLTRB(8, 4, 8, 4),
          decoration: frontImageBoxDecoration,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Image.asset(
              widget.imagePath,
              fit: BoxFit.fill,
            ),
          ),
        ),
      ]),
    );
  }
}

以及demo项目的完整源码： github - demo project

Answer 1

我在dartpad上很快试了一下

https://dartpad.dev/?id=3c24c716a9844b706662cb495675f56d

您可以参考代码按照结构进行修改。我留下了一些评论来帮助理解代码。

在 dart 中运行应用程序之后尝试调整 window 的大小，以查看图像如何定位不同的大小。

使用 Stack 和 AnimatedSwitcher 小部件的居中布局

Centered layout with Stack and AnimatedSwitcher widget

dart

flutter

flutter-layout