Home Flutter Divider and ListTile

Divider and ListTile

0
Divider and ListTile

Hallo sobat flutter, selamat pagi, siang, sore, dan malam, apa kabar nih semuanya ? Pasti kabar baik ya, yang sedang sakit semoga lekas sembuh. Baik, kali ini saya akan menjelaskan cara penggunaan widget Divider dengan widget ListTile, widget divider itu bisa dibilang sebagai garis horizontal, yang biasanya digunakan untuk membuat batasan antara widget a dengan widget b. Langsung saja ke kodingannya, kita buat projek nya terlebih dahulu, nama dan lokasi file nya terserah temen – temen.

Saya hanya akan menggunakan file main.dart, kodingan kali ini sederhana dan hasilnya tidak mengecewakan.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

Di main.dart ini, saya membuat class MyApp dengan StatelessWidget yang me-return MaterialApp dan akan diarahkan ke home nya yaitu MyHomePage().

ListTile(
                  leading: const CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://picsum.photos/seed/picsum/200/300"),
                  ),
                  title: const Text(
                    "Jon Rambo",
                    style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
                  ),
                  subtitle: const Text(
                      "Lorem Ipsum has been the industry's standard dummy text ever since"),
                  trailing: Text(DateFormat.Hm().format(DateTime.now())),
                ),

Di class MyHomePage() terdapat widget ListTile. Pada widget ini saya memanggil beberapa parameter yaitu, leading, title, subtitle dan juga trailing. Pada parameter leading saya memanggil widget CircleAvatar yang didalamnya terdapat NetworkImage, kemudian pada parameter title saya memanggil widget Text untuk membuat sebuah text, begitu juga dengan subtitle dan trailing, namun pada parameter trailing ini saya menggunakan package intl untuk memanggil DateFormat. setelah itu saya akan memanggil widget Divider untuk memberi batasan antara ListTile yang pertama dengan yang kedua.

const Divider(
                  thickness: 1,
                ),

Nah ini widget yang ditunggu – tunggu sebelumnya, yaitu Divider, di widget ini sebetulnya ada beberapa parameter, namun saya hanya memanggil satu parameter, yaitu thickness. Apa sih itu ? thickness itu kurang lebih untuk memberi ketebalan pada garis yang diberikan, jadi saya hanya memberikan ketebelan sebesar 1 angka. Hasil yang akan didapatkan adalah seperti gambar dibawah ini.

Untuk full code nya ada dibawah ini.

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Divider and ListTile"),
      ),
      body: Center(
        child: Container(
          child: Padding(
            padding: const EdgeInsets.only(top: 12),
            child: Column(
              children: [
                ListTile(
                  leading: const CircleAvatar(
                    backgroundImage: NetworkImage(
                        "https://picsum.photos/seed/picsum/200/300"),
                  ),
                  title: const Text(
                    "Jon Rambo",
                    style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
                  ),
                  subtitle: const Text(
                      "Lorem Ipsum has been the industry's standard dummy text ever since"),
                  trailing: Text(DateFormat.Hm().format(DateTime.now())),
                ),
                const Divider(
                  thickness: 1,
                ),
                ListTile(
                  leading: const CircleAvatar(
                    backgroundImage:
                        NetworkImage("https://picsum.photos/id/238/200/300"),
                  ),
                  title: const Text(
                    "Richard",
                    style: TextStyle(fontSize: 17, fontWeight: FontWeight.w600),
                  ),
                  subtitle: const Text(
                      "Lorem Ipsum has been the industry's standard dummy text ever since."),
                  trailing: Text(DateFormat.Hm().format(DateTime.now())),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Semoga bermanfaat, terimakasih.