Posts

Bismillah, pada kali ini kita akan mencoba membuat widget Wrap pada Flutter dan kita juga akan menggunakan widget Chip untuk membuat tombol-tombol kecil.

Wrap adalah istilah dimana ketika sebuah widget yang telah memenuhi layar secara horizontal, maka widget tersebut akan otomatis pindah ke bawah.

kita lanjut dengan membuat sebuah project baru seperti berikut

Jika sudah, maka kita buat sebuah halaman baru seperti berikut

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Wrap Widget"),
      ),
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Wrap(
              spacing: 4,
              runSpacing: 1,
              children: <Widget>[
                loadChip("Syahrizal Akbar", "SA"),
                loadChip("Ahmad Maulana", "AM"),
                loadChip("Bambang Sudimara", "BS"),
                loadChip("Dodo Putra", "DP"),
                loadChip("Jamil Jiddan", "JJ"),
                loadChip("Jadene Brewer", "JB"),
                loadChip("Amar Carter", "AC"),
                loadChip("Jamel Howard", "JH"),
                loadChip("Dulcie Foster", "DF"),
                loadChip("Cyrus Wardle", "CW"),
                loadChip("Kealan Connelly", "KC"),
                loadChip("Teri Shepard", "TS"),
                loadChip("Luca Rawlings", "LR"),
                loadChip("Marlie Rose", "MR"),
                loadChip("Taya Cowan", "TC"),
              ],
            ),
          )
        ],
      ),
    );
  }
  
  Chip loadChip(String name, String alias) {
    return Chip(
      avatar: CircleAvatar(backgroundColor: randomColor(), child: Text(alias, style: TextStyle(color: Colors.white, fontSize: 10),)),
      label: Text(name, style: TextStyle(fontSize: 10),)
    );
  }

  // mengembalikan warna secara acak
  Color randomColor() {
    List color = [Colors.blue,
      Colors.green,
      Colors.red,
      Colors.purple,
      Colors.pink,
      Colors.orange];
    return color[Random().nextInt(color.length)];
  }
}

dan jika kita run, maka hasilnya seperti berikut :