Image Load

Hello world,

Pada konten flutter kali ini saya menemukan sesuatu yang menarik seperti pada aplikasi youtube, yaitu collaped element atau expandable element dimana ada sebuah konten yang sebenarnya panjang pada aplikasi tapi hanya ditampilkan sekilas. Kemudian ada icon untuk menampilkan lebih/collapse dan membuat aplikasi menampilan keseluruhan konten. Setelah dicari-cari akhirnya ketemu beberapa contoh package yang sesuai dimana di sini saya plih salah satu saja yang paling mudah yaitu expandable.

Seperti biasa karena kita menggunakan package dari pub.dev maka kita harus import/install dulu pada file pubspec.yaml di project kita seperti contoh berikut.

expandable: ^4.1.2

Kemudian kita import pada file yang akan digunakan seperti berikut. Pada contoh saya menggunakan main.dart

import 'package:expandable/expandable.dart';

Kemudian buat kode seperti berikut pada halaman kita.

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

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

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

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
appBar: new AppBar(
title: const Text('Border example app'),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: ExpandablePanel(
header: Text("Contoh by Riza", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
collapsed: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue arcu,',
softWrap: true,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
expanded: Text(
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse augue arcu, dapibus vel porta id, ultrices quis leo. Cras id quam quis neque mattis viverra ac eget ante. Etiam fringilla eget enim eget lacinia.',
softWrap: true,
),
),
),
),
);
}
}

Pada kode di atas  ada header yang merupakan title dari panel yang kita buat. Kemudian ada collapsed yang merupakan preview dari konten dimana konten hanya ditampilkan sekilas. Pada contoh ini ada maxLines dimana kita batasi konten yang menjadi preview hanya sampai 2 baris. Tetapi meski sduah dibatasi dengan maxLines kalau bisa memang konten yang dimasukkan pada collapsed juga pendek saja.

Kemudian ada expanded yang merupakan konten keseluruhan yang jika diklik collapsed makan akan ditampilkan keseluruhan konten yang ada pada expanded. (semoga gak bingung :D hehe ). Kira-kira previewnya menjadi seperti berikut.




Selamat mencoba :)