Flutter'da Morphable Shape Yayınlandı


Görsel Referansı


Flutter'da Morphable Shape yayınlandı. Morphable Shape ise çeşitli şekiller oluşturmak için kullancağımız bir Flutter paketidir. Şimdi bu paket ile yapılabileceklere hep birlikte bakalım.

  • Duyarlı olan (uzunluk ölçüsü olarak piksel veya yüzde kullanılarak) ve birbirleri arasında geçiş yapabilen şekiller. Şekli, Malzeme widget'ı veya ClipPath tarafından kullanılan bir shapeBorder oluşturmak için kullanabiliriz.

  • İstediğiniz boyutları hesaplamadan farklı pencere boyutlarına uyum sağlayan tek bir şekil örneği oluşturabiliriz.


Desteklenen Şekiller


RectangleShape


Dikdörtgenin her köşesini ayrı ayrı veya bir defada yapılandırmanıza olanak tanır.

Dikdörtgenin kenarlarından birinde iki yarıçap çakışırsa (%60 ve %50 gibi),

üst üste binmemeleri için her iki tarafı da otomatik olarak ölçeklendirir (tıpkı CSS'nin yaptığı gibi). RectangleShape ayrıca diğer köşe stillerini de destekler. Sadece RectangleShape sınıfını kullanarak ve doğru köşe stilini ve yarıçapı sağlayarak bir üçgen, bir elmas, bir yamuk veya hatta bir ok şekli oluşturabilirsiniz:

Görsel Referansı


CircleShape


CircleShape, başlangıç açısını ve ok açısını seçmenize izin verir:

Görsel Referansı


PolygonShape


PolygonShape, kenar sayısının yanı sıra köşe yarıçapı ve köşe stilini değiştirmeyi destekler:

Görsel Referansı


StarShape


StarShape; köşe sayısını, girintiyi, kenarlık yarıçapını, kenarlık stilini, iç boşluk yarıçapını ve iç metin stilini değiştirmenize olanak tanır.

Görsel Referansı


Shape Morphing


Bu paketteki her şekil, zarif bir şekilde başka bir şekle dönüştürülebilir.


Görsel Referansı


Shape Serialization


Bu paketteki her şekil serialization'ı destekler.

Beğendiğiniz bir şekil tasarladıysanız, toJson()'ı çağırmanız yeterlidir.

Daha sonra Shape.fromJson(json)'ı çağırarak yeniden kullanabilirsiniz.


Kaynak ve daha fazla bilgi için: https://pub.dev/packages/morphable_shape


#cross #flutter #shape #morphableshape #design

0 yorum

Son Paylaşımlar

Hepsini Gör

Komünite

Platform

Mobiler.dev Anasayfa
  • Twitter
  • Instagram
  • development_düzenlendi_düzenlendi
  • Youtube
  • slack-icon-black_edited_edited_edited
  • Gri LinkedIn Simge
imageedit_2_9667998092.png
JetBrains Hakkında Detaylı Bilgi Alın

© 2021 by mobiler.dev

Kurumsal Yazar Hesapları

adesso.png
mobilerdevLogo.jpg
Yazarlık Başvurusu Hakkında Bilgi Alın, Başvuru Yapın.
Topluluk Yazarlarını Tanıyın