Flutter Login Registration Form – In this article i will explain how to develop flutter login and registration form with validation for android application development. Everybody like to use mobile application in their mobile phones. When choose flutter dart for your app development then your choice is good because flutter has more predefined templates when compared to java (Android Studio).

Most of developer now migrate from java to flutter dart. Its native we can also develop both of android and iOS application in single language of dart. Dart programming language developed and maintained by Google.

When use flutter for app development it take more less time and perfect material design layout and more features compared to java. Java take more time for app development but the speed also high like flutter. But flutter impress more developers rather than java android studio development.

Create Project

Okay lets start. Here i have choose Visual Studio Code IDE for android application development. Because in this editor lightweight when compared to the Android Studio IDE. Android studio take more time for project loading and have minimum 4GB physical ram to execute the Android studio software but visual studio not like that 512MB RAM also enough to execute the VS code IDE software on your computer laptop machine.

If you don’t have Visual Studio Code software click to Download VS Code software. Most of developers recommend VS code most of features we can use this IDE like Android studio.

If you are beginner and don’t know how to create flutter projects and install further dependency library files, watch my flutter tutorial beginner videos to know about flutter things Click here to watch videos.

Create Dart Files

Here i will create two dart files. one for homepage and another one is combine both of flutter login form and flutter register form with validation. You can give any name for your dart file. The default one is main.dart, code like

import 'package:flutter/material.dart';
import 'package:flutter_login/sharedloginregister.dart';

void main() => runApp(new MaterialApp(
      home: Login(),
    ));

After that we have to create another one file is called sharedloginregister.dart then add the following below code,

import 'dart:convert';

import 'package:bottom_navy_bar/bottom_navy_bar.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:http/http.dart' as http;
import 'package:shared_preferences/shared_preferences.dart';

class Login extends StatefulWidget {
  @override
  _LoginState createState() => _LoginState();
}

enum LoginStatus { notSignIn, signIn }

class _LoginState extends State {
  LoginStatus _loginStatus = LoginStatus.notSignIn;
  String email, password;
  final _key = new GlobalKey();

  bool _secureText = true;

  showHide() {
    setState(() {
      _secureText = !_secureText;
    });
  }

  check() {
    final form = _key.currentState;
    if (form.validate()) {
      form.save();
      login();
    }
  }

  login() async {
    final response = await http
        .post("http://yourwebsite.com/flutter_app/api_verification.php", body: {
      "flag": 1.toString(),
      "email": email,
      "password": password,
      "fcm_token": "test_fcm_token"
    });

    final data = jsonDecode(response.body);
    int value = data['value'];
    String message = data['message'];
    String emailAPI = data['email'];
    String nameAPI = data['name'];
    String id = data['id'];

    if (value == 1) {
      setState(() {
        _loginStatus = LoginStatus.signIn;
        savePref(value, emailAPI, nameAPI, id);
      });
      print(message);
      loginToast(message);
    } else {
      print("fail");
      print(message);
      loginToast(message);
    }
  }

you can get the full source code of flutter login and register form on end of this article.

Database Connection

In the back-end I have to choose MySQL for store and retrieve the data when the users are access our application. PHP used for get the server side data to communicate with MySQL server or you will be use node.js server for better fast experience. But PHP also good so use this scripting to communicate with client to server protocols.

Also Read – Flutter Apps Source Code

Create one PHP file and write code for connect the local server and database. Here I give the name for conn.php and add the following PHP MySQL database and server connection code,

Screenshot Output – Flutter Login Registration form

In below i will attach the output screenshot for login registration form flutter PHP MySQL. The snaps are,

Download Source Code

I have not explain full source code of flutter login register form project, spaces are not enough so here attach the full source code dart login registration flutter PHP MySQL hybrid mobile application.