LATIHAN FLUTTER WEEK#4 : SIKAR HALAMAN SALLARY dengan File Json

LATIHAN FLUTTER WEEK#4 : SIKAR HALAMAN SALLARY dengan File Json

Lanjutan dari Latihan sebelumnya : LATIHAN FLUTTER WEEK#3 : SIKAR HALAMAN ABSENCE DENGAN LISTVIEW

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/

 

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
    );
  }

}

 

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,
                    ),
                  )
                ]),





              ],
            ),
          )
        ]));
  }
}

 

  1. Flutter Tutorial – Sistem Informasi Karyawan Bagian 07 File Json : Lihat Video
  2. Flutter Tutorial – Sistem Informasi Karyawan Bagian 08 Membuat Model Sallary : Lihat Video
  3. Flutter Tutorial – Sistem Informasi Karyawan Bagian 09 Membuat List Model Sallary : Lihat Video
  4. Flutter Tutorial – Sistem Informasi Karyawan Bagian 10 Membuat Service Model Sallary : Lihat Video

Flutter Developer