LATIHAN FLUTTER WEEK#3 : SIKAR Halaman App

LATIHAN FLUTTER WEEK#3 : SIKAR Halaman App

Sebelumnya baca tutorial : LATIHAN FLUTTER WEEK#3 : SIKAR STRUKTUR FOLDER

Ubah File main.dart menjadi

import 'package:flutter/material.dart';
import 'widget/App.dart';
 
void main(){
  runApp(App());
}

masih error karena kita belum membuat App.dart

Sekarang buat App.dart pada folder Widget

import 'package:flutter/material.dart';
import 'package:sikar/helper/config.dart' as appConfig;
import 'Absence.dart' as widgetAbsence;
import 'Sallary.dart' as widgetSallary;
import 'Home.dart' as widgetHome;

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appConfig.strings.app_title,
      home: Layout(),
      routes: <String,WidgetBuilder>{
        '/urlSallary' : (BuildContext context) => widgetSallary.Sallary(),
        '/urlAbsen' : (BuildContext context) => widgetAbsence.Absence(),
        '/urlHome' : (BuildContext context) => widgetHome.Home(),
      },
    );
  }
}

class Layout extends StatefulWidget {
  _LayoutState createState() => _LayoutState();
}

class _LayoutState extends State<Layout> with SingleTickerProviderStateMixin {

  TabController controller;

  void initState() { 
    controller = new TabController(length:3,vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(


      //HEADER
      appBar: new AppBar(
        backgroundColor: appConfig.colors.ColorPrimaryDark,
        title: Text(appConfig.strings.app_name),
        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(),
          new widgetSallary.Sallary(),
        ],
      ),



      //BOTTOM NAV BAR
      bottomNavigationBar: new Material(
        color: appConfig.colors.ColorPrimaryDark,
        child: TabBar(
          controller: controller,
          tabs: <Widget>[

            //TAB HOME
            new Tab(
              icon: new Icon(appConfig.icons.icon_home),
              text: appConfig.strings.text_home,
            ),

            //TAB ABSEN
            new Tab(
              icon: new Icon(appConfig.icons.icon_absence),
              text: appConfig.strings.text_absence,
            ),

            //TAB SALLARY
            new Tab(
              icon: new Icon(appConfig.icons.icon_sallary),
              text: appConfig.strings.text_sallary,
            ),

          ],
        ),
      ),






    );
  }
}

Buat File Home.dart pada folder Widget

import 'package:flutter/material.dart';

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Home"),);
  }
}

Buat File Absence.dart pada folder Widget

Buat File Sallary.dart pada folder Widget

import 'package:flutter/material.dart';

class Sallary extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Sallary"),);
  }
}

Jalankan Flutter dengan tekan F5 atau CLI : flutter run

Semoga Bermanfaat

Flutter Developer