Konuyu Oyla:
  • Toplam: 0 Oy - Ortalama: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Flutter ile web sayfası yaparken Responsive nasıl yapılır?
#1
Flutter ile web sayfası yaparken Responsive nasıl yapılır?

Bununla ilgili bilgisi ilgisi tecrübesi olan yazabilir mi ?

özellikle web icin bir app yaparken, sayfanın farklı boyutlarda düzgün görünmesi icin, kısaca responsive olması icin, nasıl bir yöntem kullanıyorsunuz? ya da duyduğunuz.. 

@mehmetext
----------------
"Ana prensibimiz insana saygı" dedik, kimileri bunu yanlış anladı, sürekli tepemize çıktı. 
Bundan sonra ana prensibim: "isteyen istediği yere gitsin". Forumda sürekli negatif enerji yayanları, hakaret edenleri ya da hakaretimsi yazanları dahi banlayacağım. Forumda etkileşim azalacakmış umuruda değil. Yıllarca negatif enerjili insanlara katlandığım yeter.. 

Sonra duymadım, bilmiyordum yok.. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
10tl.net Geneli (Forum açma v.b.) Kurallar: https://destek.10tl.net/showthread.php?tid=25433

twitter.png https://twitter.com/10tlnet
discord.png https://discord.gg/fUC7A2W
email.png  info (at.) 10tl.net
Ara
Cevapla PGM
Teşekkür verenler:
#2
Bunun için birçok yöntemin olduğunu düşünüyorum. MediaQuery.of(context).size.width ile ekran genişliğini alarak işlemler yaptırabilirsiniz. Özel bir widget (MyResponsiveWidget) yazıp onunla yapabilirsiniz. Sizin için küçük bir örnek yazayım:

Kod:
void main() {
 
  double mediaQueryWidth = 500;
 
  MyResponsiveWidget(
    width: mediaQueryWidth,
    small: /*Widgets for small*/ Widget(),
    medium: /*Widgets for medium*/ Widget(),
    large: /*Widgets for large*/ Widget(),
  );
}


class MyResponsiveWidget {
  double width;
  Widget small;
  Widget medium;
  Widget large;
 
 
  MyResponsiveWidget({this.width, this.small, this.medium, this.large});
 
  Widget build() {
    if (width < 200) {
      return small;
    } else if (width >= 200 && width < 500) {
      return medium;
    } else {
      return large;
    }
  }
}

class Widget {}

Ben genellikle Getx state management paketini kullandığım için MediaQuery bla bla yazmak yerine Getx.width yazarak kullanıyorum. Ciddi anlamda kolaylık sağlıyor ama Get.to() fonksiyonunu sürekli kullandığım için bazen Navigator.push fonksiyonunu unutuyorum :)

Bir de pub.dev sitesinde paketler varmış responsive için ama hiçbirini kullanmadım. Hiç uğraşmak istemezseniz yukarıdaki yöntem ile kendi responsive widget'larınızı oluşturabilirsiniz.
5bo0ov6.png
HTML CSS jQuery Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:
#3
Evet, her seferinde büyüklüğe göre ayarlamak bir seçenek, öyle olabilir ama, bunun daha pratik bir yolu yok mu acaba?
Böyle, tüm kod if'lerle dolar sanki...
ya da, her widget icin, MyResponsiveWidget yazmak gerekir sanki...
----------------
"Ana prensibimiz insana saygı" dedik, kimileri bunu yanlış anladı, sürekli tepemize çıktı. 
Bundan sonra ana prensibim: "isteyen istediği yere gitsin". Forumda sürekli negatif enerji yayanları, hakaret edenleri ya da hakaretimsi yazanları dahi banlayacağım. Forumda etkileşim azalacakmış umuruda değil. Yıllarca negatif enerjili insanlara katlandığım yeter.. 

Sonra duymadım, bilmiyordum yok.. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
10tl.net Geneli (Forum açma v.b.) Kurallar: https://destek.10tl.net/showthread.php?tid=25433

twitter.png https://twitter.com/10tlnet
discord.png https://discord.gg/fUC7A2W
email.png  info (at.) 10tl.net
Ara
Cevapla PGM
Teşekkür verenler:
#4
Biraz baktım, bununla ilgili bisürü kütüphane var... ama, istediğim tarzda, pratik bir çözüm yok sanki..
----------------
"Ana prensibimiz insana saygı" dedik, kimileri bunu yanlış anladı, sürekli tepemize çıktı. 
Bundan sonra ana prensibim: "isteyen istediği yere gitsin". Forumda sürekli negatif enerji yayanları, hakaret edenleri ya da hakaretimsi yazanları dahi banlayacağım. Forumda etkileşim azalacakmış umuruda değil. Yıllarca negatif enerjili insanlara katlandığım yeter.. 

Sonra duymadım, bilmiyordum yok.. 

Önemli konular listesi: https://destek.10tl.net/showthread.php?tid=99072
Android 10tl programı: https://destek.10tl.net/showthread.php?tid=98074
Görevli kuralları: https://destek.10tl.net/showthread.php?tid=99597
10tl.net Geneli (Forum açma v.b.) Kurallar: https://destek.10tl.net/showthread.php?tid=25433

twitter.png https://twitter.com/10tlnet
discord.png https://discord.gg/fUC7A2W
email.png  info (at.) 10tl.net
Ara
Cevapla PGM
Teşekkür verenler:
#5
Evet biraz meşakkatli olabilir ama sonuç olarak ortaya güzel bir ürün çıkıyor. Aslında tüm kod iflerle dolmaz, kurduğunuz yapı önemli bu durumda. Belirli kurallar yazarsanız clean code yazabilirsiniz responsive işini.
5bo0ov6.png
HTML CSS jQuery Dart Flutter

"Son Tema Ekibi Lideri"
Cevapla PGM
Teşekkür verenler:


Hızlı Menü:


Şu anda bu konuyu okuyanlar: 1 Ziyaretçi



***

Online Shopping App