8. Tampilan Home

Setelah selesai membuat tampilan depan sekarang kita akan membuat tampilan home. Pada tampilan home ini terdapat menu & beberapa widget di tampilan ini berulang maka dari itu kita akan membuat beberapa custom widget.

1. Persiapan Tampilan Home

Buat folder baru dengan nama widget untuk menampung custom widget yang akan di buat
Install package baru yang bernama google_nav_bar untuk membuat menu
Buat 4 file dengan nama homePage.dart, bookingPage.dart, favoritPage.dart, profilePage.dart

Yang pertama yang akan kita buat adalah mengatur halaman home & membuat menunya :

Tulislah kode ini pada 4 page yang baru saja di buat :

homePage.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Center(
          child: Text("Home Page"),
        )
      ],
    );
  }
}

Selanjutnya lakukan hal yang sama pada 3 file lainnya. setelah itu kita akan mengaturnya pada home.dart:

home.dart

class _HomeState extends State<Home> {
  int menu = 0;
  List lsMenu = [HomePage(), BookingPage(), FavoritPage(), ProfilePage()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: lsMenu[menu],
      bottomNavigationBar: Container(
        padding: EdgeInsets.symmetric(horizontal: 15, vertical: 20),
        child: GNav(
            tabBackgroundColor: Colors.black,
            activeColor: Colors.white,
            padding: EdgeInsets.all(10),
            gap: 8,
            onTabChange: (value) {
              setState(() {
                menu = value;
              });
            },
            tabs: [
              GButton(icon: Icons.home, text: "Home"),
              GButton(icon: Icons.near_me, text: "Booking"),
              GButton(icon: Icons.favorite, text: "Favorit"),
              GButton(icon: Icons.person, text: "Profile"),
            ]),
      ),
    );
  }
}

Keterangan

Sekarang kalau dijalankan menu - menunya sudah dapat di klik dan akan membuka halamannya
list menu digunakan untuk menampung halaman - halaman yang akan di tampilkan seperti home, booking, favorit dan profile
body akan menampilkan tampilan sesuai dengan index yang sudah di tetapkan pada menu

3. Membuat Tampilan Atas

Sekarang kita akan membuat tampilannya mulai dari atasnya terlebih dahulu seperti ini:

Alt text

homePage.dart

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    var tinggi = MediaQuery.of(context).size.height;
    var lebar = MediaQuery.of(context).size.width;
    return Container(
      padding: EdgeInsets.all(20),
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //Start hello
            Container(
              margin: EdgeInsets.only(bottom: tinggi * 0.03),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Row(
                    children: [
                      Container(
                        margin: EdgeInsets.only(right: 10),
                        child: CircleAvatar(
                          backgroundColor: Color.fromARGB(255, 252, 211, 64),
                          child: Icon(Icons.person),
                        ),
                      ),
                      Text("Hello, Jhon Doe",
                          style: GoogleFonts.poppins(
                              textStyle: TextStyle(
                                  fontSize: 20, fontWeight: FontWeight.w500)))
                    ],
                  ),
                  Icon(Icons.notifications)
                ],
              ),
            ),
            //end hello

            //start explore
            Container(
              margin: EdgeInsets.only(bottom: tinggi * 0.03),
              child: Text("Where do you want to explore today?",
                  style: GoogleFonts.poppins(
                      textStyle: TextStyle(
                          fontSize: 37, fontWeight: FontWeight.w700))),
            ),
            //end explore
          ]
        )
      )
    );
  }
}

4. Membuat Tampilan Seacrh & Kategori

Selanjutnya adalah kita membuat tampilan search & kategori. Di tampilan kategori bisa kita lihat bahwasannya tampilannya berulang jika kita membuat dengan copas kode yang sudah di buat maka akan memperpanjang kode kita. Disini kita akan menerapkan Custom Widget tapi sebelumnya kita akan membuat tampilan search terlebih dahulu :

homePage.dart

//start search
Container(
    margin: EdgeInsets.only(bottom: tinggi * 0.03),
    child: TextField(
    decoration: InputDecoration(
        hintText: "Search destination",
        suffixIcon: Icon(Icons.search),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(15))),
        hintStyle: GoogleFonts.poppins(fontSize: 20)),
    ),
),
//end search

Selanjutnya pada folder widget buat file baru dengan nama kategori.dart dan judul.dart lalu tuliskan kode - kode ini :

widget judul.dart

Widget Judul(String judul, String sub, tinggi) {
  return Container(
    margin: EdgeInsets.only(bottom: tinggi * 0.02),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(judul,
            style: GoogleFonts.poppins(
                textStyle:
                    TextStyle(fontSize: 20, fontWeight: FontWeight.w600))),
        Text(sub,
            style: GoogleFonts.poppins(
                textStyle: TextStyle(fontSize: 18, color: Colors.grey)))
      ],
    ),
  );
}

