Senaryo: Bir kullanıcının profiline tıkladığında, profili genişleyen bir şekilde açılsın ve kapansın.
Bu senaryoyu gerçekleştirmek için AnimatedContainer Widget’ını kullanabiliriz. AnimatedContainer, kendisine verilen özelliklerde (width, height, padding, margin, color vb.) ani bir şekilde geçiş yapabilen bir Container Widget’ıdır. Bu nedenle, genişleyen ve daralan bir profile sahip olmak istediğimizde AnimatedContainer Widget’ını kullanabiliriz.
Örnek Kod:
|
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
import 'package:flutter/material.dart'; class ProfilePage extends StatefulWidget { @override _ProfilePageState createState() => _ProfilePageState(); } class _ProfilePageState extends State<ProfilePage> { bool _isExpanded = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Profil'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ InkWell( onTap: () { setState(() { _isExpanded = !_isExpanded; }); }, child: Container( width: 100, height: 100, decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.grey[300], ), ), ), SizedBox(height: 20), AnimatedContainer( duration: Duration(milliseconds: 500), width: _isExpanded ? 200 : 0, height: _isExpanded ? 200 : 0, decoration: BoxDecoration( color: Colors.grey[300], borderRadius: BorderRadius.circular(_isExpanded ? 20 : 0), ), child: _isExpanded ? Center( child: Text( 'Profil İçeriği', style: TextStyle(fontSize: 20), ), ) : null, ), ], ), ), ); } } |
Burada, AnimatedContainer‘ın width ve height özelliklerini, _isExpanded değişkenine bağlı olarak değiştiriyoruz. _isExpanded true olduğunda, AnimatedContainer’ın boyutları genişleyecek ve profil içeriği görüntülenecektir.
InkWell widget’i, kullanıcının profil resmine tıkladığında _isExpanded değişkeninin değerini değiştirmek için kullanılır. Böylece, profil resmine her tıklandığında, profil genişleyecek veya daralacaktır.
AnimatedContainer ayrıca decoration özelliği aracılığıyla da birçok stil özelliğine sahip olabilir. Bu örnekte, borderRadius özelliği, profil daraldığında dairesel şekli koruyacak şekilde ayarlanmıştır.
Sonuç olarak, AnimatedContainer Widget’ı, herhangi bir Widget’ın animasyonlu bir şekilde genişlemesi ve daralması için kullanılabilir. Bu sayede, kullanıcıların ilgisini çekecek interaktif ve animasyonlu arayüzler tasarlamak daha kolay hale gelir.
AnimatedContainer‘ın kullanımı sadece boyutu değiştirmekle sınırlı değildir. Aynı zamanda arka plan rengi, border rengi, padding, margin gibi diğer stil özellikleri de animasyonlu bir şekilde değiştirilebilir. Örneğin, bir uygulamada kullanıcının bir butona tıkladığında, butonun rengi değişebilir ve bu renk değişimi animasyonlu bir şekilde gerçekleştirilebilir.Örnek Kod:
|
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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
import 'package:flutter/material.dart'; class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { bool _isClicked = false; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('AnimatedContainer Örneği'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ AnimatedContainer( duration: Duration(milliseconds: 500), width: _isClicked ? 200 : 100, height: 50, decoration: BoxDecoration( color: _isClicked ? Colors.green : Colors.red, borderRadius: BorderRadius.circular(_isClicked ? 20 : 0), boxShadow: [ BoxShadow( color: _isClicked ? Colors.green[200] : Colors.red[200], blurRadius: _isClicked ? 20 : 0, ), ], ), child: InkWell( onTap: () { setState(() { _isClicked = !_isClicked; }); }, child: Center( child: Text( 'Tıkla!', style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, ), ), ), ), ), ], ), ), ); } } |
Bu örnekte, AnimatedContainer‘ın boyutu değişmiyor, ancak arka plan rengi, border radius ve gölgelendirme değişiyor. Butona tıklandığında, _isClicked değişkeni değiştirilerek, AnimatedContainer‘ın özellikleri animasyonlu bir şekilde değiştirilir.
BoxDecoration sınıfı, AnimatedContainer‘ın stil özelliklerini ayarlamak için kullanılır. Bu örnekte, borderRadius özelliği butonun tıklanabilir hale geldiğinde 20 olacak şekilde ayarlanmıştır. Ayrıca, boxShadow özelliği de kullanılarak, butonun gölgesi animasyonlu bir şekilde genişleyecektir.
Sonuç olarak, AnimatedContainer Widget’ı, interaktif ve animasyonlu arayüzler tasarlamak için çok kullanışlı bir Widget’tır. Basitçe boyut değişimiyle sınırlı değildir ve diğer stil özelliklerini animasyonlu bir şekilde değiştirerek, uygulamaların kullanıcılar üzerinde daha fazla etkisi olmasını sağlar.
İlk Yorumu Siz Yapın