Yu Tant

Home
extract widget

Flutter : Penggunaan Extract Widget

Apa itu Extract Widget? Gampangnya extract widget digunakan untuk menyingkat script kita yang
panjang menjadi class baru yang nanti tinggal lempar method saja. Ok kali ini pengembangan dari listTile yang sebelumnya.

Apa saja yang aku pelajari hari ini?

  • Penggunaan pub.dev (Faker 2.0.0) : sebagai generator fake info 
  • Penggunaan Extract Widget : menyingkat perulangan script menjadi class.
cara penggunaan dependensi Faker cukup meng-COPY dari webnya dan didaftarkan di pubspec.yaml dibawah dependencies : 






selanjutnya simpan dan akan mereload depedensinya. nah penggunaanya cukup mudah tinggal import package  dan mendaftarkan faker pada class :

import 'package:faker/faker.dart'; <<================== Import
import 'package:flutter/material.dart';

main() {
  runApp(ExWid());
}

class ExWid extends StatelessWidget {
  var faker = new Faker(); <<==========================Didaftarkan
  @override


Selanjutnya tinggal menggunakan turunan info yang disediakan

Nah untuk extract widget cuku klik kanan pilih refactor kemudian extract widget kemudian tinggal isi nama class :


dan berikut full contoh penggunaan : 
import 'package:faker/faker.dart';
import 'package:flutter/material.dart';

main() {
  runApp(ExWid());
}

class ExWid extends StatelessWidget {
  var faker = new Faker();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('yTn : Extract Widget'),
          centerTitle: true,
        ),
        body: ListView.builder(
          itemCount: 50,
          itemBuilder: (context, index) {
            return ChatItem(
              imageUrl: "https://randomuser.me/api/portraits/women/$index.jpg",
              title: faker.person.name(),
              subTitle: faker.lorem.sentence(),
            );
          },
        ),
      ),
    );
  }
}

class ChatItem extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String subTitle;

  ChatItem(
      {required this.imageUrl, required this.title, required this.subTitle});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      leading: CircleAvatar(
        backgroundImage: NetworkImage(imageUrl),
      ),
      title: Text(title),
      subtitle: Text(subTitle),
      trailing: Text('09.00 PM'),
    );
  }
}