I have a vector that I want to be part of the background of my screen but I don't know how will I implement it. I tried inserting image.asset in the children but it is being placed above my elements in the screen. Pease help. This is my existing code right now:
import 'package:ehatid_driver_app/signup.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'Welcome/components/body.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({
Key? key,
}) : super(key: key);
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
//text controller
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
Future signIn() async {
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: _emailController.text.trim(),
password: _passwordController.text.trim(),
);
}
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFFFFCEA),
body: SafeArea(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset("assets/images/illus14.png",
width: 250
),
Text(
"Sign in to your account",
style: TextStyle(fontFamily: 'Montserrat', fontSize: 28, letterSpacing: -2, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
Text(
"Welcome Back! Ready for your next ride?", textAlign: TextAlign.center,
style: TextStyle(fontFamily: 'Montserrat', fontSize: 13, color: Color(0xff272727), letterSpacing: -0.5, fontWeight: FontWeight.w500),
),
SizedBox(height: 30),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Color(0xffeeeeee),
blurRadius: 10,
offset: Offset(0,4)
),
],
borderRadius: BorderRadius.circular(15),
),
child: Padding(
padding: const EdgeInsets.only(left: 20),
child: TextField(
controller: _emailController,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Email",
),
),
),
),
),
SizedBox(height:10),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: TextField(
controller: _passwordController,
obscureText: true,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(15),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFFFED90F),),
borderRadius: BorderRadius.circular(15),
),
hintText: "Password",
fillColor: Colors.white,
filled: true,
),
),
),
SizedBox(height: 20),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25),
child: GestureDetector(
onTap: signIn,
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Color(0xFFFED90F),
borderRadius: BorderRadius.circular(50),
),
child: Center(
child: Text(
"Sign in",
style: TextStyle(
color: Colors.white, fontFamily: 'Montserrat', fontSize: 16
),
),
),
),
),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Don't have an account yet?", style: TextStyle(
color: Color(0xFF494949), fontFamily: 'Montserrat', fontSize: 16, letterSpacing: -0.5, fontWeight: FontWeight.w500
),
),
TextButton(
onPressed: () {
Navigator.pushReplacement(context, MaterialPageRoute(
builder: (_) => SignUpPage(),
),
);
},
child: Text("Register", style: TextStyle(fontFamily: 'Montserrat', fontSize: 16,
letterSpacing: -0.5, fontWeight: FontWeight.w600,
decoration: TextDecoration.underline, color:Color(0xFFFEDF3F),
),
),
),
],
),
],
),
),
),
),
);
}
}
This the output of the above code:
However, this is what I wanted it to look like. That yellow vector is an image, btw.