Flutter CircleAvatar widget, genellikle kullanıcının profil resmini veya bir kişinin temsilini göstermek için kullanılan daire şeklinde bir resim görüntüler. İşte CircleAvatar kullanımına örnekler:
- Temsil Görseli
|
1 2 3 4 |
CircleAvatar( backgroundImage: AssetImage('assets/images/user.png'), radius: 50, ), |
- İnitial Harf
|
1 2 3 4 5 |
CircleAvatar( child: Text('TK'), backgroundColor: Colors.deepPurple, foregroundColor: Colors.white, ), |
- Ağ İsteği ile Yüklenen Görsel
|
1 2 3 4 |
CircleAvatar( backgroundImage: NetworkImage('https://picsum.photos/200'), radius: 50, ), |
- Çerçeve ve Kenarlık Ayarlamaları
|
1 2 3 4 5 6 7 8 9 10 |
CircleAvatar( backgroundImage: AssetImage('assets/images/user.png'), radius: 50, foregroundColor: Colors.white, backgroundColor: Colors.redAccent, // Çerçeve foregroundImage: AssetImage('assets/images/border.png'), // Kenarlık child: Text('TK'), ), |
- Kendi Widget’ınızı Kullanın
|
1 2 3 4 5 |
CircleAvatar( radius: 50, backgroundColor: Colors.deepOrangeAccent, child: MyCustomWidget(), ), |
Bu sadece birkaç örnek olup, CircleAvatar’ın çeşitli kullanımları vardır. Özellikle, radius, backgroundImage, backgroundColor, foregroundColor, child, foregroundImage özelliklerini kullanarak birçok şekil ve görünüm oluşturabilirsiniz.
Örneklerin birleştirildiği bir örnek uygulama aşağıdaki şekildedir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'CircleAvatar Örneği', home: Scaffold( appBar: AppBar( title: Text('CircleAvatar Örneği'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ CircleAvatar( radius: 50, backgroundImage: AssetImage('assets/images/profile.jpg'), ), SizedBox(height: 20), CircleAvatar( radius: 50, backgroundColor: Colors.blue, child: Text('JN'), ), SizedBox(height: 20), CircleAvatar( radius: 50, backgroundImage: NetworkImage('https://picsum.photos/200'), ), ], ), ), ), ); |
İlk Yorumu Siz Yapın