Flutter: Widgetbook
Bu yazı, Widgetbook — The Storybook for Flutter makalesinden izin alınarak derlenip, Türkçe’ye çevirilmiştir.
Bu yazıda widgetbook paketinin kullanımından bahsedeceğim. Developerlar, widgetlarını kataloglamasına, farklı cihazlarda ve temalarda hızlıca test etmesine; tasarımcılar ve müşterilerle kolayca paylaşmasına yardımcı olan Flutter ile yazılmış açık kaynak kodlu pakettir.
Widgetbook kullanım senaryoları (Use cases)
Widgetları ayrı ayrı oluşturun ve görsel olarak test edin
Widgetbook, UI’ları ayrı ayrı oluşturmak için bir ortam sağlamaktadır. Widgetbook’un kullanıcı arayüzünde widgetları farklı cihazlarda ve temalarda görsel olarak hızlı bir şekilde ön izleyebilir ve test edebilirsiniz. Birden fazla emülator çalıştırmadan, geliştirme yaparken UI kusurları, bugları tespit edebilirsiniz.
Tüm widgetlarınıza genel bakış
Uygulamanız büyüdüğünde ve daha fazla geliştirici uygulama üzerinde çalıştığında, uygulamanızdaki tüm widgetları takip etmek zorlaşıyor. Bu noktada bazı widgetların geliştirilip geliştirilmediğini, en iyi adlandırma kurallarına uymuş olsa bile sorgulamasını engelleyemez. Genellikle bu tür kafa karıştırıcı yapılar kaosa ve geliştiricilerin birden çok kez aynı widgetları oluşturmasına neden olabiliyor.
Widgetbook’u kullanarak, tüm widgetlarınızı ve ekranlarınızı ve bunların kullanım durumlarını (use case) hızlı bir şekilde önizleyebilirsiniz:
Widgetbook nasıl kullanılır?
Detaylı dökümantasyona pub.dev’deki paketin sayfasından erişebilirsiniz. Widgetbook’unuzu iki şekilde kurabilir ve bakımını yapabilirsiniz. Birincisi manuel olarak widgetları ekleyerek, ikincisi ise bazı paketlerden alışık olduğumuz annotation
ları kullanarak code generation
ile hızlı bir şekilde otomatik olarak oluşturabilirsiniz. Eğer ikinci seçeneği tercih ederseniz projeye widgetbook_annotation ve widgetbook_generator paketlerini de eklemeniz gerekecektir.
Widgetbook’unuzu kolayca kurmak ve bakım yapmak için annotationları kullanın
@WidgetbookApp
@WidgetbookApp
annotationı yalnızca bir kez ayarlanmalıdır ve kod oluşturma işlemi için zorunludur. Hangi elemente annotation eklendiğinin bir önemi yok fakat @WidgetbookApp
kullanıldığı dosyanın konumu, widgetbook_generator
paketinin oluşturacağı app.widgetbook.main
dosyasının bulunacağı klasörünü tanımlar. app.widgetbook.main
dosyası Widgetbook uygulamasını çalıştırmak için otomatik oluşturulmuş tüm kodları içermektedir.
İçerdiği parametreler
@WidgetbookApp
annotationı bir required
parametre olan name
ve bir de isteğe bağlı devices
parametrelerine sahiptir.
Widgetbook generator, AppInfo
oluştururken name
parametresinden yararlanacaktır. Widgetbook uygulamanızı çalıştırdığınızda sol üst köşede görünecektir.
Aynı zamanda widgetbook generator, uygulamanızda widgetları önizleyebileceğiniz devices
parametresine eklediğiniz cihazları oluşturacaktır.
@WidgetbookUseCase
@WidgetbookUseCase
annotationı, geliştiricilerin fonksiyonları bir kullanım durumu yani usecase olarak işaretlemesine olanak tanır. Bu annotation bir fonksiyona uygulanmalıdır ve bu fonksiyon BuildContext
’e sahip olmalıdır.
ya da lambda ifadesi ile tanımlayabilirsiniz.
İçerdiği parametreler
@WidgetbookUseCase
annotationı iki adetrequired
tipinde, name
ve type
isimli parametrelere sahiptir.
name
parametresi, Widgetbook uygulamamızın sol tarafında bulunan gezinme panelinde kullanım durumunun nasıl görüntüleneceğini belirtmektedir.
type
parametresi ise, kullanım durumunun yani usecase hangi widget tipine ait olduğunu belirtir. Widgetbook generator, bu bilgilerden ve bulundukları dosyanın konumundan faydalanarak, sol tarafta gezinme panelini oluşturucaktır.
Örneğin
Dosya yapısının şöyle göründüğünü varsayalım.
/lib/tiles/awesome_tile.dart
dosyası içerisinde bulunan AwesomeTile
usecase örneği için, aşağıdaki gibi tanımlandığını varsayalım.
Genellikle widgetınız daha complex bir yapıya sahip olabiliyor. Böyle bir durumda, widgetı ihtiyacınız olan şeylerle sarmaktan çekinmeyin. Bu, Provider, Bloc veya başka bir state management widgeti olabilir.
Widgetbook için kod oluşturduktan sonra, aşağıdaki içeriğe sahip bir gezinme paneli bulacaksınız.
Bir widget için birden fazla kullanım senaryonuz varsa, birden çok @WidgetbookUseCase
tanımlayabilirsiniz. Widgetbook içerisinde bu durumları da ayrıca görüntüleyebilirsiniz.
@WidgetbookTheme
@WidgetbookTheme
, geliştiricilerin uygulamalarının açık ve koyu temasına annotation eklemesine olanak tanır. @WidgetbookUseCase
gibi, @WidgetbookTheme
bir ThemeData
nesnesi döndüren methodlarda kullanılır.
Constructors
@WidgetbookTheme
, Widgetbook uygulamamızın açık ve koyu teması arasında ayrım yapmak için @WidgetbookTheme.light()
ve @WidgetbookTheme.dark()
adlı iki constructora sahiptir.
Örneğin
Widgetbook Paketleri
Widgetbook hakkında daha fazla detaya aşağıdaki siteden erişebilirsiniz.
Bu yazı, Widgetbook — The Storybook for Flutter makalesinden izin alınarak derlenip, Türkçe’ye çevirilmiştir. Desteklerinden dolayı Lucas Josefiak ve Osman Yılmaz’a teşekkür ederim.
Zamanınızı ayırıp bu yazıyı okuduğunuz için teşekkür ederim, faydalı olması dileğiyle. Team Kraken olarak düzenli bir şekilde paylaşımlarımıza devam edeceğiz.
Bizi aşağıdaki linklerden takip edebilirsiniz.✋🏻
- Team Kraken Twitter hesabı
- Twitter hesabım