Cara Membuat Widget Transparent Opacity Flutter

Hey hello para flutter developer, opacity cukup penting dalam meningkatkan tampilan design apda aplikasi mobile buatan kita, pada kali ini kita akan pelajari bagaimana caranya memberikan opacity kepada widget di flutter sehingga terlihat lebih transparan.

Pertama, kita akan coba bikin kodingan untuk membuat header teks pada aplikasi barbershop, labelnya adalah Popular yang akan kita jadikan sebagai background. Well, di sini kita menggunakan warna background gelap dengan kode Color(0xff080710).

Setelah itu kita akan buat widget Text yang berlabel Popular, teks tersebut akan dibesarkan lalu dibuat transparent sehingga bisa kita tiban dengan widget lain ke depannya nanti, kurang lebih kodingannya akan seperti ini:

import 'package:flutter/material.dart';

class ExploreBarber extends StatelessWidget {
  const ExploreBarber({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff080710),
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                const Padding(
                  padding: const EdgeInsets.only(
                    left: 30,
                  ),
                  child: Text(
                      'Popular',
                      style: TextStyle(
                        color: Color(0xffffffff),
                        fontSize: 100,
                      ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Setelah itu kita bisa menambahkan widget Opacity yang membungkus widget yang ingin kita buat menjadi lebih transparan, kodingannya seperti ini:

Opacity(
                    opacity: 0.1,
                    child: Text(
                      'Popular',
                      style: TextStyle(
                        color: Color(0xffffffff),
                        fontSize: 100,
                      ),
                    ),
                  ),

Pada contoh kodingan flutter di atas, kita telah membuat text Popular menjadi lebih transparent dari warna aslinya yaitu adalah putih Color(0xffffffff), well, kamu juga bisa menerapkan Opacity kepada widget-widget lainnya demi meningkatkan user experience dan user interface design pada aplikasi buatan kamu saat ini.