Cara Membuat Login dan Prosesnya di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat login dan prosesnya di flutter menggunakan data api dari dummyjson.com. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Pada tutorial kali ini kita akan membuat fitur login dengan menggunakan data api yang bersumber dari dummyjson.com/users. Api tersebut berisi banyak sekali data user mulai dari id, nama, username, email, password dan masih banyak lainnya. Kali ini kita akan menggunakan beberapa data saja. 

Prosesnya kita akan membuat halaman login, jika data user ditemukan maka akan diarahkan ke halaman home. Di halaman home berisi data nama, email, username, poto, umur dan beberapa data lainnya. Untuk melihat hasilnya kalian bisa langsung scroll ke bagian paling bawah pada tutorial kita kali ini.

Baca Artikel Lain ✨

📰 1. Cara Paling Mudah Membuat Login Google di Flutter read more

📰 2. CRUD Flutter + PHP + MySQL Part 2, Membuat Mobile App read more

📰 3. Membuat Aplikasi CRUD dengan Flutter dan SQFlite read more

Cara Membuat Custom Login di Flutter

1. Buatlah sebuah project flutter baru dengan nama flutter_login_app.

2. Buka file pubspec.yaml lalu tambahkan http: ^0.13.4 cara menambahkannya seperti gambar di bawah ini.

Menambahkan Package

3. Buatlah sebuah file baru di dalam folder lib dengan nama user.dart dan ikuti script di bawah ini. File ini kita gunakan untuk membuat model data atau struktur datanya.

class User {
  final int id;
  final String firstName;
  final String lastName;
  final String maidenName;
  final int age;
  final String gender;
  final String email;
  final String phone;
  final String username;
  final String password;
  final String birthDate;
  final String image;

  User({
    required this.id,
    required this.firstName,
    required this.lastName,
    required this.maidenName,
    required this.age,
    required this.gender,
    required this.email,
    required this.phone,
    required this.username,
    required this.password,
    required this.birthDate,
    required this.image,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      firstName: json['firstName'],
      lastName: json['lastName'],
      maidenName: json['maidenName'],
      age: json['age'],
      gender: json['gender'],
      email: json['email'],
      phone: json['phone'],
      username: json['username'],
      password: json['password'],
      birthDate: json['birthDate'],
      image: json['image'],
    );
  }
}

4. Buatlah sebuah file baru di dalam folder lib dengan nama login_page.dart dan ikuti script di bawah ini. File ini akan menampilkan halaman login yang berisi form email dan password.

  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  import 'dart:convert';
  
  import 'user.dart';
  import 'home_page.dart';
  
  class LoginPage extends StatefulWidget {
    @override
    _LoginPageState createState() => _LoginPageState();
  }
  
  class _LoginPageState extends State<LoginPage> {
    TextEditingController emailController = TextEditingController();
    TextEditingController passwordController = TextEditingController();
  
    Future<User?> loginUser(String email, String password) async {
      final response = await http.get(Uri.parse('https://dummyjson.com/users'));
      if (response.statusCode == 200) {
        final jsonData = json.decode(response.body)['users'];
        print(jsonData);
        for (var user in jsonData) {
          if (user['email'] == email && user['password'] == password) {
            return User.fromJson(user);
          }
        }
      }
      return null;
    }
  
    void handleLogin() async {
      String email = emailController.text;
      String password = passwordController.text;
  
      User? user = await loginUser(email, password);
  
      if (user != null) {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(user: user),
          ),
        );
      } else {
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Login Gagal'),
            content: Text('Email atau password salah.'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: Text('OK'),
              ),
            ],
          ),
        );
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                controller: emailController,
                decoration: InputDecoration(
                  labelText: 'Email',
                ),
              ),
              SizedBox(height: 20.0),
              TextField(
                controller: passwordController,
                obscureText: true,
                decoration: InputDecoration(
                  labelText: 'Password',
                ),
              ),
              SizedBox(height: 20.0),
              ElevatedButton(
                onPressed: handleLogin,
                child: Text('Login'),
              ),
            ],
          ),
        ),
      );
    }
  }

5. Buatlah sebuah file baru di dalam folder lib dengan nama home_page.dart dan ikuti script di bawah ini. File ini kita gunakan untuk menampilkan halaman home yang berisi data user setelah user berhasil login.

  import 'package:flutter/material.dart';
  import 'login_page.dart';
  import 'user.dart';
  
  class HomePage extends StatelessWidget {
    final User user;
  
    HomePage({required this.user});
  
    void handleLogout(BuildContext context) {
      Navigator.pushAndRemoveUntil(
        context,
        MaterialPageRoute(builder: (context) => LoginPage()),
        (route) => false,
      );
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Home'),
          actions: [
            IconButton(
              onPressed: () => handleLogout(context),
              icon: Icon(Icons.logout),
            ),
          ],
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('Welcome, ${user.firstName} ${user.lastName}!'),
              SizedBox(height: 16.0),
              CircleAvatar(
                radius: 80.0,
                backgroundImage: NetworkImage(user.image),
              ),
              SizedBox(height: 16.0),
              Text('Email: ${user.email}'),
              Text('Phone: ${user.phone}'),
              Text('Username: ${user.username}'),
            ],
          ),
        ),
      );
    }
  }

6. Buka file main.dart lalu ganti isinya dengan script di bawah ini.

  import 'package:flutter/material.dart';
  import 'login_page.dart';
  
  void main() {
    runApp(MaterialApp(
      title: 'Login App',
      home: LoginPage(),
    ));
  }
  

Semua step sudah kita kerjakan, sekarang kita bisa melakukan uji coba melalaui emultor. Jika berhasil maka tampilannya akan terlihat seperti gambar di bawah ini.

Kalian bisa melakukan improvisasi dengan mempercantik tampilan login atau menggabungkan latihan ini dengan latihan flutter lainnya. Atau kalian juga dapat membuat api sendiri dengan menggunakan sistem token sebagai autentikasinya.

Ok sekian tutorial singkat kita tentang cara membuat login dan prosessnya di flutter. Semoga tutorial singkat ini membantu, jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.