I have a stack widget like this:

  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.yellow,
        width: double.maxFinite,
        alignment: Alignment.center,
        child: Container(
          padding: const EdgeInsets.all(32),
          constraints: BoxConstraints(maxWidth: min(580, MediaQuery.of(context).size.width)),
          child: Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned(top: -20, left: 470, child: ProfileCard(color: Colors.grey, child: Container())),
              ProfileCard(color: Colors.redAccent.withOpacity(.1), child: Container()),
              Positioned(
                top: -20,
                left: 20,
                child: ProfileCard(
                  color: Colors.white,
                  child: Container(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

but it is not the center of the screen in the web. I also added alignment: AlignmentDirectional.center or center widget but it is not located in center of the screen:

this is ProfileCard:

class ProfileCard extends StatelessWidget {
  final Widget child;
  final Color? color;
  const ProfileCard({Key? key, required this.child, this.color}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: const BoxConstraints(maxWidth: 480, maxHeight: 700),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: color,
      ),
      child: child,
    );
  }
}

CodePudding user response：

Try this layout

   return Scaffold(
      body: Container(
        color: Colors.yellow,
        width: double.maxFinite,
        alignment: Alignment.center,
        child: Container(
          padding: const EdgeInsets.all(32),
          constraints: BoxConstraints(maxWidth: min(580, MediaQuery.of(context).size.width)),
          child: SingleChildScrollView(
            //
            scrollDirection : Axis.horizontal,
            child: Row(
              children: [
                 Stack(
                   children: [
                      ProfileCard(color: Colors.red, child: Container()),
                     Positioned(left:20, bottom:20,child: ProfileCard(color: Colors.grey, child: Container())),
                     
                   ],
                 ),
                
                ProfileCard(
                  color: Colors.white,
                  child: Container(),
                ),
              ],
            ),
          ),
        ),
      ),
    );

if you don't want it to scroll then add physics: NeverScrollableScrollPhysics() to the single child scroll view.. If you are trying to give a shadow then I would suggest you to use a container and add decoration to it using box shadow

CodePudding user response：

The reason you face this issue is that you are set position for your widget and by that you disable stack's alignment for those widget, try this:

 Container(
      color: Colors.yellow,
      width: double.maxFinite,
      alignment: Alignment.center,
      child: Container(
        padding: const EdgeInsets.all(32),
        width: double.maxFinite,
        constraints: BoxConstraints(
            maxWidth: min(580, MediaQuery.of(context).size.width)),
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            Positioned(
              top: 0,
              right: 0,
              child: ProfileCard(color: Colors.grey, child: Container()),
            ),
            Positioned(
              top: 20,
              left: -20,
              child: ProfileCard(
                  color: Colors.redAccent.withOpacity(.1), child: Container()),
            ),
            Positioned(
              top: 0,
              left: 0,
              child: ProfileCard(color: Colors.white, child: Container()),
            ),
          ],
        ),
      ),
    )

and change ProfileCard like this:

class ProfileCard extends StatelessWidget {
  final Widget child;
  final Color? color;
  const ProfileCard({Key? key, required this.child, this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      constraints: BoxConstraints(
          maxWidth: min(580, MediaQuery.of(context).size.width) / 2,
          maxHeight: 700),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: color,
      ),
      child: child,
    );
  }
}

the result would be like this: