Flutter Dasar
Pertemuan #4
Online, 28 Juli 2019
oleh : k4ilham & LT
json
model
List Model
Service
main.dart
import 'package:flutter/material.dart';
import './helper/config.dart' as appConfig;
import './widget/login.dart' as appLogin;
import './widget/app.dart' as App;
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(myApp());
class myApp extends StatelessWidget {
final routes = <String, WidgetBuilder>{
'Login': (context) => appLogin.LoginPage(),
'App': (context) => App.App(),
};
_cekLogin() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
String counter = prefs.getString('counter');
if(counter=="2580"){
App.App();
}else{
appLogin.LoginPage();
}
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appConfig.strings.app_title,
home: appLogin.LoginPage(),
routes: routes
);
}
}
pubspec.yaml
name: SIKAR
description: Sistem Informasi Karyawan.
version: 1.0.0+1
environment:
sdk: ">=2.1.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
url_launcher: ^4.0.3
shared_preferences: ^0.4.2
flutter_money_formatter: ^0.8.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- assets/images/
- assets/data/
app.dart
import 'package:flutter/material.dart';
import '../helper/config.dart' as appConfig;
import 'profile.dart' as widgetProfile;
import 'attendance.dart' as widgetAttendance;
import 'sallary.dart' as widgetSallary;
import 'home.dart' as widgetHome;
import 'newEmp.dart' as widgetNewEmp;
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appConfig.strings.app_name,
home: Layout(),
//NAVIGATION ROUTE
routes: <String,WidgetBuilder>{
'/urlProfile':(BuildContext context) => widgetProfile.Profil(),
'/urlSallary':(BuildContext context) => widgetSallary.SallaryWidget(),
'/urlAttendance':(BuildContext context) => widgetAttendance.Attendance(),
'/urlnewEmp':(BuildContext context) => widgetNewEmp.newEmp(),
}
);
}
}
class Layout extends StatefulWidget{
@override
_LayoutState createState() => _LayoutState();
}
class _LayoutState extends State<Layout> with SingleTickerProviderStateMixin{
TabController controller;
@override
void initState(){
controller = new TabController(length: 3, vsync: this);
super.initState();
}
Widget build(BuildContext context) {
return Scaffold(
//HEADER
appBar: new AppBar(
backgroundColor: appConfig.colors.ColorPrimaryDark,
title: new Text(appConfig.strings.app_title),
leading: Container(
margin: EdgeInsets.all(10.0),
child: Image.asset(appConfig.images.img_logo),
),
),
//CONTENT
body: new TabBarView(
controller: controller,
children: <Widget>[
new widgetHome.Home(),
new widgetAttendance.Attendance(),
new widgetSallary.SallaryWidget(),
]
),
//BOTTOM NAVIGATION BAR
bottomNavigationBar: new Material(
color: appConfig.colors.ColorPrimaryDark,
child: TabBar(
controller: controller,
tabs: <Widget>[
new Tab(
icon: new Icon(appConfig.icons.icon_home),
text: appConfig.strings.text_home,
),
new Tab(
icon: new Icon(appConfig.icons.icon_attendance),
text: appConfig.strings.text_attendance,
),
new Tab(
icon: new Icon(appConfig.icons.icon_sallary),
text: appConfig.strings.text_sallary,
),
]
),
),
//FLOATING ACTION BUTTON
// floatingActionButton: FloatingActionButton(
// onPressed: (){
// Navigator.pushNamed(context, '/urlProfile');
// },
// child: Icon(
// appConfig.icons.icon_profile
// ),
// backgroundColor: appConfig.colors.ColorButton,
// ),
);
}
}
url_launcher.dart
import 'package:url_launcher/url_launcher.dart';
class URLLauncher {
launchURL(String url) async {
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not launch $url';
}
}
}
sallary.json
[
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-01",
"basic_sallary": 8900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 13617500
},
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-02",
"basic_sallary": 9900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 14617500
},
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-03",
"basic_sallary": 10900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 15617500
},
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-04",
"basic_sallary": 11900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 16617500
},
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-05",
"basic_sallary": 12900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 17617500
},
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-06",
"basic_sallary": 13900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 18617500
},
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-07",
"basic_sallary": 14900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 19617500
},
{
"id_sallary": "0001",
"nik": "6195",
"nama": "Ilham Maulana",
"periode": "2019-08",
"basic_sallary": 15900000,
"attendance": 1150000,
"overtime": 3200000,
"income": 13250000,
"tax": 132500,
"loan": 1500000,
"deductions": 1632500,
"net_income": 20617500
}
]
model/Sallary.dart
class Sallary {
String id_sallary;
String nik;
String nama;
String periode;
int basic_sallary;
int attendance;
int overtime;
int income;
int tax;
int loan;
int deductions;
int net_income;
Sallary({
this.id_sallary, this.nik, this.nama, this.periode,
this.basic_sallary, this.attendance, this.overtime, this.income, this.tax, this.loan, this.deductions, this.net_income
});
factory Sallary.fromJson(Map<String, dynamic>json){
return new Sallary(
id_sallary: json['id_sallary'],
nik: json['nik'],
nama: json['nama'],
periode: json['periode'],
basic_sallary: json['basic_sallary'],
attendance: json['attendance'],
overtime: json['overtime'],
income: json['income'],
tax: json['tax'],
loan: json['loan'],
deductions: json['deductions'],
net_income: json['net_income']
);
}
}
model/SallaryList.dart
import 'Sallary.dart';
class SallaryList{
List<Sallary> sallarys = new List();
SallaryList({ this.sallarys });
factory SallaryList.fromJson(List<dynamic> parsedJson){
List<Sallary> sallarys = new List<Sallary>();
sallarys = parsedJson.map((i) => Sallary.fromJson(i)).toList();
return new SallaryList(
sallarys: sallarys,
);
}
}
model/SallaryService.dart
import 'SallaryList.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
class SallaryService{
Future<String> _loadSallaryAsset() async{
return await rootBundle.loadString('assets/data/sallary.json');
}
Future<SallaryList> loadSallary() async{
String jsonString = await _loadSallaryAsset();
final jsonResponse = json.decode(jsonString);
SallaryList sallarys = new SallaryList.fromJson(jsonResponse);
return sallarys;
}
}
Sallary.dart
import 'package:flutter/material.dart';
import '../model/Sallary.dart';
import '../model/SallaryList.dart';
import '../model/SallaryService.dart';
import './sallaryDetail.dart';
import '../helper/config.dart' as appConfig;
import 'package:flutter_money_formatter/flutter_money_formatter.dart';
//WIDGET
class SallaryWidget extends StatefulWidget {
@override
_SallaryWidgetState createState() {
return _SallaryWidgetState();
}
}
//STATE
class _SallaryWidgetState extends State<SallaryWidget> {
SallaryList _sallary = new SallaryList();
//INIT
@override
void initState() {
super.initState();
_sallary.sallarys = new List();
_getSallary();
}
//GET SALLARY
void _getSallary() async {
SallaryList sallarys = await SallaryService().loadSallary();
setState(() {
for (Sallary data in sallarys.sallarys) {
this._sallary.sallarys.add(data);
}
});
}
//SCAFFOLD
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: appConfig.colors.ColorPrimaryDark,
body: _buildList(context),
resizeToAvoidBottomPadding: false,
);
}
//LISTVIEW
Widget _buildList(BuildContext context) {
return ListView(
padding: const EdgeInsets.only(top: 20.0),
children: this
._sallary
.sallarys
.map((data) => _buildListItem(context, data))
.toList(),
);
}
//ITEM LISTVIEW
Widget _buildListItem(BuildContext context, Sallary sallary) {
//FORMAT CURRENCY
FlutterMoneyFormatter netIncome = FlutterMoneyFormatter(
amount: sallary.net_income.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
//CARD
return Card(
elevation: 8.0,
margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
child: Container(
decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
child: ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
//LEADING
leading: Container(
padding: EdgeInsets.only(right: 12.0),
decoration: new BoxDecoration(
border: new Border(
right:
new BorderSide(width: 1.0, color: Colors.white24))),
child: Image.asset(appConfig.absen
.findMonthIcon(sallary.periode.substring(6, 7)))),
//TITLE
title: Text(
sallary.nik + ' - ' + sallary.nama.toUpperCase(),
style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
//SUBTITLE
subtitle: Text(
"NET INCOME : " + netIncome.output.symbolOnLeft,
style: TextStyle(color: Colors.white),
),
//TRAILING
trailing:
Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new sallaryDetail(sallary: sallary)));
},
),
),
);
}
}
SallaryDetail.dart
import 'package:flutter/material.dart';
import '../model/Sallary.dart';
import '../helper/config.dart' as appConfig;
import '../helper/URLLauncher.dart';
import 'package:flutter_money_formatter/flutter_money_formatter.dart';
class sallaryDetail extends StatelessWidget {
final Sallary sallary;
sallaryDetail({this.sallary});
@override
Widget build(BuildContext context) {
FlutterMoneyFormatter netIncome = FlutterMoneyFormatter(
amount: sallary.net_income.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
FlutterMoneyFormatter attendance = FlutterMoneyFormatter(
amount: sallary.attendance.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
FlutterMoneyFormatter overtime = FlutterMoneyFormatter(
amount: sallary.overtime.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
FlutterMoneyFormatter income = FlutterMoneyFormatter(
amount: sallary.income.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
FlutterMoneyFormatter tax = FlutterMoneyFormatter(
amount: sallary.tax.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
FlutterMoneyFormatter loan = FlutterMoneyFormatter(
amount: sallary.loan.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
FlutterMoneyFormatter deductions = FlutterMoneyFormatter(
amount: sallary.deductions.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
FlutterMoneyFormatter basicSallary = FlutterMoneyFormatter(
amount: sallary.basic_sallary.toDouble(),
settings: MoneyFormatterSettings(
symbol: 'Rp.', fractionDigits: 0, thousandSeparator: '.'));
return new Scaffold(
backgroundColor: appConfig.colors.ColorPrimary,
appBar: new AppBar(
title: new Text(sallary.periode),
backgroundColor: appConfig.colors.ColorPrimaryDark,
actions: <Widget>[
Container(
padding: EdgeInsets.all(10.0),
child: Image.asset(
appConfig.absen.findMonthIcon(sallary.periode.substring(6, 7)),
),
)
],
),
body: new ListView(children: <Widget>[
new Container(
padding: const EdgeInsets.all(32.0),
child: Table(
//border: TableBorder.all(width: 1.0, color: Colors.greenAccent),
children: [
//NIK
TableRow(children: [
TableCell(
child: new Text(
'NIK',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + sallary.nik,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//NAMA
TableRow(children: [
TableCell(
child: new Text(
'NAMA',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + sallary.nama,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//BASIC SALLARY
TableRow(children: [
TableCell(
child: new Text(
'BASIC SALLARY',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + basicSallary.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//ATTENDANCE
TableRow(children: [
TableCell(
child: new Text(
'ATTENDANCE',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + attendance.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//OVERTIME
TableRow(children: [
TableCell(
child: new Text(
'OVERTIME',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + overtime.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//INCOME
TableRow(children: [
TableCell(
child: new Text(
'INCOME',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + income.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//TAX
TableRow(children: [
TableCell(
child: new Text(
'TAX',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + tax.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//LOAN
TableRow(children: [
TableCell(
child: new Text(
'LOAN',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + loan.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//DEDUCTIONS
TableRow(children: [
TableCell(
child: new Text(
'DEDUCTIONS',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + deductions.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//NET INCOME
TableRow(children: [
TableCell(
child: new Text(
'NET INCOME',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new Text(
" : " + " " + netIncome.output.symbolOnLeft,
style: TextStyle(
color: Colors.white,
),
),
)
]),
//BUTTON
TableRow(children: [
TableCell(
child: new Text(
'',
style: TextStyle(
color: Colors.white,
),
),
),
TableCell(
child: new RaisedButton(
onPressed: (){
URLLauncher().launchURL('https://www.klikbca.com/');
},
child: Text(
'Cek Rekening',
style: TextStyle(color: appConfig.colors.ColorTeks),
),
color: appConfig.colors.ColorButton,
),
)
]),
],
),
)
]));
}
}
Preview
Dart Tutorial
Percabangan IF
oleh : k4ilham
meetap_flutter_basic_04
By Maulana Ilham
meetap_flutter_basic_04
meetap_flutter_basic_04
- 782