Hai, kali ini kita akan belajar konsep MVC di flutter, hal ini karena saya masing kebingungan dengan konsep MVVM di flutter, maka saya ingin mencoba MVC di flutter, mudah-mudahan saya lebih mudah memahami, karena sebelumnya saya pernah mencoba MVC di Codeigniter.
- Part 1 (Hanya merubah Variabel Data Lokal) :
Oke langsung saja, untuk struktur folder adalah seperti berikut :
Main.dart :
import 'package:flutter/material.dart';
import 'Controller/UserController.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => UserController(),
},
);
}
}
import 'package:flutter/material.dart';
import '/View/UserView.dart';
import '/Model/User.dart';
class UserController extends StatefulWidget {
@override
_UserControllerState createState() => _UserControllerState();
}
class _UserControllerState extends State<UserController> {
late User _user;
@override
void initState() {
super.initState();
_user = User(name: 'John Doe', age: 30);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('User Profile'),
),
body: Column(
children: [
UserView(user: _user),
ElevatedButton(
onPressed: () {
setState(() {
_user.name = 'Nama Dirubah'; // Memperbarui data model
_user.age = 41; // Memperbarui data model
});
},
child: Text('Change Name'),
),
],
),
);
}
}
UserView.dart (View) :
import 'package:flutter/material.dart';
import '/Model/User.dart';
class UserView extends StatelessWidget {
final User user;
UserView({required this.user});
@override
Widget build(BuildContext context) {
return Column(
children: [
Text('Name: ${user.name}'),
Text('Age: ${user.age}'),
],
);
}
}
User.dart (Model) :
class User {
String name;
int age;
User({required this.name, required this.age});
}
Untuk hasilnya adalah seperti berikut :
NB , jika Part 1 masih terlalu sulit untuk dipahami, coba pelajari Part 2 di bawah ini
- Part 2 (MVC dengan lebih sederhana)
Untuk struktur foldernya adalah seperti berikut :
Main.dart :
import 'package:flutter/material.dart';
import 'View/ItemView.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => ItemView(),
},
);
}
}
ItemController.dart (Controller)
import '/Model/Item.dart';
class ItemController {
List<Item> getItems() {
return [
Item(name: 'Item 1', description: 'Deskripsi item 1'),
Item(name: 'Item 2', description: 'Deskripsi item 2'),
];
}
}
ItemView.dart (View)
import 'package:flutter/material.dart';
import '/Controller/ItemController.dart';
import '/Model/Item.dart';
class ItemView extends StatelessWidget {
final ItemController _controller = ItemController();
@override
Widget build(BuildContext context) {
List<Item> items = _controller.getItems();
print(items[0].name);
var nilai = "";
if ((items[0].name) != "Item 1"){
nilai = "kosong";
}else{
nilai = "tidak kosong";
}
return Scaffold(
appBar: AppBar(
title: Text('Item List'),
),
body:
/*
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
Item item = items[index];
return ListTile(
title: Text(item.name),
subtitle: Text(item.description),
);
},
),
*/
//Text((items.length).toString()),
Text(nilai.toString()),
);
}
}
Item.dart (Model)
class Item {
final String name;
final String description;
Item({required this.name, required this.description});
}
