Flutter: Navigator Push changes position of my Background Image - flutter

Question

Two Files:
account_page.dart
& cart_page.dart
I used Navigator.push to embed AccountPage() [from account_page.dart] within CartPage() (inside cart_page.dart). When I check the simulation, the background image widget within the Stack() changes position.
How can I make the NavigationPage identical to the original? Is this a bug?
I've tried many things including wrapping the Container() that holds the image in a Positioned(), SizedBox(), 'alignment: Alignment(x,y)', adding a column that shifts the image down. Most of these end with the picture completely disappearing, I erased parameters to make the image free as possible and then tried again to no avail.
Initially, I used 'alignment: Alignment(0.0, -7.0)' to position the image. However, when the page is called using Navigator, the image alignment changes from a negative to a positive causing the position to move the opposite direction.
The other solutions I've thought of require some photoshop, but I don't want to mess with the image unless I really have to.
I believe it has something to do with the image being in a stack and causing some overflow.
Any suggestions would be helpful.
Code:
account_page.dart
import 'package:email_validator/email_validator.dart';
import 'package:flutter/material.dart';
class AccountPage extends StatefulWidget {
const AccountPage({Key? key}) : super(key: key);
#override
_AccountPageState createState() => _AccountPageState();
}
class _AccountPageState extends State<AccountPage> {
bool _obscureText = true;
bool _passswordVisible = false;
void _toggleObscureText() {
setState(() {
_obscureText = !_obscureText;
_passswordVisible = !_passswordVisible;
});
}
String? get _showHideString {
if (!_passswordVisible) {
return "Show";
} else {
return "Hide";
}
}
#override
Widget build(BuildContext context) {
// create a global key that can provide validation
final _formKey = GlobalKey<FormState>();
return Form(
key: _formKey,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
elevation: 0,
),
body: Stack(
children: [
Container(
//*****************AREA OF PROBLEM**************************
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: AssetImage("images/background.jpeg"),
fit: BoxFit.fitWidth,
//---------sets the position of image------------
alignment: Alignment(0.0, -7.0),
),
),
),
SingleChildScrollView(
child: Column(
children: <Widget>[
const Padding(
padding: EdgeInsets.all(30.0),
child: Text(
"Sign in",
style: TextStyle(
fontFamily: "RaleWay",
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
const Padding(
padding: EdgeInsets.only(left: 20, right: 20, bottom: 30),
child: Text(
"Become a member to enjoy exclusive savings on your favorite items.",
style: TextStyle(
fontSize: 16,
),
textAlign: TextAlign.center,
),
),
Stack(
children: <Widget>[
SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 10),
child: Column(
children: [
TextFormField(
validator: (value) {
if (EmailValidator.validate(value!)) {
return null;
} else {
return "Please enter a valid Username";
}
},
autocorrect: false,
autofocus: false,
style: const TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: 'UserName',
border: InputBorder.none,
filled: true,
fillColor: Colors.grey[200],
contentPadding: const EdgeInsets.all(10.0),
),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 25,
),
child: Stack(children: <Widget>[
TextFormField(
autocorrect: false,
autofocus: false,
obscureText: _obscureText,
style: const TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: "Password",
filled: true,
fillColor: Colors.grey[200],
contentPadding:
const EdgeInsets.all(10.0),
),
),
Container(
alignment: Alignment.bottomRight,
child: TextButton(
onPressed: () {
_toggleObscureText();
},
child: Text(_showHideString!),
style: ButtonStyle(
overlayColor:
MaterialStateProperty.all(
Colors.transparent)
// MaterialStateProperty
// .resolveWith<Color?>(
// (Set<MaterialState> states) {
// if (states.contains(
// MaterialState.pressed)) {
// return Theme.of(context)
// .colorScheme
// .primary
// .withOpacity(0);
// }
// }),
),
))
]),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
child: const Text(
"Forgot Password?",
style: TextStyle(
decoration: TextDecoration.underline,
),
),
onPressed: () {},
style: ButtonStyle(
overlayColor:
MaterialStateProperty.all<Color>(
Colors.transparent,
)),
),
],
),
RawMaterialButton(
onPressed: () {
// ignore: todo
// TODO: Checks if username and password is in the system, this will bring to real account page
// if not, replies, please enter a valid username and password
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Submitted!"),
),
);
}
},
constraints:
const BoxConstraints(minWidth: 300),
splashColor: Colors.black12,
fillColor: Colors.black,
padding:
const EdgeInsets.symmetric(vertical: 12),
child: const Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
],
)
],
),
),
],
),
),
);
}
}
cart_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobile_sim_test_1/account_page.dart';
class CartPage extends StatefulWidget {
const CartPage({Key? key}) : super(key: key);
#override
_CartPageState createState() => _CartPageState();
}
class _CartPageState extends State<CartPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text(
"Your Cart",
style: TextStyle(fontSize: 24, color: Colors.black),
),
elevation: 0,
backgroundColor: Colors.white,
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
alignment: Alignment.center,
padding: const EdgeInsets.all(10.0),
child: const Text(
"Your Shopping Bag is Empty",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
RawMaterialButton(
child: const Text("Sign In",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold)),
//*****************NAVIGATOR PUSH**************************
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const AccountPage()),
);
},
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: 20),
padding: const EdgeInsets.all(12.0),
fillColor: Colors.black,
),
Stack(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: const Divider(
color: Colors.grey,
thickness: 2,
),
),
),
Container(
color: Colors.transparent,
width: (MediaQuery.of(context).size.width),
alignment: Alignment.topCenter,
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
width: 40,
child: const Text(
"or",
style: TextStyle(
fontSize: 18,
color: Colors.grey,
),
textAlign: TextAlign.center,
),
),
),
],
),
RawMaterialButton(
onPressed: () {},
child: const Text("Create Account",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
fillColor: Colors.white,
shape: const ContinuousRectangleBorder(
side: BorderSide(color: Colors.black, width: 2),
),
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: 20.0),
padding: const EdgeInsets.all(12.0)),
Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width,
height: 200,
alignment: Alignment.center,
padding: const EdgeInsets.all(20.0),
// child: ,
),
const Text(
"hello",
style: TextStyle(fontSize: 50),
textAlign: TextAlign.center,
),
Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width,
height: 200,
alignment: Alignment.center,
padding: const EdgeInsets.all(20.0),
// child: ,
),
],
),
),
));
}
}
Correctly positioned background image(the black infinity)
Incorrectly positioned background image within a NavigatorPage(the black infinity)