How to create app in Flutter with login and register page?

Hello guys how are you? Welcome back to my blog. Today in this blog post, I will tell you How to create app in Flutter with login and register page?

Guys If you are new in Flutter then you must check below two links:

1. Flutter

Now guys here is the complete code snippet link for How to create app in Flutter with login and register page? and please follow carefully:

Creating a Flutter app with login and register pages involves several steps. Here is a basic guide to get you started:

1. Set Up Your Flutter Environment

Ensure you have Flutter and Dart installed. You can follow the official Flutter installation guide for instructions.

2. Create a New Flutter Project

Open your terminal and run:

flutter create my_app
cd my_app

3. Set Up Dependencies

Add the necessary dependencies in your pubspec.yaml file. For authentication, you might use Firebase. Add these dependencies:

dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_auth: latest_version

Replace latest_version with the latest versions of these packages.

Run flutter pub get to install the dependencies.

4. Initialize Firebase

Follow the official Firebase setup guide to integrate Firebase with your Flutter app. This involves setting up a Firebase project and adding your Android and iOS apps to the Firebase project.

5. Create Login and Register Pages

Create new Dart files for your login and register pages.

login_page.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<void> _login() async {
    try {
      await _auth.signInWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      // Navigate to the home page
    } catch (e) {
      print(e);
      // Show error message
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Login")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: "Email"),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: "Password"),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _login,
              child: Text("Login"),
            ),
            TextButton(
              onPressed: () {
                Navigator.pushNamed(context, '/register');
              },
              child: Text("Don't have an account? Register"),
            ),
          ],
        ),
      ),
    );
  }
}

register_page.dart

import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class RegisterPage extends StatefulWidget {
  @override
  _RegisterPageState createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  Future<void> _register() async {
    try {
      await _auth.createUserWithEmailAndPassword(
        email: _emailController.text,
        password: _passwordController.text,
      );
      // Navigate to the login page
    } catch (e) {
      print(e);
      // Show error message
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Register")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: "Email"),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: "Password"),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _register,
              child: Text("Register"),
            ),
            TextButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text("Already have an account? Login"),
            ),
          ],
        ),
      ),
    );
  }
}

6. Set Up Routes

In your main.dart, set up the routes for navigation between login and register pages.

main.dart

import 'package:flutter/material.dart';
import 'login_page.dart';
import 'register_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Auth Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginPage(),
      routes: {
        '/login': (context) => LoginPage(),
        '/register': (context) => RegisterPage(),
      },
    );
  }
}

7. Run Your App

Run your app using the following command:

flutter run

8. Test Your Authentication

Ensure that both the login and register functionalities work correctly by testing them on your emulator or physical device.

9. Improve and Secure Your App

Consider adding more features and security measures, such as form validation, password strength indicators, and secure password storage.

By following these steps, you’ll have a basic Flutter app with login and register functionality.

Note: Friends, In this post, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad because with your views, I will make my next posts more good and helpful.

Jassa

Thanks