Flutter ve AdobeXD Plugini ile Kod Yazmadan Ekran Çıktıları Alalım
Kodun tasarımı yazdığı değilde tasarımın kodu yazdığı döneme mi geçiyoruz ? Adobe XD ne kadar iyi ?
Mobil uygulama geliştiricileri her ne kadar tasarımı koda dökmeyi sevse de bu süreç biraz zorlu geçebiliyor. AdobeXD geçtiğimiz Aralık ayında düzenlenen Flutter Interact 2019 ‘ da tasarımın bir eklenti sayesinde Android ve IOS’ a otomatik ekran çıkları desteği vereceği haberini biz Flutter Developer’ larına vermişti. 12 Mayıs tarihinde çıkan bu eklenti biz de bugün bir tasarımı nasıl dart koduna dönüştürdüğünü örnek bir tasarım üzerinden test edeceğiz.
Benim şahsi izlenimim her ne kadar eklenti yeni ve bazı sorunları olsada geliştirilmesine devam edileceğini düşünüyorum 0.1.3 sürümü olsa dahi eklenti bir çok işlevi yerine getirilebiliyor. Flutter yazması kolay ve zevkli bir dil bu tip eklentilerin topluluk adına gelişmeleri arttıracağına inanıyorum. İyi Okumalar.
İlk Yapmamız Gereken Pluginleri AdobeXD ve pubspec.yaml‘ a eklemek.
pubspec.yaml açalım aşağıdaki kodu ekleyelim güncel versiyona buradan ulaşabilirsiniz.
dependencies:
adobe_xd: ^0.1.3Yapmış olduğum tasarımı AdobeXD eklemek için .
İsterseniz videodan devam edebilirsiniz.
Video da pubspec.yaml ekleme yapmayı göstermemişim.
Daha sonra Adobe XD Açalım.
Plugins kısmına tıklayalım.
Daha sonra browse kısmında aramaya flutter yazalım ve XD to Flutter Pluginini kuralım.
Şimdi tasarım kısmına geçelim.
Ben daha önceden basit bir tane ekran tasarlamıştım. Sol alt kısımda bulunan plugins butonuna basalım.
- Flutter Project yazan kısıma projemizin ana dizinini ekliyoruz.
- Code Path yazan kısıma lib yazıyoruz.
- Image kullanacağımız için lib klasörünün altında assets/images dizini açıp bunu pubspec.yaml’ a ekliyorum.
4. Daha sonra Export All Widgets dedikten sonra lib klasörünün altına otomatik oluşmuş kodlarım gelecektir.
5.Şimdi çalıştırıyorum.
Projenin kaynak kodları için :
Linkedin adresim için:
