Ticket Material in Flutter

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 ­čÖé

spot_imgspot_img

Subscribe

Related articles

Memanfaatkan Include Dan Required Function Pada PHP

 Halo teman-teman sobat baraja udacoding, selamat datang kembali di...

CARA MEMBUAT KONEKSI DATABASE DI PHP

Halo teman-teman, selamat datang kembali di baraja uda coding....

Pseudo Class Dan Penggunaannya part 2

Anchor Pseudo-classesMerubah link dengan beberapa cara yang berbeda tergantung...

Gridview and Container with Random Colors

Hallo sobat flutter, selamat pagi, siang, sore, malam. Apa...

Mengenal Pseudo Element Dan Penggunaannya part 2

Seperti yang kita semua ketahui tentang Pseudo Element pada artikel...
spot_imgspot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here