I want to create a LoginPage for my App. I don't want to use a firebase so i tried to fake the login with a validator. First I want to check, if E-Mail and Password is filled with something. Otherwise the Login-Button shouldn't do anything. If E-Mail and Password ist filled, Login-Button navigates to the next Page. But I don't really know how to include the validator in my written code. Hopefully I will find some help.

import 'package:flutter/material.dart';
import 'package:lectureswatcher/widgets/registration.dart';
import 'package:lectureswatcher/widgets/tabs.dart';

bool emailIsFilled = false;
bool passwordIsFilled = false;

class Home extends StatelessWidget {
  const Home({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(vertical: 30),
        width: double.infinity,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft, 
            colors: [
              Colors.blue.shade900, 
              Colors.teal.shade700, 
              Colors.green.shade300,
            ]
          )
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget> [
            SizedBox(height: 80,),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const <Widget> [
                  Text('Login', style: TextStyle(color: Colors.white, fontSize: 50),),
                  SizedBox(height: 10,),
                  Text('Welcome Back', style: TextStyle(color: Colors.white, fontSize: 19),)
                ],
              ),
            ),
            SizedBox(height: 20,),
            Expanded(
              child: Container(
                decoration: const BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(40), 
                    topRight: Radius.circular(40),
                    bottomLeft: Radius.circular(50),
                    bottomRight: Radius.circular(50),),
                ),
                child: Padding(
                  padding: EdgeInsets.all(30),
                  child: Column(
                    children: <Widget> [
                      SizedBox(height: 60,),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(10),
                          boxShadow: [BoxShadow(
                            blurRadius: 20,
                            color: Color.fromARGB(73, 1, 58, 116),
                            offset: Offset(0, 10),
                          )],
                        ),
                        child: Column(
                          children: <Widget> [
                          Container(
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              border: Border(bottom: BorderSide(color: Colors.grey.shade200))
                            ),
                            child: TextFormField(
                              decoration: InputDecoration (
                                hintText: "E-mail",
                                hintStyle: TextStyle(color: Colors.grey),
                                border: InputBorder.none,                                
                              ),
                              validator: (value) {
                                if (value == null || value.isEmpty) {
                                  emailIsFilled == false;
                                  return 'Text is empty';
                                }else if (value != null) {
                                  emailIsFilled == true;
                                  print(emailIsFilled);}
                              },
                            ),
                          ),
                          Container(
                            padding: EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              border: Border(bottom: BorderSide(color: Colors.grey.shade200))
                            ),
                            child: TextFormField(
                              decoration: InputDecoration(
                                hintText: "Password",
                                hintStyle: TextStyle(color: Colors.grey),
                                border: InputBorder.none,
                              ), 
                              validator: (value) {
                                if (value == null || value.isEmpty) {
                                  passwordIsFilled == false;
                                  return 'Text is empty';
                                }else if (value != null) {
                                  passwordIsFilled == true;
                                  print(emailIsFilled);}
                              },
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(height: 60,),
                    Container(
                      child: TextButton(
                        child: Text("Registrate", style: TextStyle(color: Colors.grey),),
                        onPressed: () { Navigator.push(
                          context, MaterialPageRoute(
                            builder: (context) => const Registration(),),);},                            
                        )
                    ),                    
                    SizedBox(height:60,),
                    Container(
                      height: 50,
                      width: 300,
                      margin: EdgeInsets.symmetric(horizontal: 50),
                      decoration: BoxDecoration(
                        borderRadius:BorderRadius.circular(50),
                        color: Color.fromARGB(73, 1, 58, 116),
                      ),
                      child: TextButton(
                        onPressed: () { 
                          if(emailIsFilled == true) {
                            Navigator.pushAndRemoveUntil(
                              context, 
                              MaterialPageRoute(
                              builder:(context) => const Tabs(), maintainState: true),
                              (Route<dynamic> route) => false);
                          ;};},
                        child: Text("Login", style: TextStyle(color: Colors.white, fontSize: 20,fontWeight: FontWeight.bold),)
                      ),
                    ),
                    SizedBox(height:90,),
                  ],
                ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

    

CodePudding user response：

I will recommend using Form widget, wrap your Column or top level widget with From and use a global key to validate it.

Find more on forms/validation

  Widget build(BuildContext context) {
    final _formKey = GlobalKey<FormState>();
....
child: Form(
  key: _formKey,
  child: Column(
    children: <Widget>[

.....

child: TextButton(
      onPressed: () {
        final isValid =
            _formKey.currentState?.validate() ?? false;

        if (isValid) {
          //valid
        }
      },
      child: Text(
        "Login",

Also you can choose TextEditingController

CodePudding user response：

first, declare a TextEditingController like:

TextEditingController textEditingController = TextEditingController();

then assign it to your TextFormField :

TextFormField(
controller: textEditingController,
/* your other properties*/
),

and there you go, you can check if the TextFormField's text is empty:

if(textEditingController.text.isEmpty) {
  /* here is your action code if it's empty*/
 }

you can make multiple TextEditingController for each text field you want and control it.