| name | starter-style-guide |
| description | Bu template'in tasarim sistemi referansi — renk (colorScheme + AppThemeColors semantic token'lari), tipografi (textTheme slotlari, Poppins/Inter), spacing/radius/golge/sure token'lari (AppPaddings, AppRadius, AppShadows, AppDurations, AppIconSizes), paylasilan widget katalogu (AppPrimaryButton, dort-durum widget'lari, AppTextField, sheet'ler), 8 varyantli light/dark tema ve easy_localization. Kullanici UI yazarken/duzenlerken "renkleri projeye gore kullan", "bu butonu projeye gore yaz", "hangi spacing/radius", "tasarim sistemine uydur", "style guide", "tema token'lari" dediginde kullan. |
Tasarim Sistemi Referansi
UI'yi bu template'in kurallariyla yazmak icin hizli bakis. Baglayici kurallar
widget_and_theme.md ve
design_tokens.md'de — bu skill onlarin
calisma anindaki checklist'i.
Uygula, icat etme. Eksik bir token varsa cagri yerine deger yazma; token
dosyasina ekle.
Ne zaman calistir
- Herhangi bir ekran/widget yazarken veya restyle ederken.
- "hangi renk/spacing/radius", "tasarim sistemine uydur".
Ne zaman calistirma
- Butun feature iskelesi (cubit+state+view) →
starter-feature.
- Yazilmis kodu denetleme →
starter-review.
Renk
- Once
Theme.of(context).colorScheme.* — primary, surface, onSurface,
onSurfaceVariant, error, outline...
- Varyanttan bagimsiz semantic tonlar:
context.appColors.*
(app_theme_colors.dart).
- ❌ View icinde
Color(0x...) / Colors.<ad>. Yeni renk gerekiyorsa
AppThemeColors'a ekle — hem light hem dark degeriyle.
- Tema 8 varyant × light/dark uretir; sabit renk yazmak varyant sistemini kirar.
Tipografi
Theme.of(context).textTheme.*. Slot tablosu:
widget_and_theme.md.- Ozellestirme
copyWith ile. ❌ Inline TextStyle(fontSize: ...).
- Fontlar tema uzerinden gelir (Poppins: display/headline, Inter: title/label/body).
❌ Hardcoded
fontFamily — FontFamily.* uretilmis sabitleri var.
Spacing / radius / golge / sure
| Ihtiyac | Token |
|---|
| Padding, bosluk | AppPaddings.* |
| Kose yaricapi | AppRadius.* |
| Golge | AppShadows.card(context) gibi tema duyarli yardimcilar |
| Animasyon suresi | AppDurations.* |
| Ikon boyutu | AppIconSizes.* |
| Responsive olcek | context.r(...) / context.rf(...), genislik esigi context.isWide |
❌ Ham EdgeInsets.all(16), SizedBox(height: 24), BorderRadius.circular(12),
Duration(milliseconds: 300).
Column/Row icinde bosluk icin spacing: parametresini kullan.
Bilesenler — once katalogu kontrol et
lib/product/widget/:
- Buton:
AppPrimaryButton / AppSecondaryButton / AppTextButton (haptic dahil).
- Ekran durumlari:
AppLoadingView, AppErrorView, AppEmptyView, AppStateView.
- Form:
AppTextField + AppValidator hiyerarsisi.
- Sheet/dialog:
context.showAppBottomSheet, context.showConfirmDialog,
AppSelectSheet, AppErrorSheet.
- Geri bildirim:
context.showSuccessSnack/showErrorSnack/showInfoSnack.
- Kabuk:
AppScaffold, KeyboardDismisser, AppSemantics.
Katalogda varsa yeniden yazma. Yoksa: uygulama geneli mi → product/widget/,
feature'a mi ozel → feature/<ad>/widget/.
Metin
Kullaniciya gorunen her metin LocaleKeys.*.tr(); anahtar hem tr.json hem
en.json'a eklenir, sonra ./script/lang.sh.
Ceviriye girmeyen sabitler (URL, teknik string) AppString.
Yeni ekran checklist
Yapma → Yap
| Yapma | Yap |
|---|
Colors.blue / Color(0xFF...) | colorScheme.primary / context.appColors.* |
TextStyle(fontSize: 24) | textTheme.headlineSmall |
EdgeInsets.all(24) | AppPaddings.allXxl |
SizedBox(height: 16) | Column(spacing: AppPaddings.l, ...) |
BorderRadius.circular(12) | AppRadius.md |
Duration(milliseconds: 300) | AppDurations.short |
Text('Kaydet') | Text(LocaleKeys.general_save.tr()) |
Image.asset('assets/image/x.png') | Assets.image.x.image() |
CircularProgressIndicator() | AppLoadingView() |
Bu skill referanstir. Gercek iskele kurmak icin starter-feature.
