starter-style-guide

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

• Renk yalnizca colorScheme / context.appColors
• Metin stili yalnizca textTheme (+copyWith)
• Padding/radius/sure/ikon token'dan
• Butonlar ve durum widget'lari katalogdan
• Tum metinler LocaleKeys
• Asset'ler Assets.*
• Light ve dark'ta okunur
• context.isWide ile genis ekran kontrolu
• Dort durum ele alindi (loading/error/empty/data)

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.