Flutter help

[Oden Sama]

ang gusto ko gawin dito ay flexible sa kahit anong screen size ng device ang login page, fixed postion lahat


// ignore_for_file: use_build_context_synchronously, unused_import, prefer_const_constructors
import 'package:colorapp/pages/forgotpasswordpage.dart';
import 'package:colorapp/services/auth_service.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:lottie/lottie.dart';
class LoginPage extends StatefulWidget {
final VoidCallback showRegisterPage;
const LoginPage({Key? key, required this.showRegisterPage}) : super(key: key);
Override
State<LoginPage> createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
// text controllers
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
Future SignIn() async {
// loading circle
showDialog(context: context, builder: (context) {
return Center(child: CircularProgressIndicator());
},
);
await FirebaseAuth.instance.signInWithEmailAndPassword(
email: _emailController.text.trim(),
password: _passwordController.text.trim()
);
Navigator.of(context).pop();
}
Override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
super.dispose();
}

Override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
body: SafeArea(
child: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(child: Lottie.asset('assets/images/1.json'),
width: 350,
height: 350,),

//hello again
Text('Welcome back, you\'ve been missed!',
style: TextStyle(
fontSize: 20,
),
),

SizedBox(height: 50,),

//email textfield
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: TextField(
controller: _emailController,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.deepPurple),
borderRadius: BorderRadius.circular(12),
),
hintText: 'Email',
fillColor: Colors.grey[200],
filled: true,
),
),
),

SizedBox(height: 10),
//password
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: TextField(
obscureText: true,
controller: _passwordController,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.deepPurple),
borderRadius: BorderRadius.circular(12),
),
hintText: 'Password',
fillColor: Colors.grey[200],
filled: true,
),
),
),
SizedBox(height: 10),

//forgot password
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) {
return forgotPasswordPage();
},
),
);
},
child: Text('Forgot Password?',
style: TextStyle(
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
),),
),
],
),
),
SizedBox(height: 10),
//sign in
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: GestureDetector(
onTap: SignIn,
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(color: Colors.deepPurple,
borderRadius: BorderRadius.circular(12)),
child: Center(
child: Text('Sign In',
style: TextStyle(color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
),
),
),
),

SizedBox(height: 25,),

//not a member? register now
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Don\'t have account?', style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
GestureDetector(
onTap: widget.showRegisterPage,
child: Text(' Register Now',
style: TextStyle(
color: Colors.blueAccent,
fontWeight: FontWeight.bold,
),
),
),
],
),
],
),
),
),
),
);
}
}

 

[🤖]

Ang code na ibinahagi mo ay naglalaman ng isang login page na sumusunod sa mga sumusunod na tampok:

1. Naglalaman ng mga text controllers para sa email at password fields.
2. Mayroong isang "SignIn" function na nagtatangkang mag-sign in gamit ang email at password na ibinigay at ginagamit ang FirebaseAuth para sa pag-authenticate.
3. Naglalaman ng mga text fields para sa email at password na may kasamang mga estilo at dekorasyon.
4. Mayroong isang "Forgot Password?" na link na nagre-redirekta sa user sa isang "forgotpasswordpage" kapag na-tap.
5. Naglalaman din ito ng isang "Sign In" button na nagtatangkang tawagan ang "SignIn" function kapag na-tap.
6. Naglalaman din ito ng isang "Don't have account? Register Now" na link na nagre-redirekta sa user sa pahinang nagrerehistro kapag na-tap.

Ang code na ibinahagi mo ay hindi naka-optimize para sa iba't ibang laki ng screen. Upang gawin itong flexible sa lahat ng mga laki ng screen ng device, maaaring subukan mong gamitin ang mga sumusunod na mga hakbang:

1. I-wrap ang mga elemento ng widget sa isang "Flexible" o "Expanded" widget upang mapanatili ang mga layout na sumusunod sa espasyo na ibinigay ng magulang widget.
2. Gamitin ang "MediaQuery" upang makakuha ng impormasyon tungkol sa laki ng screen ng device at i-adjust ang mga sukat at estilo batay sa mga ito.
3. Pag-aralan ang paggamit ng "LayoutBuilder" upang mag-adjust ng mga layout batay sa available na espasyo sa screen.
4. Iwasan ang paggamit ng hard-coded na sukat at mga estilo at piliin ang mga sukat at estilo na ayon sa mga proportion ng screen.
5. Pag-aralan ang paggamit ng "ResponsiveBuilder" o mga katulad na package na nagbibigay-daan sa iyo na gawing madaling mag-adjust ng mga layout batay sa iba't ibang mga laki ng screen.

Sana nakatulong ito sa iyo! Kung mayroon ka pang mga katanungan, huwag mag-atubiling itanong.

 

[Venator Praemii]

Ang code na ibinahagi mo ay naglalaman ng isang login page na sumusunod sa mga sumusunod na tampok:

1. Naglalaman ng mga text controllers para sa email at password fields.
2. Mayroong isang "SignIn" function na nagtatangkang mag-sign in gamit ang email at password na ibinigay at ginagamit ang FirebaseAuth para sa pag-authenticate.
3. Naglalaman ng mga text fields para sa email at password na may kasamang mga estilo at dekorasyon.
4. Mayroong isang "Forgot Password?" na link na nagre-redirekta sa user sa isang "forgotpasswordpage" kapag na-tap.
5. Naglalaman din ito ng isang "Sign In" button na nagtatangkang tawagan ang "SignIn" function kapag na-tap.
6. Naglalaman din ito ng isang "Don't have account? Register Now" na link na nagre-redirekta sa user sa pahinang nagrerehistro kapag na-tap.

Ang code na ibinahagi mo ay hindi naka-optimize para sa iba't ibang laki ng screen. Upang gawin itong flexible sa lahat ng mga laki ng screen ng device, maaaring subukan mong gamitin ang mga sumusunod na mga hakbang:

1. I-wrap ang mga elemento ng widget sa isang "Flexible" o "Expanded" widget upang mapanatili ang mga layout na sumusunod sa espasyo na ibinigay ng magulang widget.
2. Gamitin ang "MediaQuery" upang makakuha ng impormasyon tungkol sa laki ng screen ng device at i-adjust ang mga sukat at estilo batay sa mga ito.
3. Pag-aralan ang paggamit ng "LayoutBuilder" upang mag-adjust ng mga layout batay sa available na espasyo sa screen.
4. Iwasan ang paggamit ng hard-coded na sukat at mga estilo at piliin ang mga sukat at estilo na ayon sa mga proportion ng screen.
5. Pag-aralan ang paggamit ng "ResponsiveBuilder" o mga katulad na package na nagbibigay-daan sa iyo na gawing madaling mag-adjust ng mga layout batay sa iba't ibang mga laki ng screen.

Sana nakatulong ito sa iyo! Kung mayroon ka pang mga katanungan, huwag mag-atubiling itanong.

Thank you, bot.

 

[Katipunero-]

Format your code correctly, para matulungan ka din ng ibang user.
Try mo gumamit ng triple ` or gamitin mo yung "insert code"