Login function with Dart (Flutter) and SQFLite

Question

I am new to flutter (1 month learning) and i have a doubt about how can i make a function that validates if the password and user are registrated in my database.

I am using SQFLite and Path as package, i can store data in my db but i dont know how to make a function for my loggin button. I have 5 files, main, login_page, home_page, user and database_helper. Can you guys please save me on this? Im strugglin for 2 days, i already read the documentation but man its hard. Here is my code:

login_page.dart

import 'package:login_page/app/db/database_helper.dart';

class LoginPage extends StatelessWidget {
  var dataHelp;
  final dbHelper = DatabaseHelper.instance;
  final userController = TextEditingController();
  final passController = TextEditingController();

  LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Simple Login Page'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 30),
                  child: TextFormField(
                    controller: userController,
                    decoration: const InputDecoration(
                      hintText: 'Usuário',
                    ),
                  ),
                ),
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 30),
                  child: TextFormField(
                    controller: passController,
                    decoration: const InputDecoration(hintText: 'Password'),
                  ),
                ),
                const SizedBox(height: 50),
                ElevatedButton(
                  onPressed: () {
                    _insert();
                  },
                  child: const Text('Login'),
                ),
                const SizedBox(height: 50),
                ElevatedButton(
                  onPressed: () {
                    _consult();
                  },
                  child: const Text('Consulta'),
                ),
              ],
            ),
          ),
        ));
  }

  void _insert() async {
    Map<String, dynamic> row = {
      DatabaseHelper.columnUser: userController.text,
      DatabaseHelper.columnPass: passController.text
    };

    final id = await dbHelper.insert(row);
    print('Adicionado $id');
  }

  void _consult() async {
    final todasLinhas = await dbHelper.queryAllRows();
    print('Consulta todas as linhas:');
    for (var row in todasLinhas) {
      print(row);
    }
  }
}

database_helper.dart

import 'package:flutter/material.dart';
import 'package:login_page/app/db/database_helper.dart';

class LoginPage extends StatelessWidget {
  var dataHelp;
  final dbHelper = DatabaseHelper.instance;
  final userController = TextEditingController();
  final passController = TextEditingController();

  LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Simple Login Page'),
        ),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 30),
                  child: TextFormField(
                    controller: userController,
                    decoration: const InputDecoration(
                      hintText: 'Usuário',
                    ),
                  ),
                ),
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 30, vertical: 30),
                  child: TextFormField(
                    controller: passController,
                    decoration: const InputDecoration(hintText: 'Password'),
                  ),
                ),
                const SizedBox(height: 50),
                ElevatedButton(
                  onPressed: () {
                    _insert();
                  },
                  child: const Text('Login'),
                ),
                const SizedBox(height: 50),
                ElevatedButton(
                  onPressed: () {
                    _consult();
                  },
                  child: const Text('Consulta'),
                ),
              ],
            ),
          ),
        ));
  }

  void _insert() async {
    Map<String, dynamic> row = {
      DatabaseHelper.columnUser: userController.text,
      DatabaseHelper.columnPass: passController.text
    };

    final id = await dbHelper.insert(row);
    print('Adicionado $id');
  }

  void _consult() async {
    final todasLinhas = await dbHelper.queryAllRows();
    print('Consulta todas as linhas:');
    for (var row in todasLinhas) {
      print(row);
    }
  }
}

and here is my user.dart, inside model folder:

import 'dart:convert';

// ignore_for_file: public_member_api_docs, sort_constructors_first
class User {
  final int? id;
  final String user;
  final String password;

  User({
    this.id,
    required this.user,
    required this.password,
  });

  Map<String, dynamic> toMap() {
    return <String, dynamic>{
      'id': id,
      'user': user,
      'password': password,
    };
  }

  factory User.fromMap(Map<String, dynamic> map) {
    return User(
      id: map['id'] != null ? map['id'] as int : null,
      user: map['user'] as String,
      password: map['password'] as String,
    );
  }

  String toJson() => json.encode(toMap());

  factory User.fromJson(String source) =>
      User.fromMap(json.decode(source) as Map<String, dynamic>);
}

Answer 1

Login is nothing you get from Flutter, so you won't find anything in the documentation directly. Some packages provide you this like Beamer, but with vanilla Flutter, you need to do it yourself. Basically: You can provide builders for routes in Flutter (read more here)

In your main.dart or wherever you configure your routes that need to be secured, you have to check your application state if a user is currently logged in. If so, display the secured content. If not, display the user the login form.

For a simple login-system, a boolean isLoggedIn somewhere in a service class is sufficient. Your registration page would update this field to true and redirect the user afterwards, the route builder will pick up that isLoggedIn is true now and display the secured content to the user.