Program Dart Flutter yang menunjukkan penggunaan widget Card dan bagaimana melakukan parsing data dalam sebuah aplikasi Flutter.

 

Contoh Program Flutter dengan Card dan Parsing Data 

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

// Data model
class User {
  final String name;
  final String email;
  final String phone;

  User({required this.name, required this.email, required this.phone});
}

// Main function
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card & Parsing Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UserListScreen(),
    );
  }
}

// Main screen displaying list of users
class UserListScreen extends StatelessWidget {
  // Sample data (pretending it's parsed from a JSON or API)
  final List<User> users = [
    User(name: 'John Doe', email: 'johndoe@example.com', phone: '123-456-7890'),
    User(name: 'Jane Smith', email: 'janesmith@example.com', phone: '098-765-4321'),
    User(name: 'Alice Johnson', email: 'alicej@example.com', phone: '111-222-3333'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          return UserCard(user: users[index]);
        },
      ),
    );
  }
}

// Card widget to display individual user information
class UserCard extends StatelessWidget {
  final User user;

  UserCard({required this.user});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10),
      elevation: 5,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              user.name,
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text('Email: ${user.email}'),
            Text('Phone: ${user.phone}'),
            SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                // Show details in a new screen
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => UserDetailScreen(user: user),
                  ),
                );
              },
              child: Text('View Details'),
            )
          ],
        ),
      ),
    );
  }
}

// Detail screen for a single user
class UserDetailScreen extends StatelessWidget {
  final User user;

  UserDetailScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(user.name),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Name: ${user.name}',
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Text('Email: ${user.email}', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('Phone: ${user.phone}', style: TextStyle(fontSize: 18)),
          ],
        ),
      ),
    );
  }
}

Penjelasan Program

1. Model User:

   • Kelas User digunakan untuk merepresentasikan data pengguna dengan properti name, email, dan phone. Data ini seakan-akan berasal dari JSON atau API dan diparsing ke dalam objek Dart.

2. UserListScreen:

   • Ini adalah layar utama yang menampilkan daftar pengguna dalam bentuk Card. Setiap elemen Card menampilkan informasi dasar pengguna seperti nama, email, dan nomor telepon.
   • ListView.builder digunakan untuk membangun daftar Card secara dinamis berdasarkan jumlah pengguna.

3. Widget UserCard:

   • Setiap UserCard menampilkan informasi singkat dari objek User yang dilewatkan ke dalam widget.
   • Tombol "View Details" menggunakan Navigator.push() untuk berpindah ke layar detail pengguna ketika ditekan.

4. UserDetailScreen:

   • Ini adalah layar kedua yang ditampilkan ketika pengguna menekan tombol "View Details". Halaman ini menampilkan informasi lebih rinci dari pengguna yang dipilih.

Cara Kerja Parsing Data

• Pada contoh ini, data pengguna diproses dari objek User. Meskipun dalam contoh ini datanya ditulis secara langsung, biasanya data akan diambil dari API dalam bentuk JSON dan diparsing menjadi model Dart. Setiap elemen data (nama, email, dll.) kemudian dipetakan ke dalam UI menggunakan widget Flutter seperti Text, Card, dan ListView.

Dengan contoh ini, Anda bisa memahami bagaimana menggunakan widget Card dan bagaimana memparsing data ke dalam komponen-komponen visual di Flutter.