Hai, kali ini saya sedang belajar Flutter tentang konsep MVVM.
agar lebih mudah dipahami kita akan coba praktek langsung
Part1 : (data beruba variabel local)
Untuk format folder adalah seperti berikut :
main.dart :
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'View/CounterPage.dart';
import 'ViewModel/CounterViewModel.dart';
import 'Model/CounterModel.dart';
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => CounterViewModel(CounterModel()),
child: MaterialApp(
home: CounterPage(),
initialRoute: '/',
),
),
);
}
CounterModel.dart (Model) :
class CounterModel {
int _count = 0;
int get count => _count;
String _nama = "";
String get nama => _nama;
void increment() {
_count++;
}
void kurangi() {
_count = _count - 10 ;
}
void dapatkanNama(){
_nama = _nama + _count.toString();
}
}
CounterViewModel.dart (ViewModel) :
// Dalam direktori viewmodel/counter_viewmodel.dart
import 'package:flutter/material.dart';
import '../Model/CounterModel.dart';
class CounterViewModel extends ChangeNotifier {
final CounterModel _model;
CounterViewModel(this._model);
int get count => _model.count;
String get nama => _model.nama;
void increment() {
_model.increment();
notifyListeners();
}
void kurangi() {
_model.kurangi();
notifyListeners();
}
void dapatkanNama(){
_model.dapatkanNama();
notifyListeners();
}
}
CounterPage.dart (View)
// Dalam direktori view/counter_page.dart
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../ViewModel/CounterViewModel.dart';
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('MVVM Counter'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Consumer<CounterViewModel>(
builder: (context, model, _) {
return Text(
'Counter: ${model.count}',
style: TextStyle(fontSize: 24),
);
},
),
SizedBox(height: 20),
Consumer<CounterViewModel>(
builder: (context, model, _) {
return Text(
'Nama: ${model.nama}',
style: TextStyle(fontSize: 24),
);
},
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Provider.of<CounterViewModel>(context, listen: false)
.increment();
},
child: Text('Increment'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Provider.of<CounterViewModel>(context, listen: false)
.kurangi();
},
child: Text('Kurangi'),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Provider.of<CounterViewModel>(context, listen: false)
.dapatkanNama();
},
child: Text('Datapkan nama'),
),
],
),
),
);
}
}
Untuk hasilnya adalah seperti berikut :
