Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir eğitmen tarafından sunulan Flutter programlama eğitim içeriğidir.
- Video, Flutter 1.17 sürümünün güncellemelerini ve Adobe XD Flutter plugininin kurulumunu anlatarak başlıyor, ardından plugin'in nasıl kullanılacağını adım adım gösteriyor. Eğitmen, Adobe XD'den gelen kodların Flutter widget'larına nasıl entegre edileceğini, "my home page" ekranını iptal ederek yeni bir widget oluşturmayı ve ekran boyutlarına göre ayarlamalar yapmayı detaylı olarak açıklıyor.
- Plugin, kod yazmamızı %50 oranında azaltarak tasarım sürecini kolaylaştırmakta ve Flutter'ın esnek yapısı sayesinde konteynerlerin genişlik ve yükseklik değerlerini düzenleme, expand özelliğini kullanma gibi konulara değinilmektedir.
- Flutter 1.7 Sürümü ve Adobe XD Flutter Plugini
- Flutter 1.7 sürümü yayınlandı ve bu sürümde performans iyileştirmeleri, Apple için özel performans iyileştirmeleri ve yeni açılır menüler eklenmiş.
- Flutter 1.7 sürümünün en çarpıcı özelliği Adobe XD'nin Flutter plugini almış olmasıdır.
- Adobe XD Flutter plugini, kod yazmayı büyük ölçüde azaltarak tasarımcıları özgürleştiriyor.
- 01:39Adobe XD Hakkında Bilgi
- Adobe XD, Adobe'nin ücretsiz olarak sunduğu bir UI/UX design programıdır.
- UI/UX design, mobil uygulama ve web sitelerinin tasarım ve kullanımını ayarlama sürecidir.
- Adobe XD, Creative Cloud'a dahil olup ücretsiz olarak kullanılabilir.
- 02:21Adobe XD Kurulumu
- Adobe XD kurulumu için önce Adobe web sitesine giriş yaparak "Adobe XD Download" yazmanız gerekiyor.
- Creative Cloud yüklendikten sonra Adobe XD'yi yükleyebilirsiniz.
- Adobe XD açıldığında mobil telefon ekran boyutları seçebilirsiniz.
- 04:37Flutter Plugin Kurulumu
- Adobe XD'de plugin eklemek için en alttaki legoya benzeyen işarete tıklayıp "Plugin" seçeneğine gelmeniz gerekiyor.
- Artı işaretine tıklayıp "Search Plugins" kısmına "flutter" yazarak beş yıldızlı Flutter pluginini bulabilirsiniz.
- Plugin kurulduktan sonra tasarım yapabilir ve ardından kodlara dönüştürebilirsiniz.
- 07:16Flutter Projesinde Kodlama
- Flutter projesinde pubspec.yaml dosyasına "adobe xd" eklemesi yaparak plugin'i projeye entegre edebilirsiniz.
- "Packages get" komutuyla plugin'in yüklenmesini sağlayabilirsiniz.
- Adobe XD'de "Potter Project" seçeneğinden proje dosyasını seçip, "Export All Widgets" ile kodları Flutter projesine aktarabilirsiniz.
- 10:13Adobe Plugin Kullanımı ve Widget Ayarları
- Adobe plugin'den gelen kodlar widget olarak işlev görür.
- My home page ekranı iptal edilerek yeni bir widget eklendi.
- Widget import edildikten sonra çalıştırıldı ve ekran boyutu farklılığı nedeniyle bazı ayarlar yapıldı.
- 10:50Widget Özellikleri ve Düzenleme
- Flutter'ın esnek yapısı sayesinde widget otomatik ayarlanmaya çalışır ancak daha iyileştirilebilir.
- Konteynerlere yapılan ayarlamalarla width ve height yerine ekranın belli bir bölümünü kaplaması sağlanabilir.
- Container'ları expand içerisine alarak ekranı kaplaması sağlanabilir.
- 11:22Kod Yazımını Kolaylaştırma
- Widget kullanımı kod yazımını tamamen sıfıra indirmeden yüzde elli oranında azaltır.
- Daire oluşturup widget ile kullanmak daha kolay hale gelmiştir.