Adobe XD için Flutter Eklentisi

En son güncellendiği tarih: 7 gün önce



Geçtiğimiz Aralık ayı sonunda düzenlenen Flutter Interact 2019 'da, mobil uygulama arayüzleri oluşturma çözümlerinin en popülerlerinden olan Adobe XD (Experience Design) ile hazırlanan tasarımların çok kolay bir şekilde Dart kodlarına dönüştürülerek Flutter projelerine dahil edilebilecek bir eklenti üzerinde çalışıldığı bilgisi verilmişti.


XD to Flutter isimli bu eklenti bu hafta başı itibariyle erken erişim olarak 0.1.0 sürümü ile XD eklenti alanından da kullanımımıza sunuldu.



Adobe XD’nin zaten hatırı sayılır sayıda servis ve uygulama ile entegre çalışabilmesi için eklentiler mevcut olmakla birlikte bunlara Flutter eklentisinin eklenmiş olması biz Flutter geliştiricilerici için çok güzel bir gelişme oldu.



Dilerseniz hemen biz de mevcut bir Flutter projesinde nasıl kullanıyoruz, tasarımı nasıl koda dönüştürüp uygulamaya ekletiyoruz görelim:


1 - Eklenti Kurulumu


Adobe XD yazılımında eklentiler kısmına gelip XD to Flutter isimli eklentiyi kuruyoruz. (Dikkat edin, görseli olmayan birkaç Flutter eklentisi daha mevcut, onlar kafanızı karıştırmasın.)




2 - Paketi Eklemek


Tasarımın dönüşeceği kodları direk Flutter projesine dahil edebilmek için, pubspec.yaml dosyamızın dependencies kısmına ilgili adobe_xd paket bilgisini ekliyoruz.




3 - Kullanım ve Tasarım


Şimdi sıra geldi XD’de istediğiniz tasarımı yapmaya. Ben çalışabilirliği göstermek adına basit bir tasarım kullanacağım: (renk geçişi ve köşelerinde ovallik içeren bir diktörtgen)




4 - Export to Widget


Tasarımın ardından aktarmak istediğim öğe/öğeleri seçip, Flutter projemizin dosya dizinini XD'ye hedef gösterip export diyoruz. Şimdi işlemin sonucunu görmek için kod editörümüze geri dönüyoruz. Görüldüğü üzere tasarım öğesi çalışma alanının isminde Stateless bir widgeta dönüşmüş :) Artık dileğiniz yerde dilediğiniz kadar bu widget'ı kullanabilirsiniz.




Not: Öğeleri tek tek dart kodu olarak hızlı bir şekilde elde etmek isterseniz de: XD'de her bir öğeyi seçip, sol alttaki Copy Selected düğmesine basarak, kod halini clipboarda kopyalamış olursunuz.




Daha karmaşık tasarımları da test ederek deneyebilirsiniz. Ben eklentiyi mahçup etmemek adına basit bir düğme tasarımını Flutter projesine aktarmayı tercih ettim. Eklentinin eksikleri çok, malum yazı başında erken erişim sürümü olduğunu belirttik... Umuyoruz yakın zamanda kararlı hale geçerek, geliştirme süreçlerimizi kolaylaştıran/hızlandıran bir araç haline gelir.



Adobe XD eklentisinin GitHub adresi:

https://github.com/AdobeXD/xd-to-flutter-plugin


Flutter için dahil edilmesi gereken Adobe XD paketinin adresi:

https://pub.dev/packages/adobe_xd


Proje Github Adresi:

https://github.com/kaiserleka/adobe-xd-flutter



#flutter #adobexd

Komünite

Platform

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

© 2020 by mobiler.dev

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