CODEWITHSUNDEEP
flutterdartflutter-layout
zakb
zakb

Reputation: 131

Centered layout with Stack and AnimatedSwitcher widget

I am struggling to set up the correct layout for my composite widgets.

It is the Stack widget containing two images each wrapped in the corresponding widget which are applying some visual effects on the images.

The images are supposed to change every couple of seconds and then I am using the AnimatedSwitcher to animate the fading transition between them.

This is how it looks now: bad layout 1 bad layout 2

The result I want to achieve should look like this: good layout

Here is the source code of the corresponding widget:

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

And the full source code of demo project: github - demo project

Upvotes: 0

Views: 596

Answers (1)

Afridi Kayal
Afridi Kayal

Reputation: 2285

I tried it quickly on dartpad.

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

You can refer to the code to follow the structure and make changes. I have left some comments to help understand the code.

Try resizing the window after running the app in dart to see how the image gets positioned for different sizes.

Upvotes: 1

Related Questions