Scribd
Upload
52 views

Laravel - Flutter

This document provides an example of setting up routes in Laravel to connect a Flutter mobile app to a Laravel API. It describes creating a model and controller in Laravel, defining an API route to the controller method, calling the API from a Flutter app using HTTP, and displaying the response in a Flutter ListView.

Uploaded by

hendri kusuma
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
52 views

Laravel - Flutter

This document provides an example of setting up routes in Laravel to connect a Flutter mobile app to a Laravel API. It describes creating a model and controller in Laravel, defining an API route to the controller method, calling the API from a Flutter app using HTTP, and displaying the response in a Flutter ListView.

Uploaded by

hendri kusuma
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

// Contoh route di Laravel

PERTAMA BUAT MODELNYA

php artisan make:model Data

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Data extends Model


{
use HasFactory;

protected $fillable = [
'name', 'description'
];
}

php artisan make:controller DataController

<?php

namespace App\Http\Controllers;

use App\Models\Data;
use Illuminate\Http\Request;

class DataController extends Controller


{
public function index()
{
$data = Data::all();

return response()->json($data, 200);


}
}

Selanjutnya, tentukan rute API di dalam file routes/api.php:

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DataController;

Route::get('/data', [DataController::class, 'index']);


================================================================== DI
routes/api.php
<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\DataController;

Route::middleware('auth:api')->get('/user', function (Request $request) {


return $request->user();
});

// Contoh endpoint API sederhana


Route::get('/data', [DataController::class, 'index']);

====================================================================
import 'package:http/http.dart' as http;
import 'dart:convert';

Future<List<dynamic>> fetchData() async {


var url = Uri.parse('https://example.com/api/data'); // Ganti dengan URL API
Laravel Anda atau
//var response = await http.get(Uri.parse('http://192.168.1.100/api/data'));

var response = await http.get(url);

if (response.statusCode == 200) {
// Jika permintaan sukses, ubah respons JSON menjadi list di Dart
List<dynamic> data = json.decode(response.body);
return data;
} else {
// Jika permintaan gagal, lemparkan error
throw Exception('Failed to load data');
}
}

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

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter-Laravel Connection'),
),
body: Center(
child: FutureBuilder<List<dynamic>>(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
// Tampilkan data dalam daftar
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data![index]['name']),
subtitle: Text(snapshot.data![index]['description']),
);
},
);
} else if (snapshot.hasError) {
// Tangani jika ada error
return Text('Error: ${snapshot.error}');
}

// Menampilkan loading jika belum ada respons


return CircularProgressIndicator();
},
),
),
),
);
}
}

You might also like