Cara Membuat Efek Blur di Aplikasi Flutter untuk Lindungi Data Sensitif  Saat di Background

Cara membuat efek blur di aplikasi Flutter dapat menjadi solusi efektif untuk melindungi informasi sensitif saat aplikasi berada di background. Anda mungkin pernah melihat fitur ini pada aplikasi mobile banking, di mana tampilan layar menjadi blur saat masuk ke recent apps. 

Efek tersebut bukan sekadar tampilan visual menarik, tetapi juga merupakan lapisan keamanan tambahan agar data penting tidak terlihat oleh orang lain. Dalam artikel ini, Anda akan mempelajari bagaimana cara menerapkan fitur serupa di aplikasi Flutter untuk tingkatkan privasi dan keamanan pengguna.

Kenapa Perlu Menambahkan Efek Blur di Flutter?

Ketika aplikasi masuk ke background, sistem operasi biasanya menangkap screenshot yang digunakan sebagai preview di tampilan multitasking. Jika di layar sedang tampil informasi seperti:

• Nama pengguna
• Data transaksi
• Informasi pribadi
• Chat rahasia

…maka semua itu bisa terlihat tanpa perlindungan tambahan. 🫣

Dengan menambahkan efek blur di aplikasi Flutter saat aplikasi tidak aktif, Anda dapat meningkatkan privasi sekaligus memberikan rasa aman bagi pengguna. Teknik ini menjadi salah satu solusi praktis untuk menjaga agar informasi sensitif tidak mudah terlihat saat aplikasi berada di background.

Apa yang Akan Kita Buat

Tujuan kita adalah membuat widget yang:

1. Mendeteksi lifecycle aplikasi (apakah sedang aktif atau tidak)
2. Menampilkan overlay blur saat aplikasi masuk background
3. Menghapus blur ketika aplikasi kembali ke foreground

Result:

✅ Ketika aplikasi masuk background → tampilan diblur
✅ Ketika aplikasi kembali ke foreground → tampilan normal

Cara Membuat Efek Blur di Aplikasi Flutter 

1. Membuat Widget Blur Overlay

import 'dart:ui';

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Positioned.fill(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
        child: ColoredBox(color: Colors.black.withValues(alpha: 0.5)),
      ),
    );
  }
}

2. Deteksi Lifecycle dan Kondisi Menampilkan Blur Overlay

import 'package:counter_application/blur_in_background/blur_overlay.dart';
import 'package:flutter/material.dart';

class BlurInBackgroundWrapper extends StatefulWidget {
  final Widget child;

  const BlurInBackgroundWrapper({super.key, required this.child});

  @override
  State<BlurInBackgroundWrapper> createState() =>
      _BlurInBackgroundWrapperState();
}

class _BlurInBackgroundWrapperState extends State<BlurInBackgroundWrapper>
    with WidgetsBindingObserver {
  bool _isBlurred = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      _isBlurred =
          state == AppLifecycleState.inactive ||
          state == AppLifecycleState.paused;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(children: [widget.child, if (_isBlurred) const BlurOverlay()]);
  }
}

3. Penggunaan di MaterialApp

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      builder: (context, child) => BlurInBackgroundWrapper(child: child!),
      home: MySensitiveInfoScreen(),  //first screen
    );
  }
}

4. Contoh Screen Awal

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hide your sensitive info'),
        backgroundColor: Colors.indigoAccent,
      ),
      body: const Center(
        child: Padding(
          padding: EdgeInsets.all(16),
          child: Column(
            spacing: 20,
            children: [
              Text(
                'Smart Privacy Guard',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              Text(
                'Sensitive information is automatically obscured when the app loses focus',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                'Blurring your whole screen ensures your sensitive information remain confidential',
                style: TextStyle(fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Lihat Hasilnya

• Jalankan aplikasimu
• Pindah ke aplikasi lain
• Buka app switcher → tampilan akan blur
• Kembali ke aplikasi → tampilan normal lagi ✅

Ide Tambahan

• 💼 Tambahkan logo atau ikon keamanan pada overlay widget
• 🌓 Sesuaikan tema blur dengan dark mode / light mode
• 🛡 Kombinasikan dengan flag seperti FLAG_SECURE di Android dan deteksi isScreenCaptured di iOS untuk memblokir screenshot atau merekam layar

Penutup

Fitur ini mungkin terlihat sederhana, tapi bisa memberikan dampak besar — terutama untuk aplikasi yang memuat data medis, keuangan, data personal atau apapun yang bersifat sensitif.

💡 Dengan menambahkan fitur blur ini, Anda membantu melindungi informasi pengguna dari pratinjau layar saat aplikasi tidak aktif. Ini adalah tambahan kecil yang bisa meningkatkan rasa aman pengguna.

Penambahan yang sederhana tapi memberi dampak untuk pengalaman pengguna yang lebih aman dan terpercaya. Jika Anda sedang mengembangkan aplikasi berbasis Flutter dan ingin menerapkan fitur-fitur keamanan seperti ini, LOGIQUE siap membantu. Kami adalah perusahaan yang menyediakan jasa pembuatan aplikasi Flutter yang aman, responsif, dan sesuai kebutuhan bisnis Anda. Hubungi kami segera!