I think I understand the issue, but I don't know how to fix it. Any help would be great.
When I put a background image in my scaffold (using a container) and I use a SingleChildScrollView to stack items onto the container, my screen goes black and my image doesn't show.
The main issue is happening in my login.dart on lines 60-70.
Here's my login.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'authentication.dart';
class LoginScreen extends StatelessWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return WillPopScope(onWillPop: () async => false, child:
Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0,
bottomOpacity: 0.0,
title: IconButton(icon:Image.asset('assets/topImage.png'), iconSize: 65,
onPressed: () {
Navigator.pop(context);
},
),
centerTitle: true,
),
body: const Inputs(),
extendBodyBehindAppBar: true,
)
);
}
}
class Inputs extends StatefulWidget {
const Inputs({Key? key}) : super(key: key);
@override
State<Inputs> createState() => _InputsState();
}
class _InputsState extends State<Inputs> {
final emailInController = TextEditingController();
final passwordInController = TextEditingController();
final emailUpController = TextEditingController();
final passwordUpController = TextEditingController();
String loginTitle = "Login";
bool _isVisible = true;
String buttonText = "Sign In";
String infoText = "Enter your email above and click \"Reset Password\". An email will be sent to reset your password";
@override
void dispose() {
emailInController.dispose();
passwordInController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Stack(children: [
Container(
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/bgImage.jpeg"),
fit: BoxFit.cover,
),
),
),
Column(
children: <Widget>[
const SizedBox(height:120),
// Top Login Text
Center(child: Text(loginTitle, style: const TextStyle(fontSize: 35, fontFamily: 'samarkan')),),
// Email Enter (Sign-In)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: TextField(
controller: emailInController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter valid email id as abcgamil.com'
)
),
),
Visibility(
visible: _isVisible,
child: Column(
children: [
// Sign In Password
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0
),
child: TextField(
controller: passwordInController,
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Secure Password'
),
)
),
// Forgot Password Text
TextButton(
onPressed: (){
setState(() {
loginTitle = "Password Reset";
_isVisible = !_isVisible;
buttonText = "Reset Password";
});
},
child: const Text('Forgot Password', style: TextStyle(color: Colors.black, fontSize: 15),),
),
],
)
),
// Text Above Submit
Visibility(
visible: !_isVisible,
child: Text(infoText,
style: const TextStyle(fontSize: 20, fontFamily: "Georgia"),
textAlign: TextAlign.center)
),
// Sign In Submit
InkWell(
onTap: () {
context.read<AuthenticationService>().signIn(
email: emailInController.text.trim(),
password: passwordInController.text.trim(),);
passwordInController.text = "";
if(!_isVisible) {
context.read<AuthenticationService>().passReset(email: emailInController.text);
setState(() {
_isVisible = true;
buttonText = "Sign In";
loginTitle = "Login";
});
}
emailInController.text = "";
},
child: Ink(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20)
),
child: Center(child: Text(buttonText, style: const TextStyle(color: Colors.white)))
)
),
// Sign Up Text
Divider(height: 40, color: Colors.grey[800], indent: 10, endIndent: 10,),
const Center(child: Text("Sign Up", style: TextStyle(fontSize: 35, fontFamily: 'samarkan'))),
// Sign Up Email
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: TextField(
controller: emailUpController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter valid email id as abcgamil.com'
)
),
),
// Sign Up Password
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0
),
child: TextField(
controller: passwordUpController,
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Secure Password'
),
)
),
// Sign Up Submit
Padding(
padding: const EdgeInsets.only(top: 15),
child: InkWell(
onTap: () {
context.read<AuthenticationService>().signUp(
email: emailUpController.text.trim(),
password: passwordUpController.text.trim(),);
emailInController.text = "";
passwordInController.text = "";
},
child: Ink(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20)
),
child: const Center(child: Text("Sign Up", style: TextStyle(color: Colors.white)))
)
)
),
]
),
])
);
}
}
Here's what happens when I run it: https://drive.google.com/file/d/1QiBH2fZF8S_gIay23kI9QLkCKCtmzxDu/view?usp=sharing
Thanks again!
CodePudding user response：
try changing the widget hierarchy like this
from SingleChildScrollView->stack = [Container,column]
to Stack = [Container,SingleChildScrollView->Column]
class LoginScreen extends StatelessWidget {
const LoginScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
elevation: 0,
bottomOpacity: 0.0,
title: IconButton(
icon: Image.asset('assets/topImage.png'),
iconSize: 65,
onPressed: () {
Navigator.pop(context);
},
),
centerTitle: true,
),
body: const Inputs(),
extendBodyBehindAppBar: true,
));
}
}
class Inputs extends StatefulWidget {
const Inputs({Key? key}) : super(key: key);
@override
State<Inputs> createState() => _InputsState();
}
class _InputsState extends State<Inputs> {
final emailInController = TextEditingController();
final passwordInController = TextEditingController();
final emailUpController = TextEditingController();
final passwordUpController = TextEditingController();
String loginTitle = "Login";
bool _isVisible = true;
String buttonText = "Sign In";
String infoText =
"Enter your email above and click \"Reset Password\". An email will be sent to reset your password";
@override
void dispose() {
emailInController.dispose();
passwordInController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(children: [
Container(
color: Colors.red,
// decoration: const BoxDecoration(
// image: DecorationImage(
// image: AssetImage("assets/images/error.png"),
// fit: BoxFit.cover,
// ),
// ),
),
SingleChildScrollView(
child: Column(children: <Widget>[
const SizedBox(height: 120),
// Top Login Text
Center(
child: Text(loginTitle,
style: const TextStyle(fontSize: 35, fontFamily: 'samarkan')),
),
// Email Enter (Sign-In)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: TextField(
controller: emailInController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter valid email id as abcgamil.com')),
),
Visibility(
visible: _isVisible,
child: Column(
children: [
// Sign In Password
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0),
child: TextField(
controller: passwordInController,
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Secure Password'),
)),
// Forgot Password Text
TextButton(
onPressed: () {
setState(() {
loginTitle = "Password Reset";
_isVisible = !_isVisible;
buttonText = "Reset Password";
});
},
child: const Text(
'Forgot Password',
style: TextStyle(color: Colors.black, fontSize: 15),
),
),
],
)),
// Text Above Submit
Visibility(
visible: !_isVisible,
child: Text(infoText,
style: const TextStyle(fontSize: 20, fontFamily: "Georgia"),
textAlign: TextAlign.center)),
// Sign In Submit
InkWell(
onTap: () {
// context.read<AuthenticationService>().signIn(
// email: emailInController.text.trim(),
// password: passwordInController.text.trim(),);
passwordInController.text = "";
if (!_isVisible) {
// context.read<AuthenticationService>().passReset(email: emailInController.text);
setState(() {
_isVisible = true;
buttonText = "Sign In";
loginTitle = "Login";
});
}
emailInController.text = "";
},
child: Ink(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20)),
child: Center(
child: Text(buttonText,
style: const TextStyle(color: Colors.white))))),
// Sign Up Text
Divider(
height: 40,
color: Colors.grey[800],
indent: 10,
endIndent: 10,
),
const Center(
child: Text("Sign Up",
style: TextStyle(fontSize: 35, fontFamily: 'samarkan'))),
// Sign Up Email
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: TextField(
controller: emailUpController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Email',
hintText: 'Enter valid email id as abcgamil.com')),
),
// Sign Up Password
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0),
child: TextField(
controller: passwordUpController,
obscureText: true,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Secure Password'),
)),
// Sign Up Submit
Padding(
padding: const EdgeInsets.only(top: 15),
child: InkWell(
onTap: () {
// context.read<AuthenticationService>().signUp(
// email: emailUpController.text.trim(),
// password: passwordUpController.text.trim(),);
emailInController.text = "";
passwordInController.text = "";
},
child: Ink(
height: 50,
width: 250,
decoration: BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.circular(20)),
child: const Center(
child: Text("Sign Up",
style: TextStyle(color: Colors.white)))))),
]),
),
]);
}
}
CodePudding user response：
You are using
Scaffold(backgroundColor: Colors.transparent,
Try to provide some color or use default grey color
return WillPopScope(
onWillPop: () async => false,
child: Scaffold(
// backgroundColor: Colors.transparent, // will get default grey
appBar: AppBar(
And change the widget decoration like
- Stack
- BackgroundImage,
- SingleChildScrollView
- Column
- Others