Keterangan

Nama custom widget yang kita buat adalah Judul (usahakan huruf depannya besar)
Pada widget ini mempunyai parameter (judul : untuk judul sectionnya, sub : untuk sub judul yang berada di sebelah kanan, dan tinggi : untuk mengatur tingginya)

widget kategori.dart

Widget Category(String name, String img, lebar) {
  return Container(
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.grey),
        borderRadius: BorderRadius.circular(20)),
    child: Row(
      children: [
        Container(
            margin: EdgeInsets.only(right: lebar * 0.01),
            child: Image.network(img)),
        Text(name,
            style: GoogleFonts.poppins(
                textStyle:
                    TextStyle(fontSize: 20, fontWeight: FontWeight.w600))),
      ],
    ),
  );
}

Keterangan

Nama custom widget yang kita buat adalah Category (usahakan huruf depannya besar)
Pada widget ini mempunyai parameter (name : untuk nama kategorinya, img : untuk gambar kategorinya, dan lebar : untuk mengatur lebarnya)

Lalu kita implementasikan widget yang telah kita buat ke dalam home page :

homePage.dart

//start category
Judul("Choose Category", "See All", tinggi),
Container(
    margin: EdgeInsets.only(bottom: tinggi * 0.03),
    child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Wrap(spacing: 20, children: [
        Category("Beach", "assets/img/beach.png", lebar),
        Category("Mountain", "assets/img/mountains.png", lebar),
        Category("Religion", "assets/img/mosque.png", lebar),
        ]),
    )),
//end category

Keterangan

Agar bisa di geser ke kiri & kanan disini kita memerlukan SingleChildScrollView dengan Axis horizontal
Wrap : seperti di css flex wrap ini akan membuat widget didalamnya menjadi sejajar dan apabila tidak muat akan pindah ke bawah.
spacing : jarak kiri & kanan antar widget

5. Membuat Tampilan Favorit Place

Selanjutnya kita akan membuat tampilan dari Favorit Place dimana sama seperti sebelumnya yakni kita bisa menggunakan custom widget. maka dari itu buat file baru pada folder widget yang bernama wisata.dart lalu masukkan kodenya seperti ini :

widget wisata.dart

Widget Wisata(String img, String name, String place, String rating, tinggi,
    lebar, context) {
  return InkWell(
    onTap: () {},
    child: Stack(
      children: [
        Container(
          height: tinggi * 0.35,
          width: lebar * 0.45,
          decoration: BoxDecoration(
              image: DecorationImage(image: AssetImage(img), fit: BoxFit.cover),
              borderRadius: BorderRadius.circular(20)),
        ),
        Container(
          height: tinggi * 0.35,
          width: lebar * 0.45,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Colors.transparent, Colors.black26],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter),
              borderRadius: BorderRadius.circular(20)),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                margin: EdgeInsets.only(top: 10, right: 10),
                alignment: Alignment.topRight,
                child: CircleAvatar(
                  backgroundColor: Colors.white,
                  child: Icon(
                    Icons.favorite,
                    color: Colors.grey,
                    size: 20,
                  ),
                ),
              ),
              Container(
                padding: EdgeInsets.symmetric(horizontal: 10),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      margin: EdgeInsets.only(bottom: 10),
                      child: Text(name,
                          style: GoogleFonts.poppins(
                              textStyle: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.w600,
                                  color: Colors.white))),
                    ),
                    Container(
                      margin: EdgeInsets.only(bottom: 10),
                      child: Row(
                        children: [
                          Container(
                              margin: EdgeInsets.only(right: 3),
                              child: Icon(Icons.place_outlined,
                                  color: Colors.white)),
                          Text(place,
                              style: GoogleFonts.poppins(
                                  textStyle: TextStyle(
                                      fontSize: 15,
                                      fontWeight: FontWeight.w400,
                                      color: Colors.white)))
                        ],
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.only(bottom: 10),
                      child: Wrap(
                        spacing: 5,
                        children: [
                          Icon(Icons.star,
                              color: Color.fromARGB(255, 252, 210, 64),
                              size: 20),
                          Icon(Icons.star,
                              color: Color.fromARGB(255, 252, 210, 64),
                              size: 20),
                          Icon(Icons.star,
                              color: Color.fromARGB(255, 252, 210, 64),
                              size: 20),
                          Icon(Icons.star,
                              color: Color.fromARGB(255, 252, 210, 64),
                              size: 20),
                          Icon(Icons.star, color: Colors.white, size: 20),
                          Text(rating,
                              style: GoogleFonts.poppins(
                                  textStyle: TextStyle(
                                      fontSize: 15,
                                      fontWeight: FontWeight.w400,
                                      color: Colors.white)))
                        ],
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ],
    ),
  );
}

Kita langsung implementasikan pada homePage.dart

homePage.dart

