Halo sobat baraja coding, pada artikel kali ini kita akan membahas tentang Ticket Material in Flutter. Ticket material adalah sebuah widget pada flutter yang dapat digunakan untuk menampilkan ticket pada aplikasi seperti ticket bioskop, ticket pesawat, dan lainnya.
Step 1. Tambahkan Dependencies
Tambahkan https://pub.dev/packages/ticket_material/install pada pubspec.yml
dependencies: flutter: sdk: flutter ticket_material: ^0.3.1 |
Step 2. Tambahkan Build Left
Tambahkan function _buildLeft() seperti berikut
_buildLeft({required String text1, required String text2, required String text3}) { return Container( padding: EdgeInsets.only(top: 12, left: 14, right: 14), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(text1, textAlign: TextAlign.center, style: TextStyle( fontSize: 20, fontWeight: FontWeight.w500, color: Color(0xff1E4D7B))), ], ), ), SizedBox( height: 19, ), Container( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.location_on, size: 7.5, color: Color(0xff9B9B9B), ), SizedBox( width: 2.2, ), Text(text2, style: TextStyle( fontSize: 10.3, fontWeight: FontWeight.w500, color: Color(0xff9B9B9B))), ], ), ), SizedBox( height: 15, ), Container( child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Text(text3, style: TextStyle( fontSize: 14, fontWeight: FontWeight.w300, color: Color(0xff1E4D7B))) ], ), ) ], )); } |
Step 3. Tambahkan Build Right
Tambahkan function _buildRight() seperti berikut
_buildRight({required String text}) { return Container( padding: EdgeInsets.only(top: 8, left: 2, right: 2), child: Column( children: [ Text( text, style: TextStyle( fontSize: 73, fontWeight: FontWeight.w300, color: Color(0xffEC1F38)), ), Text(‘Sep, 2019’, style: TextStyle( fontSize: 14, fontWeight: FontWeight.w300, color: Color(0xff1E4D7B))) ], )); } |
Step 4. Membuat Ticket Material
Buat ticket material dengan menambahkan code seperti berikut
Padding( padding: EdgeInsets.only(left: 12, right: 12), child: Container( child: Center( child: SizedBox( width: 352, child: TicketMaterial( height: 138, colorBackground: Colors.white, radiusBorder: 20.0, leftChild: _buildLeft( text1: ‘Mengundang Rupiah\nDatang ke Rekening’, text2: ‘Jakarta Design Centre’, text3: ‘Category : Free’), rightChild: _buildRight(text: ‘1’), )), )), ), |
Complete Code
import ‘package:flutter/material.dart’; import ‘package:ticket_material/ticket_material.dart’; class Tickets extends StatefulWidget { const Tickets({Key? key}) : super(key: key); @override _TicketsState createState() => _TicketsState(); } class _TicketsState extends State<Tickets> { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Color(0xffF4F6F9), body: ListView( children: [ Stack( clipBehavior: Clip.none, children: [ Container( height: 130, padding: EdgeInsets.only(top: 20, left: 10, right: 10), decoration: BoxDecoration( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(47), bottomRight: Radius.circular(47), ), color: Color(0xff3D902B)), child: Row( children: [ IconButton( onPressed: () {}, icon: Icon( Icons.arrow_back, color: Colors.white, )), SizedBox( width: 50, ), Text( ‘Purchase History’, style: TextStyle(color: Colors.white, fontSize: 23), ) ], ), ), Positioned( bottom: -120, left: 0, right: 0, child: Container( padding: EdgeInsets.only(left: 12, right: 12), child: Center( child: SizedBox( width: 352, child: TicketMaterial( height: 138, colorBackground: Colors.white, radiusBorder: 20.0, leftChild: _buildLeft( text1: ‘Djakarta\nWarehouse Project’, text2: ‘Jakarta Design Centre’, text3: ‘Category : Paid’), rightChild: _buildRight(text: ‘8’), )))) )], ), SizedBox( height: 140, ), Padding( padding: EdgeInsets.only(left: 12, right: 12), child: Container( child: Center( child: SizedBox( width: 352, child: TicketMaterial( height: 138, colorBackground: Colors.white, radiusBorder: 20.0, leftChild: _buildLeft( text1: ‘Mengundang Rupiah\nDatang ke Rekening’, text2: ‘Jakarta Design Centre’, text3: ‘Category : Free’), rightChild: _buildRight(text: ‘1’), )), )), ), SizedBox( height: 20, ), Padding( padding: EdgeInsets.only(left: 12, right: 12), child: Container( child: Center( child: SizedBox( width: 352, child: TicketMaterial( height: 138, colorBackground: Colors.white, radiusBorder: 20.0, leftChild: _buildLeft( text1: ‘Menjadi\nPengusaha Sejak Dini’, text2: ‘Jakarta Design Centre’, text3: ‘Category : Free’), rightChild: _buildRight(text: ‘8’), )), )), ), SizedBox( height: 20, ), Padding( padding: EdgeInsets.only(left: 12, right: 12), child: Container( child: Center( child: SizedBox( width: 352, child: TicketMaterial( height: 138, colorBackground: Colors.white, radiusBorder: 20.0, leftChild: _buildLeft( text1: ‘Bedah Buku\n”Kain Kafan Tak Bersaku”‘, text2: ‘Jakarta Design Centre’, text3: ‘Category : Free’), rightChild: _buildRight(text: ‘7’), )), )), ), SizedBox( height: 20, ), ], ), ); } _buildRight({required String text}) { return Container( padding: EdgeInsets.only(top: 8, left: 2, right: 2), child: Column( children: [ Text( text, style: TextStyle( fontSize: 73, fontWeight: FontWeight.w300, color: Color(0xffEC1F38)), ), Text(‘Sep, 2019’, style: TextStyle( fontSize: 14, fontWeight: FontWeight.w300, color: Color(0xff1E4D7B))) ], )); } _buildLeft({required String text1, required String text2, required String text3}) { return Container( padding: EdgeInsets.only(top: 12, left: 14, right: 14), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Container( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(text1, textAlign: TextAlign.center, style: TextStyle( fontSize: 20, fontWeight: FontWeight.w500, color: Color(0xff1E4D7B))), ], ), ), SizedBox( height: 19, ), Container( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Icon( Icons.location_on, size: 7.5, color: Color(0xff9B9B9B), ), SizedBox( width: 2.2, ), Text(text2, style: TextStyle( fontSize: 10.3, fontWeight: FontWeight.w500, color: Color(0xff9B9B9B))), ], ), ), SizedBox( height: 15, ), Container( child: Row( mainAxisAlignment: MainAxisAlignment.start, children: [ Text(text3, style: TextStyle( fontSize: 14, fontWeight: FontWeight.w300, color: Color(0xff1E4D7B))) ], ), ) ], )); } } |
Hasil Run :
Jadi sekian pada artikel kali ini, sampai jumpa pada artikel selanjutnya. Selamat Mencoba 🙂