Membangun UI Aplikasi MyXL Dengan Flutter — Bagian 2
By: Ahmad Syarifuddin
Tags: Android, Flutter, Ui Ux Design, iOS

Dashboard Page MyXL Apps

Pada bagian ini, kita akan membuat halaman dashboard setelah halaman Splashscreen maka nanti akan diarahkan ke halaman dashboard atau halaman utama dari aplikasi.

Namun sebelum melanjutkan kehalaman dashboard, kita perlu menambahkan beberapa baris code pada file SplashscreenPage.dart, seperti dibawah ini,

SplashscreenPage.dart File Apps

Selanjutnya buat file baru dengan nama MainPage.dart pada direktori lib/pages/MainPage.dart , dan update kode pada file tersebut seperti dibawah ini,

MainPage.dart File Apps

Sebelum lanjut kebagian sub menu dari tiap halaman, berikut adalah penjelasan-penjelasan mengenai update code pada file SplashscreenPage.dart

Init state, atau proses awal ketika halaman atau state dijalankan

@override

void initState() {

timerLauncher();

super.initState();

}

Timer Launcher, digunakan untuk memberi waktu jeda berpindah halaman dari satu halaman kehalaman lainnya,

timerLauncher() async{

var durations = const Duration(seconds: 1);

return Timer(durations, ()=>{

Navigator.of(context).pushReplacement(new MaterialPageRoute(builder: (_){

return new MainPage();

}))

});

}

Pada bagian initState() kita menambahkan function yang telah dibuat, tujuannya ialah untuk menjalankan timer yang digunakan untuk berpindah ke halaman selanjutnya, dimana disini ialah halaman MainPage.dart atau halaman utama dari aplikasi.

Pada halaman MainPage ini kita akan membuat beberapa bagian yang digunakan untuk layout utama dari aplikasi ini, dan beberapa layout yang akan kita buat ialah ,Bottom Navigation Bar. Dimana nantinya layout ini akan digunakan untuk mengakses beberapa menu atau sub halaman yang ada pada aplikasi,

Langkah-langkah membuat bottom navigation bar ialah sebagai berikut,

Buat variable baru navBottomIndex dengan type int & juga bodyPage dengan type List Widget, seperti berikut,

int navBottomIndex = 0;

List<Widget> bodyPage=[

...

];

Buat function baru dengan nama bottomNavigationLayouts dimana function ini bertipe widget, seperti dibawah ini,

Widget bottomNavigationLayouts(){

return BottomNavigationBar(

type: BottomNavigationBarType.fixed,

onTap: (index){

setState(() {

navBottomIndex = index;

});

},

currentIndex: navBottomIndex,

items: [

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.home_rounded,

color: Colors.blue,

),

icon: new Icon(

Icons.home_rounded,

color: Colors.grey,

),

title: new Text(

'Dashboard',

),

),

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.store,

color: Colors.blue,

),

icon: new Icon(

Icons.store,

color: Colors.grey,

),

title: new Text('XL Store'),

),

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.local_florist,

color: Colors.blue,

),

icon: new Icon(

Icons.local_florist,

color: Colors.grey,

),

title: new Text('XL care'),

),

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.person_outline_rounded,

color: Colors.blue,

),

icon: new Icon(

Icons.person_outline_rounded,

color: Colors.grey,

),

title: new Text('Profile'),

),

]

);

}

Kemudian buat beberapa filesub page baru sebagai berikut,

DashboardPage.dart

class DashboardPage extends StatefulWidget {

@override

DashboardState createState() => DashboardState();

}



class DashboardState extends State<DashboardPage>{



@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Text('Dashboard',style: TextStyle(color: Colors.grey),textAlign: TextAlign.center,)

),

);

}



}

StorePage.dart

class StorePage extends StatefulWidget {

@override

StoreState createState() => StoreState();

}



class StoreState extends State<StorePage>{



@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Text('Store',style: TextStyle(color: Colors.grey),textAlign: TextAlign.center,)

),

);

}



}

CarePage.dart

class CarePage extends StatefulWidget {

@override

CareState createState() => CareState();

}



class CareState extends State<CarePage>{



@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Text('Care',style: TextStyle(color: Colors.grey),textAlign: TextAlign.center,)

),

);

}



}

ProfilePage.dart

class ProfilePage extends StatefulWidget {

@override

ProfileState createState() => ProfileState();

}



class ProfileState extends State<ProfilePage>{



@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: Text('Profile',style: TextStyle(color: Colors.grey),textAlign: TextAlign.center,)

),

);

}



}

Dan nanti hasil sementara dari struktur folder akan sebagai berikut,

Folder Structure update

Selanjutnya kita akan mengupdate file MainPage.dart agar dapat terintegrasi dengan sub halaman yang telah kita buat diatas, detail update ialah sebagai berikut,

Tambahkan class sub page yang telah kita buat sebelumnya pada variable list widget, sehingga hasilnya seperti berikut,

List<Widget> bodyPage=[

DashboardPage(),

StorePage(),

CarePage(),

ProfilePage()

];

Kemudian tambahkan code berikut pada bagian build,

@override

Widget build(BuildContext context) {

return Scaffold(

body: bodyPage[navBottomIndex],

bottomNavigationBar: bottomNavigationLayouts(),

);

}

Dan jika sudah selesai maka full codenya seperti berikut,

class MainPage extends StatefulWidget{

@override

MainState createState() => MainState();

}



class MainState extends State<MainPage>{

int navBottomIndex = 0;

List<Widget> bodyPage=[

DashboardPage(),

StorePage(),

CarePage(),

ProfilePage()

];



@override

Widget build(BuildContext context) {

return Scaffold(

body: bodyPage[navBottomIndex],

bottomNavigationBar: bottomNavigationLayouts(),

);

}



Widget bottomNavigationLayouts(){

return BottomNavigationBar(

type: BottomNavigationBarType.fixed,

onTap: (index){

setState(() {

navBottomIndex = index;

});

},

currentIndex: navBottomIndex,

items: [

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.home_rounded,

color: Colors.blue,

),

icon: new Icon(

Icons.home_rounded,

color: Colors.grey,

),

title: new Text(

'Dashboard',

),

),

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.store,

color: Colors.blue,

),

icon: new Icon(

Icons.store,

color: Colors.grey,

),

title: new Text('XL Store'),

),

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.local_florist,

color: Colors.blue,

),

icon: new Icon(

Icons.local_florist,

color: Colors.grey,

),

title: new Text('XL care'),

),

BottomNavigationBarItem(

activeIcon: new Icon(

Icons.person_outline_rounded,

color: Colors.blue,

),

icon: new Icon(

Icons.person_outline_rounded,

color: Colors.grey,

),

title: new Text('Profile'),

),

]

);

}





}

Terakhir, simpan dan jalankan ulang aplikasi, jika sudah berhasil hasilnya seperti dibawah ini,

Preview App

Sekian pada bagian ini, good luck !