Flutter Tile Card

Dalam artikel ini, akan dipelajari proses implementasi Expansion Tile Card dalam aplikasi Flutter dengan membangun aplikasi sederhana Flutter. Untuk membangun aplikasi, ikuti langkah-langkah di bawah ini:

Tambahkan dependency expansion_tile_card pada file pubspec.yaml
Impor dependency ke dalam file main.dart
Tambahkan aset yang akan digunakan di dalam direktori src/assets/
Buat struktur aplikasi dasar
Buat Halaman Utama untuk aplikasi
Panggil ExpansionTileCard pada body aplikasi
Berikan konten pada Expansion Card

Sekarang, mari kita lihat langkah-langkahnya secara detail.

Menambahkan Dependency

Tambahkan dependency expansion_tile_card ke bagian dependencies pada file pubspec.yaml seperti yang ditunjukkan di bawah ini:

Mengimpor Dependency

Gunakan baris kode di bawah ini untuk menambahkan expansion_tile_card ke file main.dart:

import 'package:expansion_tile_card/expansion_tile_card.dart';

Menambahkan Aset

Pada tahap ini, kita akan membuat direktori aset di dalam direktori utama proyek yang akan menampung gambar yang akan ditampilkan saat kartu diperluas. Hal ini akan terlihat seperti contoh di bawah ini:

Catatan: Aktifkan assets yang terdapat pada bagian assets di file pubspec.yaml untuk menggunakannya dalam aplikasi.

Menyusun Struktur Aplikasi

Buatlah sebuah class Myapp dan extends melalui StatelessWidget dan bangunlah root aplikasi seperti yang ditunjukkan di bawah ini:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ExpansionTileCard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Nextgen Tutorial'),
    );
  }
}

Membuat Homepage

Untuk membuat Halaman Utama pada aplikasi, buatlah sebuah class bernama Homepage dan extends melalui StatelessWidget. Kemudian, buat sebuah Appbar dan body untuk aplikasi seperti yang ditunjukkan di bawah ini:

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final GlobalKey cardA = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: 
    );
  }
}

Memanggil Dependency methods

Metode dependency dapat dipanggil di dalam body Homepage dengan melakukan panggilan ke ExpansionTileCard. Tindakan juga akan ditambahkan pada saat tap ke tile yang akan mengarah ke expanded tile seperti yang ditunjukkan di bawah ini:

ExpansionTileCard(
        key: cardA,
        leading: const CircleAvatar(child: Text('A')),
        title: const Text('Tap untuk Expand!'),
        subtitle: const Text('Terdapat Logo Nextgen di dalamnya.'),
        children: [
          const Divider(
            thickness: 1.0,
            height: 1.0,
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16.0,
                  vertical: 8.0,
                ),
                child: Image.asset('assets/nextgen.jpg')),
          ),
        ],
      ),

Berikut ini source code komplit setelah anda mengikuti semua step sebelumnya

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ExpansionTileCard',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Nextgen Tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final GlobalKey cardA = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ExpansionTileCard(
        key: cardA,
        leading: const CircleAvatar(child: Text('A')),
        title: const Text('Tap untuk Expand!'),
        subtitle: const Text('Terdapat Logo Nextgen di dalamnya.'),
        children: [
          const Divider(
            thickness: 1.0,
            height: 1.0,
          ),
          Align(
            alignment: Alignment.centerLeft,
            child: Padding(
                padding: const EdgeInsets.symmetric(
                  horizontal: 16.0,
                  vertical: 8.0,
                ),
                child: Image.asset('assets/nextgen.jpg')),
          ),
        ],
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Flutter Listview
Tutorial setelahnya : Class Icon Di Flutter
Semua Tutorial Flutter : Tutorial Flutter