Flutter Dasar
Pertemuan #3
Toko Kopi Haqiqi Cilebut, 20 Juli 2019
oleh : k4ilham & LT
Struktur Folder
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
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
assets:
- assets/images/
main.dart
import 'package:flutter/material.dart';
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey,
body: new Center(
child: Text("Home",style: TextStyle(color: Colors.white),),
),
);
}
}
app.dart
import 'package:flutter/material.dart';
import './sallary.dart' as widgetSallary;
import '../helper/config.dart' as appConfig;
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "SIKAR",
home: widgetSallary.Sallary(),
);
}
}home.dart
import 'package:flutter/material.dart';
class Home extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: Colors.grey,
body: new Center(
child: Text("Home",style: TextStyle(color: Colors.white),),
),
);
}
}
File Config
config.dart
import 'package:flutter/material.dart';
class strings{
//STRING
static const String app_name = "SIKAR 1.0";
static const String app_title = "PT. meetAp Mobile Developer";
static const String text_home = "Home";
static const String text_absence = "Absence";
static const String text_sallary = "Sallary";
static const String text_profil = "Profile";
static const String text_login = "Login";
}
class colors{
//COLOR
static const ColorPrimaryDark = Color.fromRGBO(58,66,86,1.0);
static const ColorPrimary = Color.fromRGBO(64,75,96,.9);
static const Color ColorTeks = Colors.white;
static const Color ColorTeksError = Colors.red;
static const Color ColorButton = Colors.green;
static const Color ColorButtonGradient = Colors.greenAccent;
static const Color ColorIcon = Colors.white;
}
class icons{
//ICON
static const IconData icon_app = Icons.android;
static const IconData icon_home = Icons.home;
static const IconData icon_absence = Icons.timelapse;
static const IconData icon_sallary = Icons.monetization_on;
static const IconData icon_profile = Icons.people_outline;
static const IconData icon_back = Icons.arrow_back;
static const IconData icon_login_email = Icons.alternate_email;
static const IconData icon_login_password = Icons.lock;
}
class images{
//IMAGES
static const String img_logo = "assets/images/logo.jpg";
static const String img_header = "assets/images/header.jpg";
static const String img_profil = "assets/images/profil.jpg";
static const String img_absen_hadir = "assets/images/icon_hadir.png";
static const String img_absen_libur = "assets/images/icon_libur.png";
static const String img_absen_cuti = "assets/images/icon_cuti.png";
static const String img_absen_ijin = "assets/images/icon_ijin.png";
static const String img_logo_alpa = "assets/images/icon_alpa.png";
}
app.dart
import 'package:flutter/material.dart';
import './sallary.dart' as widgetSallary;
import '../helper/config.dart' as appConfig;
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appConfig.strings.app_name,
home: widgetSallary.Sallary(),
);
}
}Bottom Nav Bar
app.dart
import 'package:flutter/material.dart';
import '../helper/config.dart' as appConfig;
import './home.dart' as widgetHome;
import './absence.dart' as widgetAbsence;
import './sallary.dart' as widgetSallary;
import './profile.dart' as widgetProfile;
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: appConfig.strings.app_name,
home: Layout(),
);
}
}
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 new 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 widgetAbsence.Absence(),
widgetSallary.Sallary(),
]
),
//FLOATING ACTION BUTTON
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.pushNamed(context, '/urlProfile');
},
tooltip: appConfig.strings.text_profil,
child: Icon(appConfig.icons.icon_profile),
backgroundColor: appConfig.colors.ColorButton,
),
//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_absence),
text: appConfig.strings.text_absence,
),
new Tab(
icon: new Icon(appConfig.icons.icon_sallary),
text: appConfig.strings.text_sallary,
)
]
),
),
);
}
}Navigator Route
app.dart
import 'package:flutter/material.dart';
import '../helper/config.dart' as appConfig;
import './home.dart' as widgetHome;
import './absence.dart' as widgetAbsence;
import './sallary.dart' as widgetSallary;
import './profile.dart' as widgetProfile;
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.Profile(),
},
);
}
}
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 new 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 widgetAbsence.Absence(),
widgetSallary.Sallary(),
]
),
//FLOATING ACTION BUTTON
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.pushNamed(context, '/urlProfile');
},
tooltip: appConfig.strings.text_profil,
child: Icon(appConfig.icons.icon_profile),
backgroundColor: appConfig.colors.ColorButton,
),
//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_absence),
text: appConfig.strings.text_absence,
),
new Tab(
icon: new Icon(appConfig.icons.icon_sallary),
text: appConfig.strings.text_sallary,
)
]
),
),
);
}
}profile.dart
import 'package:flutter/material.dart';
import '../helper/config.dart' as appConfig;
class Profile extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
//HEADER
appBar: new AppBar(
title: new Text(appConfig.strings.text_profil),
backgroundColor: appConfig.colors.ColorPrimary,
//tombol back
leading: InkWell(
child: Icon(appConfig.icons.icon_back,
color: appConfig.colors.ColorTeks,),
onTap: (){
Navigator.pop(context);
},
),
),
backgroundColor: appConfig.colors.ColorPrimaryDark,
body: new Center(
child: Text("Profile",style: TextStyle(color: Colors.white),),
),
);
}
}
Grid View
home.dart
import 'package:flutter/material.dart';
import '../helper/config.dart' as appConfig;
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: appConfig.colors.ColorPrimaryDark,
body: GridView.count(
crossAxisCount: 3,
children: <Widget>[
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//PROFILE
new customGrid(
icon: appConfig.icons.icon_profile,
iconTitle: appConfig.strings.text_profil,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//HOME
new customGrid(
icon: appConfig.icons.icon_home,
iconTitle: appConfig.strings.text_home,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
//SALLARY
new customGrid(
icon: appConfig.icons.icon_sallary,
iconTitle: appConfig.strings.text_sallary,
iconColor: appConfig.colors.ColorIcon,
textColor: appConfig.colors.ColorTeks,
iconSize: 80.0,
urlWidget: '/urlProfile',
),
],
),
);
}
}
class customGrid extends StatelessWidget {
final IconData icon;
final String iconTitle, urlWidget;
final Color iconColor, textColor;
final double iconSize;
customGrid(
{this.urlWidget,
this.textColor,
this.iconTitle,
this.iconColor,
this.iconSize,
this.icon});
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(6.0),
color: appConfig.colors.ColorPrimary,
child: RaisedButton(
color: appConfig.colors.ColorPrimary,
child: Column(
children: <Widget>[
Icon(
icon,
size: iconSize,
color: iconColor,
),
Text(
iconTitle,
style: TextStyle(color: textColor),
),
],
),
onPressed: (){
Navigator.pushNamed(context, urlWidget);
},
),
);
}
}
ListView Builder
absence.dart
import 'package:flutter/material.dart';
import '../helper/config.dart' as appConfig;
class Absence extends StatelessWidget {
final data_absen_tgl = appConfig.datas.data_absen_tgl;
final data_absen_status = appConfig.datas.data_absen_status;
@override
Widget build(BuildContext context) {
return new Scaffold(
backgroundColor: appConfig.colors.ColorPrimaryDark,
body: new Container(
decoration: BoxDecoration(color: appConfig.colors.ColorPrimaryDark),
child: ListView.builder(
itemCount: data_absen_tgl.length,
itemBuilder: (context, index) {
final absen_tgl = data_absen_tgl[index];
final absen_status = appConfig.absen.findAbsenStatus(data_absen_status[index]);
final absen_icon = appConfig.absen.findAbsenIcon(data_absen_status[index]);
return Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(color: appConfig.colors.ColorPrimary),
child: ListTile(
leading: Image.asset(absen_icon),
trailing: Text(
absen_tgl,
style: TextStyle(
color: appConfig.colors.ColorTeks,
fontWeight: FontWeight.bold,
fontSize: 15.0,
),
),
title: Text(
absen_status,
style: TextStyle(
color: appConfig.colors.ColorTeks,
fontWeight: FontWeight.bold,
fontSize: 15.0,
),
),
),
);
}),
),
);
}
}
config.dart
import 'package:flutter/material.dart';
class strings{
//STRING
static const String app_name = "SIKAR 1.0";
static const String app_title = "PT. meetAp Mobile Developer";
static const String text_home = "Home";
static const String text_absence = "Absence";
static const String text_sallary = "Sallary";
static const String text_profil = "Profile";
static const String text_login = "Login";
}
class colors{
//COLOR
static const ColorPrimaryDark = Color.fromRGBO(58,66,86,1.0);
static const ColorPrimary = Color.fromRGBO(64,75,96,.9);
// static const ColorPrimaryDark = Colors.blueAccent;
// static const ColorPrimary = Colors.grey;
static const Color ColorTeks = Colors.white;
static const Color ColorTeksError = Colors.red;
static const Color ColorButton = Colors.green;
static const Color ColorButtonGradient = Colors.greenAccent;
static const Color ColorIcon = Colors.white;
}
class icons{
//ICON
static const IconData icon_app = Icons.android;
static const IconData icon_home = Icons.home;
static const IconData icon_absence = Icons.timelapse;
static const IconData icon_sallary = Icons.monetization_on;
static const IconData icon_profile = Icons.people_outline;
static const IconData icon_back = Icons.arrow_back;
static const IconData icon_login_email = Icons.alternate_email;
static const IconData icon_login_password = Icons.lock;
}
class images{
//IMAGES
static const String img_logo = "assets/images/logo.jpg";
static const String img_header = "assets/images/header.jpg";
static const String img_profil = "assets/images/profil.jpg";
static const String img_absen_hadir = "assets/images/icon_hadir.png";
static const String img_absen_libur = "assets/images/icon_libur.png";
static const String img_absen_cuti = "assets/images/icon_cuti.png";
static const String img_absen_ijin = "assets/images/icon_ijin.png";
static const String img_absen_alpa = "assets/images/icon_alpa.png";
}
class datas{
static const List<String> data_absen_tgl =[
'11 Jun 2019',
'12 Jun 2019',
'13 Jun 2019',
'14 Jun 2019',
'15 Jun 2019',
'16 Jun 2019',
'17 Jun 2019',
'18 Jun 2019',
'19 Jun 2019',
'20 Jun 2019',
'21 Jun 2019',
'22 Jun 2019',
'23 Jun 2019',
'24 Jun 2019',
'25 Jun 2019',
'26 Jun 2019',
'27 Jun 2019',
'28 Jun 2019',
'29 Jun 2019',
'30 Jun 2019',
];
static const List<String> data_absen_status = [
'1',
'1',
'0',
'1',
'2',
'2',
'3',
'3',
'1',
'1',
'1',
'2',
'2',
'1',
'1',
'4',
'0',
'1',
'2',
'2',
];
}
class absen{
static String findAbsenStatus(String value){
String result;
if(value=='1'){
result = "Hadir";
}else if(value=='2'){
result = "Libur";
}else if(value=='3'){
result = "Cuti";
}else if(value=='4'){
result = "Ijin";
}else if(value=='0'){
result = "Alpa";
}
return result;
}
static String findAbsenIcon(String value){
String result;
if(value=='1'){
result = images.img_absen_hadir;
}else if(value=='2'){
result = images.img_absen_libur;
}else if(value=='3'){
result = images.img_absen_cuti;
}else if(value=='4'){
result = images.img_absen_ijin;
}else if(value=='0'){
result = images.img_absen_alpa;
}
return result;
}
}