//start favorit
Judul("Favorite Place", "Explore", tinggi),
Container(
    margin: EdgeInsets.only(bottom: tinggi * 0.03),
    child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Wrap(spacing: 20, children: [
            Wisata("assets/img/page1.jpg", "Tempat Wisata",
                "Jonggol, Indonesia", "4.8", tinggi, lebar, context),
            Wisata("assets/img/page2.jpg", "Tempat Wisata",
                "Jonggol, Indonesia", "4.8", tinggi, lebar, context),
            Wisata("assets/img/page3.jpg", "Tempat Wisata",
                "Jonggol, Indonesia", "4.8", tinggi, lebar, context),
        ]))),
//end favorit

6. Membuat Tampilan Popular Package

Tampilan yang terakhir kita akan membuat popular package. Kita buat file baru pada folder widget dengan nama popular.dart

widget popular.dart

Widget Popular(String img, String name, String price, double rating,
    String desc, lebar, tinggi) {
  return Container(
    width: lebar,
    height: tinggi * 0.25,
    // ignore: prefer_const_constructors
    padding: EdgeInsets.all(10),
    decoration: BoxDecoration(
        // ignore: prefer_const_constructors
        border: Border.all(color: Color.fromARGB(255, 205, 202, 202)),
        borderRadius: BorderRadius.circular(20)),
    child: Row(
      children: [
        Container(
          width: lebar * 0.3,
          height: tinggi,
          // ignore: prefer_const_constructors
          margin: EdgeInsets.only(right: 20),
          decoration: BoxDecoration(
              image: DecorationImage(image: AssetImage(img), fit: BoxFit.cover),
              borderRadius: BorderRadius.circular(20)),
        ),
        Container(
          width: lebar * 0.5,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                // ignore: prefer_const_constructors
                margin: EdgeInsets.only(bottom: 10),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(name,
                        style: GoogleFonts.poppins(
                            // ignore: prefer_const_constructors
                            textStyle: TextStyle(
                                fontSize: 20, fontWeight: FontWeight.w600))),
                    // ignore: prefer_const_constructors
                    Icon(Icons.favorite_border,
                        color: Color.fromARGB(255, 205, 202, 202))
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 10),
                child: Text("Rp. ${price}",
                    style: GoogleFonts.poppins(
                        textStyle: TextStyle(
                            fontSize: 17,
                            fontWeight: FontWeight.w400,
                            color: Colors.red))),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 10),
                child: Wrap(
                  spacing: 5,
                  children: [
                    Icon(Icons.star,
                        color: Color.fromARGB(255, 252, 210, 64), size: 20),
                    Icon(Icons.star,
                        color: Color.fromARGB(255, 252, 210, 64), size: 20),
                    Icon(Icons.star,
                        color: Color.fromARGB(255, 252, 210, 64), size: 20),
                    Icon(Icons.star,
                        color: Color.fromARGB(255, 252, 210, 64), size: 20),
                    Icon(Icons.star,
                        color: Color.fromARGB(255, 205, 202, 202), size: 20),
                    Text(rating.toString(),
                        style: GoogleFonts.poppins(
                            textStyle: TextStyle(
                          fontSize: 15,
                          fontWeight: FontWeight.w600,
                        )))
                  ],
                ),
              ),
              Container(
                margin: EdgeInsets.only(bottom: 10),
                child: Text(desc,
                    style: GoogleFonts.poppins(
                        textStyle: TextStyle(
                            fontSize: 15,
                            fontWeight: FontWeight.w400,
                            color: Colors.grey))),
              )
            ],
          ),
        )
      ],
    ),
  );
}

Selanjutnya kita implementasikan ke dalam homepage

homePage.dart

//start popular
Judul("Popular Package", "See All", tinggi),
Container(
    margin: EdgeInsets.only(bottom: tinggi * 0.03),
    child: Wrap(
    runSpacing: 30,
    children: [
        Popular(
            "assets/img/page1.jpg",
            "Tempat Wisata",
            "500000",
            4.8,
            "Lorem ipsum dolor sit amet consectetur adipisicing elit...",
            lebar,
            tinggi),
        Popular(
            "assets/img/page2.jpg",
            "Tempat Wisata",
            "300000",
            4.8,
            "Lorem ipsum dolor sit amet consectetur adipisicing elit...",
            lebar,
            tinggi),
        Popular(
            "assets/img/page3.jpg",
            "Tempat Wisata",
            "800000",
            4.8,
            "Lorem ipsum dolor sit amet consectetur adipisicing elit...",
            lebar,
            tinggi),
    ],
    ),
)
//end popular

8. Tampilan Home

1. Persiapan Tampilan Home

2. Membuat Menu

3. Membuat Tampilan Atas

4. Membuat Tampilan Seacrh & Kategori

5. Membuat Tampilan Favorit Place

6. Membuat Tampilan Popular Package