Flutter’da Widget’ı Resme Dönüştürme (Widget to Image) Nasıl Yapılır?
Flutter ile mobil uygulama geliştirirken bazen ekrandaki bir widget’ı doğrudan resim formatına dönüştürmek gerekebilir. Örneğin kullanıcıya özel olarak tasarlanmış bir kartı görsel olarak kaydedip paylaşmak isteyebilirsiniz. Ya da uygulamanız üzerinden sosyal medya platformlarına içerik gönderirken kişiye özel bir görsel oluşturup paylaşma ihtiyacı doğabilir.
Kişiye özel bir görsel oluşturmanın en pratik yolu ilgili widget’ı doğrudan resme dönüştürmektir. Örneğin kullanıcının profil fotoğrafı, kullanıcı adı ve içerikle ilgili bilgilerin yer aldığı şık bir card widget’ı geliştirilebilir. Peki bir widget nasıl resme dönüştürülür?
Flutter’da Widget’ı Resme Dönüştürmek
Bunun için RepaintBoundary ve GlobalKey kullanacağız. Bilmeyenler için RepaintBoundary, çizim (paint) işlemlerini izole eden özel bir widget’tır. Bu izolasyon sayesinde yalnızca hedef widget’ın bağımsız bir kopyasını elde edebiliriz.
GlobalKey ise widget’ları benzersiz şekilde tanımlamamıza ve onlara doğrudan erişmemize yarayan bir anahtar türüdür. Onu bir kapı anahtarı gibi düşünebilirsiniz. Bu durumda Widget ağacı apartman, Her widget bir daire, GlobalKey ise dairenin özel anahtarıdır.
GlobalKey, yalnızca bağlı olduğu widget’ın kapısını açar, yani o widget’ın özelliklerine, context’ine ve render objesine erişebilmemizi sağlar.
Get Emir Bolat’s stories in your inbox
Join Medium for free to get updates from this writer.
İşte biz de GlobalKey 'i RepaintBoundary ile birlikte kullanarak bu izole edilmiş widget’ın render objesine ulaşıp toImage() metodu aracılığıyla yüksek çözünürlüklü bir görsel elde edeceğiz.
Aşağıdaki örnek koda göz atabilirsiniz.
class WidgetToImageDemo extends StatefulWidget {
const WidgetToImageDemo({super.key});
@override
State<WidgetToImageDemo> createState() => _WidgetToImageDemoState();
}
class _WidgetToImageDemoState extends State<WidgetToImageDemo> {
final _key = GlobalKey();
Uint8List? _capturedImage;
Future<void> _capture() async {
// UI çizim işleminin bitmesini bekle
await WidgetsBinding.instance.endOfFrame;
final boundary =
_key.currentContext!.findRenderObject() as RenderRepaintBoundary;
final image = await boundary.toImage(pixelRatio: 3);
final byteData = await image.toByteData(format: ui.ImageByteFormat.png);
final bytes = byteData!.buffer.asUint8List();
image.dispose();
setState(() {
_capturedImage = bytes;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Widget ➜ Image')),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
children: [
// Fotoğrafını çekeceğimiz widget
RepaintBoundary(
key: _key,
child: Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.amber.shade200,
borderRadius: BorderRadius.circular(12),
),
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
CircleAvatar(child: Icon(Icons.person)),
SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('emir.dev',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
Text('Flutter • AI • Mobile'),
],
),
],
),
),
),
const SizedBox(height: 16),
FilledButton(onPressed: _capture, child: const Text('PNG oluştur')),
const SizedBox(height: 16),
// Çekilen fotoğraf önizleme
if (_capturedImage != null) ...[
const Text('📸 Çekilen Görsel:',
style: TextStyle(fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Image.memory(_capturedImage!),
],
],
),
),
);
}
}
Kodları buradan hızlıca deneyebilirsiniz: https://dartpad.dev/?id=7c71240c76a478a3c8ac0bc5259b71ca
Şu anki halinde görebileceğiniz gibi herhangi bir paket kullanmadık. Yine de paket kullanmak veya göz atmak isterseniz aşağıdakileri inceleyebilirsiniz.
