Ticket Material in Flutter

Mobile

Ticket Material in Flutter

Farihah Salsabila

November 5, 2021

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 🙂