Halo teman- teman,
Kali ini kita akan bahas tentang Timelines di Flutter, untuk menggunakan Timelines kali ini kita membutuhkan dependencies yang diperoleh dari pub.dev. Isikan kata kunci timlines, dan pilih seperti pada gambar berikut :
Kemudian tambahkan pada file pubspec.yaml
dependencies:
flutter:
sdk: flutter
timelines: ^0.1.0
Timeline sendiri yaitu rentetan kegiatan yang ditampilkan secara horizontal, maupun vertikal. Di sini kita akan membuat timeline secara vertikal, namun teman – teman tentu saja dapat membuat nya secara horizontal juga, dengan memanfaatkan atribut atribut yang ada.
Berikut source code :
import 'package:flutter/material.dart';
import 'package:timelines/timelines.dart';
class PageListView extends StatefulWidget {
@override
_PageListViewState createState() => _PageListViewState();
}
class _PageListViewState extends State<PageListView> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Timeline'),
),
body: Dialog(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 10, vertical: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
'Jadwal Pendaftaran',
style: TextStyle(
fontSize: 16,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
SizedBox(height: 15),
TimelineTile(
oppositeContents: Padding(
padding: const EdgeInsets.only(right: 10, bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 0,
blurRadius: 1.5,
offset: Offset(0, 0)),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pendaftaran',
style: TextStyle(
fontSize: 12,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
Text(
'16 November 2020 - 16 Januari 2020',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.75),
),
),
SizedBox(height: 5),
Text(
'Pendaftaran online sekaligus wawancara dan daftar ulang, karena TK IT metode pendaftarannya adalah non-kolektif (Tutup jika kuota telah terpenuhi)',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
color: Colors.black.withOpacity(0.75),
),
),
],
),
),
),
nodePosition: 1,
node: TimelineNode(
indicator: CircleAvatar(
backgroundColor: Color(0xff2B976B),
child: Icon(
Icons.calendar_today_rounded,
color: Colors.white,
)),
startConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
endConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
),
),
TimelineTile(
oppositeContents: Padding(
padding: const EdgeInsets.only(right: 10, bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 0,
blurRadius: 1.5,
offset: Offset(0, 0)),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Wawancara Online',
style: TextStyle(
fontSize: 12,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
Text(
'-',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.75),
),
),
SizedBox(height: 5),
Text(
'Fleksibel, sesuai urutan daftar dan konfirmasi dari panitia TKIT',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
color: Colors.black.withOpacity(0.75),
),
),
],
),
),
),
nodePosition: 1,
node: TimelineNode(
indicator: CircleAvatar(
backgroundColor: Color(0xff2B976B),
child: Icon(
Icons.calendar_today_rounded,
color: Colors.white,
)),
startConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
endConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
),
),
TimelineTile(
oppositeContents: Padding(
padding: const EdgeInsets.only(right: 10, bottom: 10),
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 0,
blurRadius: 1.5,
offset: Offset(0, 0)),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pengumuman Kelulusan',
style: TextStyle(
fontSize: 12,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
Text(
'-',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.75),
),
),
SizedBox(height: 5),
Text(
'7 Hari setelah wawancara',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
color: Colors.black.withOpacity(0.75),
),
),
],
),
),
),
nodePosition: 1,
node: TimelineNode(
indicator: CircleAvatar(
backgroundColor: Color(0xff2B976B),
child: Icon(
Icons.calendar_today_rounded,
color: Colors.white,
)),
startConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
endConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
),
),
TimelineTile(
oppositeContents: Padding(
padding: const EdgeInsets.only(right: 10),
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
spreadRadius: 0,
blurRadius: 1.5,
offset: Offset(0, 0)),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Daftar Ulang',
style: TextStyle(
fontSize: 12,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black,
),
),
Text(
'-',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
fontWeight: FontWeight.w600,
color: Colors.black.withOpacity(0.75),
),
),
SizedBox(height: 5),
Text(
'Maksimal 14 hari setelah dinyatakan lulus',
style: TextStyle(
fontSize: 10,
fontFamily: 'OpenSans',
color: Colors.black.withOpacity(0.75),
),
),
],
),
),
),
nodePosition: 1,
node: TimelineNode(
indicator: CircleAvatar(
backgroundColor: Color(0xff2B976B),
child: Icon(
Icons.calendar_today_rounded,
color: Colors.white,
)),
startConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
endConnector: SolidLineConnector(
color: Colors.black.withOpacity(0.25),
thickness: 1,
),
),
),
],
),
),
),
);
}
}