Mengenal Widget Flutter #3: List View & Text Style

Pendahuluan

Cakupan layar yang terbatas dari Smartphone membuat widget List View sangat efektif digunakan untuk mengatasi penumpukan banyak element secara vertical, karena dengan memanfaatkan scrollable yang dimilikinya maka aplikasi yang kita develop bisa di-scroll untuk melihat objek lainnya.

Tak hanya sampai disitu, List View juga memiliki kemampuan lainnya, yakni fungsi looping untuk menampilkan objek sebanyak n. Dilain sisi, TextStyle juga memiliki pengaruh yang cukup besar terhadap daya tarik dari sebuah teks yang ingin disajikan. Era informasi ini adalah era baca, maka menyediakan informasi yang nikmat dipandang akan membuat penggunanya betah berlama-lama menggunakan aplikasi yang kita miliki.

Baca Juga: Mengenal Widget Flutter #2: Container, Stack & Positioned

Scrollable With List View

Satu dari sekian widget yang akan sering digunakan ketika mendevelop aplikasi dengan Flutter adalah List View. Dengan widget List View memungkinkan kita untuk membuat page scrollable secara vertical karena secara default widget ini telah dilengkapi dengan fungsi scrolling ketika children-nya telah melebihi batas screen.

Install Flutter terlebih dahulu dengan command

flutter create dw_list_view_text_style

Buka project tersebut dan modifikasi file lib/main.dart menjadi

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('List View & Text Style'),
        ),
        body: ListView(
          padding: EdgeInsets.all(10.0),
          children: <Widget>[
          Container(
            height: 60,
            color: Colors.pinkAccent,
            child: Center(child: Text("List View Flutter"),),
          ),
          Container(
            height: 60,
            color: Colors.pink[300],
            child: Center(child: Text("Text Style Flutter"),),
          ),
          Container(
            height: 60,
            color: Colors.pink[200],
            child: Center(child: Text("Scaffold Flutter"),),
          ),
          Container(
            height: 60,
            color: Colors.pink[100],
            child: Center(child: Text("Container Flutter"),),
          ),
        ],),
      ),
    );
  }
}

Penjelasan: Fungsinya sama dengan Column pada sisi ini, dimana widget List View bisa menampung banyak widget lainnya karena menggunakan children dan menampilkannya berurutan secara vertical. Cara kerja dari code di atas hampir sama dengan widget Column hanya berbeda nama widget-nya saja, sehingga kami tidak akan menjelaskan lebih detail pada bagian ini.

Apabila dijalankan maka hasil yang akan kita peroleh seperti gambar berikut

Untuk memastikna fungsi scrollable-nya berjalan sempurna, copy paste Container sebanyak mungkin hingga melebihi screen, kemudian testing untuk di-scroll.

Eits, tidak hanya itu saja, List View menawarkan fitur lainnya yang bernama .builder. Dengan fitur ini, maka kita dapat me-looping widget sebanyak data yang dimiliki tanpa harus menuliskannya satu persatu secara manual. Buka kembali file lib/main.dart dan modifikasi menjadi

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //MENDEFINISIKAN DATA YANG AKAN DILOOPING
  //UNTUK SEMENTARA MASIH STATIS DATANYA, YANG PASTI FORMATNYA BERUPA LIST / ARRAY
  List<String> data = ['Flutter', 'Laravel', 'Daengweb'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('List View & Text Style'),
        ),
        body: ListView.builder(
          padding: EdgeInsets.all(10.0),
          itemCount: data.length,
          itemBuilder: (context, i) {
            return Container(
              margin: EdgeInsets.all(8.0),
              height: 60,
              color: Colors.pinkAccent,
              child: Center(
                child: Text(data[i]),
              ),
            );
          },
        ),
      ),
    );
  }
}

Penjelasan: Attribute itemCount meminta jumlah data yang akan di-looping, sehingga kita menghitung length dari data, maka secara otomatis List View builder akan menampilkan widget yang ada di dalamnya sebanyak value itemCount. itemBuilder akan me-render widget yang ada di dalamnya dengan mengambil index-nya sebagai nilai balik. Maka i akan bernilai sesuai berapa kali looping terjadi.

