Herkese iyi günler
Forumda mobil uygulama geliştirme alanında konu eksikliğinin olduğunu gördüm ve bu alanda bildiklerimi paylaşmayı düşünüyorum.
Konular ağırlık olarak Flutter ile ilgili olacak.
İlk konumuz "Linear Gradient" yani renk geçişleri
1) Butonlarda Linear Gradient
Birçok yöntem olsa da ben kısayolunu anlatacağım.
İlk olarak pub.dev sitesine
yazıp indireceğimiz paketi buluyoruz.
Daha sonra projemizde bulununan "pubspec.yaml" dosyasına gidip
"dependencies" bölümünün altına
yapıştırıyoruz. Son hali aşağıdaki gibi olmalı.
Daha sonra bu paketi projemize dahil edelim
Buraya kadar yaptıysak kodlamaya geçebiliriz.
Kodlarımız şöyle
Forumda mobil uygulama geliştirme alanında konu eksikliğinin olduğunu gördüm ve bu alanda bildiklerimi paylaşmayı düşünüyorum.
Konular ağırlık olarak Flutter ile ilgili olacak.
İlk konumuz "Linear Gradient" yani renk geçişleri
1) Butonlarda Linear Gradient
Birçok yöntem olsa da ben kısayolunu anlatacağım.
İlk olarak pub.dev sitesine
Kod:
custom_gradient_button: ^0.0.1yazıp indireceğimiz paketi buluyoruz.
Daha sonra projemizde bulununan "pubspec.yaml" dosyasına gidip
"dependencies" bölümünün altına
Kod:
custom_gradient_button: ^0.0.1yapıştırıyoruz. Son hali aşağıdaki gibi olmalı.
Daha sonra bu paketi projemize dahil edelim
Kod:
import 'package:custom_gradient_button/custom_gradient_button.dart';Buraya kadar yaptıysak kodlamaya geçebiliriz.
Kodlarımız şöyle
Rich (BB code):
body: Center(
child: Container(
padding: EdgeInsets.all(20),
height: 200,
width: 200,
color: Colors.yellow,
child: Column(
children: [
CustomGradientButton( // paketimizi burada kullanmaya başıyoruz.
firstColor: Colors.blue, //ilk rengimizi belirliyoruz.
secondColor: Colors.red, // son rengimizi belirliyoruz.
child: Text(
"Button",
style: TextStyle(fontSize: 20, color: Colors.white),
),
)
],
),
),
),Çıktısı aşağıdaki gibi
Container belirgin olsun diye renk verdim. Tasarım kötü gözüküyorsa kusura bakmayın
2) Container Linear Gradient
Burada herhangi bir pakete ihtiyacımız yok bu yüzden direkt kodlayamaya geçiyoruz.
Kod:
return MaterialApp(
home: Center(
child: Container(
decoration: BoxDecoration( // ilk olarak decoration vermemiz lazım
gradient: LinearGradient( // gradient içinden LinearGradient'i alıyoruz
colors: [ // burada renkleri belirliyoruz.
Colors.blue,
Colors.yellow,
],
begin: Alignment.centerLeft, // ilk rengin başlayacağı konumu belirliyoruz
end: Alignment.bottomRight,// burada da son rengin nerede biteceğini belirliyoruz
),
),
),
),
);Çıktı aşağıdaki gibi olacaktır.
(Flutter ile ilgili isteklerinizi belirtebilirsiniz.)
