Flutter: CRUD dengan Laravel API(CRUD with Laravel REST API) Part I — Read

Halo semua!

In this article I will share tutorial Flutter: How to make CRUD with Laravel REST API Part I (Read Data). This tutorial continues in part Membuat Login Flutter dengan API Laravel (Flutter Authentication with Laravel)

Read Data

In this part I will share tutorial How to display data with Laravel REST API

Table Student

Prepare the table that you want to use. For example here I use a student table with a structure like this.

CREATE TABLE `student` (
`id_student` int(10) NOT NULL,
`student_name` varchar(25) NOT NULL,
`gender` enum('Male','Female') NOT NULL,
`birth_date` date NOT NULL,
PRIMARY KEY(`id_student`)
);

Insert some data

INSERT INTO `student`
(`id_student`, `student_name`, `gender`, `birth_date`) VALUES
(1001, ‘Andreas Neil’, ‘Male’, ‘2006–04–18’),
(1002, ‘Bob Lee Swagger’, ‘Male’, ‘2006–07–07’),
(1003, ‘Cindy Octavia’, ‘Female’, ‘2006–10–12’);

Laravel REST API

Prepare your Laravel project as well, and create a model for your table. Here I am creating a student model for my student table

Student Model

class Student extends Model
{
protected $table = ‘student’;
protected $primaryKey = ‘id_student’;
protected $fillable = [
‘student_name’,
‘gender’,
‘birth_date’
];
public $timestamps = false;
}

Student Controller

Create a controller for the student’s CRUD function

api.php

The middleware means that to access the route requires login

Route::get(‘student’, ‘StudentController@index’)->middleware(‘auth:api’);

Flutter Project Structure

First create a project structure like this, because login and register have been in the previous tutorial, this time create a model and service for student table that are used as models and controllers in flutter.

lib project structure

Student.dart

You can adjust the parameters in the model according to your table.

StudentService.dart

This service is used to capture the results of the API route that we send.

home.dart

This page is used to display the data with Table Widget.

student_detail.dart

This page is used to display detailed student data.

Test Drive

Home and Detail Student Page

Having some issues? Let me know, write on comment below, cheers!

Thank you very much! Terima Kasih!

--

--

--

IT Enthusiast | Developers

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Give Credit, Get Requests — Double your free request limit to 100k/month!

How to build an iOS Framework and setup it with Continuous Integration?

The Story of jOeCHEM

Balance in Software development

How to implement bitbucket login in laravel * DevRohit Think simplified

Getting Started with Go

Using GrumPHP with Laravel

Dev Status Update — September, 2020

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Rheadavin Adhiskara

Rheadavin Adhiskara

IT Enthusiast | Developers

More from Medium

Dart for Complete Beginners.

How to add launcher/app icons to flutter

How to make QR Code Scanner in Flutter ?

Build VueJs with Firebase Project