Container is not center aligned in stack

Question

I have simple application, and I try to center a circular image in the screen with the following:

main.dart:

import 'package:flutter/material.dart';

import './widgets/mashoff.dart';

void main() => runApp(_MyApp());

class _MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          toolbarHeight: 0,
          backgroundColor: Colors.black, // status bar color
        ),
        body: WMashoff(),
      ),
    );
  }
}

WMashoff widget:

import 'package:flutter/material.dart';

import './mashoff-item.dart';

class WMashoff extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    WMashoffItem(
                      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkMKry-Vcp7oU4erjWxG4pXhfva0weO4n4_g&usqp=CAU',
                      Alignment.topLeft,
                    ),
                    WMashoffItem(
                      'https://hotforsecurity.bitdefender.com/wp-content/uploads/2019/12/pexels-photo-1090393-1024x682.jpg',
                      Alignment.topRight,
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    WMashoffItem(
                      'https://images.indianexpress.com/2019/07/tiktok.jpg',
                      Alignment.bottomLeft,
                    ),
                    WMashoffItem(
                      'https://www.gannett-cdn.com/-mm-/b4f5f67b6112c6935b66ff0cbffc204774fdc87c/c=0-0-3022-1700/local/-/media/2020/08/18/PalmBeachPost/ghows-LK-200819292-73c48e6d.jpg?width=660&height=372&fit=crop&format=pjpg&auto=webp',
                      Alignment.bottomRight,
                    ),
                  ],
                ),
              ),
            ],
          ),
          Container(
            height: 70,
            width: 70,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              boxShadow: <BoxShadow>[
                const BoxShadow(
                  color: Colors.black87,
                  spreadRadius: 5,
                  blurRadius: 3,
                  offset: const Offset(0, 3), // changes position of shadow
                ),
              ],
              image: const DecorationImage(
                image: const NetworkImage('http://i.imgur.com/QSev0hg.jpg'),
                fit: BoxFit.cover,
              ),
              borderRadius: const BorderRadius.all(const Radius.circular(50)),
              border: Border.all(
                color: Colors.white,
                width: 4,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

WMashoffItem widget:

import 'package:flutter/material.dart';

class WMashoffItem extends StatelessWidget {
  final Alignment _favoriteIconAlignment;
  final String _img;

  WMashoffItem(
    this._img,
    this._favoriteIconAlignment,
  );

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Image.network(
            this._img,
            fit: BoxFit.cover,
          ),
          Container(
            alignment: this._favoriteIconAlignment,
            child: const IconButton(
              iconSize: 50,
              icon: Icon(
                Icons.favorite_border,
                color: Colors.red,
              ),
              onPressed: null,
            ),
          ),
        ],
      ),
    );
  }
}

Please focus the 2nd stack child in the WMashoff widget code (The Container element).

Once I give this container height and width, it is no more centered.

This is the result:

As you can see the image is in the top left. But I want it in the center. Where am I wrong?

Answer 1

When you do:

Container(
  height: 70,
  width: 70,
  alignment: Alignment.center,
  child: MyWidget(),
),

You create a 70x70 Container and align its child in the center.

Now, what you want is to align your container at the center of the Stack:

Try this:

Stack(
  children: <Widget>[
    Column([...]),
    Align(
      alignment: Alignment.center,
      child: Container(
        height: 70,
        width: 70,
        alignment: Alignment.center,
        child: MyWidget(),
      ),
    ),
  ],
),