Sedikit sentuhan dinamis dimana case yang diinginkan adalah ketika tombol + ditekan, maka akan menambahkan data baru untuk ditampilkan. Buka file lib/main.dart dan modifikasi menjadi

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<String> data = [];

  //KETIKA TOMBOL + DITEKAN, MAKA AKAN MENJALAN FUNGSI INI
  void addData() {
    //MENGAMBIL TOTAL DATA YANG ADA KEMUDIAN DITAMBAHKAN 1
    final incrementing = data.length + 1;
    //SET STATE UNTUK MEMBERITAHUKAN BAHWA WIDGET HARUS DI-RERENDER
    setState(() {
     //TAMBAHKAN DATA BARU TERSEBUT KE VARIABLE DATA
      data.add(incrementing.toString());
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //BUAT FLOATING ACTION BUTTON YANG EVENT ONPRESS NYA MENGARAH KE FUNGSI ADDDATA
        floatingActionButton: FloatingActionButton(child: Text("+"), onPressed: addData,),
        appBar: AppBar(
          title: Text('List View & Text Style'),
        ),
        body: ListView.builder(
          padding: EdgeInsets.all(10.0),
          itemCount: data.length,
          itemBuilder: (context, i) {
            return Container(
              margin: EdgeInsets.all(8.0),
              height: 60,
              color: Colors.pinkAccent,
              child: Center(
                child: Text('Looping Sebanyak ' + data[i]),
              ),
            );
          },
        ),
      ),
    );
  }
}

Rebuild Flutter atau restart, kemudian tekan tombol + maka List View akan me-looping Container sebanyak jumlah data yang dimiliki.

Baca Juga: Mengenal Widget Flutter #1: Scaffold & Row-Column

Styling Teks With Text Style

Flutter adalah tentang UI, maka menampilkan teks yang menarik dilihat adalah satu hal yang perlu diperhatikan. Pada sub-bab ini kita akan belajar bagaimana mendekorasi sebuah teks, menggunakan font eksternal, mengubah ukuran dan lain sebagainya.

Agar tidak terlalu banyak snippet code yang dimasukkan, maka pada bagian ini kita hanya akan fokus mendekorasi widget berikut dari List View di atas.

Text('Looping Sebanyak ' + data[i])

Sebagai langkah sederhana, kita akan mengubah warna teks menjadi putih dan memberikan efek bold. Modifikasi widget-nya menjadi

Text('Looping Sebanyak ' + data[i], style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),)

Penjelasan: Jadi seluruhan dekorasi teks bisa dilakukan dengan attribute style yang berisi widget TextStyle.

Lebih lanjut, kita juga bisa memberikan efek 3d atau efek bayangan pada sebuah teks menggunakan attribute shadows dari TextStyle, modifikasi widget Text() menjadi

Text(
  'Looping Sebanyak ' + data[i],
  style: TextStyle(
    fontSize: 30,
    color: Colors.white,
    fontWeight: FontWeight.bold,
    shadows: [
      Shadow(
        color: Colors.black,
        blurRadius: 10.0,
        offset: Offset(5.0, 5.0),
      ),
      Shadow(
        color: Colors.red,
        blurRadius: 10.0,
        offset: Offset(-5.0, 5.0),
      ),
    ]
  ),
),

Penjelasan: Attribute shadows memiliki tipe list atau array sehingga bisa menampung lebih dari 1 widget Shadow di dalamnya, misalnya pada contoh di atas kita memberikan perpaduan shadow berwarna merah dan hitam, dengan blurRadius 10 dan offset-nya berseberangan.

Menggunakan font yang berbeda juga di-cover oleh TextStyle, tapi sebelum itu kita perlu mendefinisikan font tersebut. Download file font dari mana saja, kemudian buat folder fonts di dalam root project, kemudian masukkan file font tersebut di-dalamnya. Sebagai contoh, saya men-download font Chlorinar, definisikan font tersebut dengan menambahkan line berikut atau uncomment code berikut di dalam file pubspec.yaml

fonts:
    - family: Chlorinr
      fonts:
        - asset: fonts/Chlorinr.ttf

Kemudian untuk menggunakan font tersebut, kita cukup memanggil nama font-nya di dalam attribute fontFamily, modifikasi widget Text menjadi

Text(
  'Looping Sebanyak ' + data[i],
  style: TextStyle(
    fontSize: 30,
    color: Colors.white,
    fontWeight: FontWeight.bold,
    fontFamily: 'Chlorinr', //TAMBAHKAN LINE INI
    shadows: [
      Shadow(
        color: Colors.black,
        blurRadius: 10.0,
        offset: Offset(5.0, 5.0),
      ),
      Shadow(
        color: Colors.red,
        blurRadius: 10.0,
        offset: Offset(-5.0, 5.0),
      ),
    ]
  ),
),

Adapun hasil yang diperoleh akan tampak seperti berikut

Intinya adalah dengan memanfaatkan attribute style dari widget Text maka kita dapat melakukan modifikasi terdapat teks yang ingin ditampilkan sesuai dengan selera penggunanya.