Container is not center aligned in stack - flutter

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