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
