DEV Community

Cover image for Scaffold Widget ­čĺź ­čîî ÔťĘ
G├╝lsen Keskin
G├╝lsen Keskin

Posted on

 

Scaffold Widget ­čĺź ­čîî ÔťĘ

Scaffold widget ÔťĘ

MaterialApp widget'─▒ gibi, Scaffold da (Material y├Ânergelerini takip eden) build'i olabildi─čince kolay hale getirmek i├žin tasarlanm─▒┼č bir widget'd─▒r. MaterialApp widget'─▒, uygulaman─▒za yap─▒land─▒rma ve i┼člevsellik sa─člar. Scaffold widget'─▒ da, uygulaman─▒z─▒n yap─▒s─▒n─▒ sa─člayan widget ├Â─česidir. MaterialApp'i uygulaman─▒z─▒n tesisat─▒ ve elektri─či, Scaffold widget'─▒ ise temeli ve duvarlar─▒ olarak d├╝┼č├╝nebilirsiniz.

Flutter belgelerine g├Âre, Scaffold "temel Material Design g├Ârsel d├╝zenini" tan─▒mlar, bu da uygulaman─▒z─▒n kolayca bu ┼čekilde g├Âr├╝nmesini sa─člayabilece─či anlam─▒na gelir.

Image description

Bir drawer (bir taraftan animasyon uygulayan ve men├╝ler i├žin yayg─▒n olarak kullan─▒lan bir ├Â─če) ve bir alt sayfa(bottom sheet) (ekran─▒n alt─▒ndan g├Âr├╝nt├╝ye animasyon uygulayan ve iOS tarz─▒ uygulamalarda yayg─▒n olan bir ├Â─če) ekleme i┼člevselli─či sa─člar.

Aksi ┼čekilde yap─▒land─▒rmad─▒─č─▒n─▒z s├╝rece, bir scaffold'daki AppBar, uygulaman─▒z─▒n sol ├╝st k├Â┼česinde ├žekmeceyi a├žacak bir men├╝ d├╝─čmesi ┼čekilde otomatik olarak ayarlan─▒r; men├╝s├╝ olan bir ekranda olmad─▒─č─▒n─▒zda men├╝ d├╝─čmesi geri d├╝─čmesine d├Ân├╝┼č├╝r.

Daha da ├Ânemlisi, hangi ├Âzellikleri istedi─činizi ve hangilerini istemedi─činizi se├žebilirsiniz. Uygulaman─▒z─▒n drawer tarz─▒ bir men├╝s├╝ yoksa, onu bir drawer'a ge├žiremezsiniz ve bu otomatik men├╝ d├╝─čmeleri kaybolur.

Scaffold widget'─▒, t├╝m├╝ constructor'dan yap─▒land─▒r─▒lan bir├žok iste─če ba─čl─▒ ├Âzellik sa─člar.

// From Flutter source code. Scaffold constructor.
const Scaffold({
    Key key,
    this.appBar,
    this.body,
    this.floatingActionButton,
    this.floatingActionButtonLocation,
    this.floatingActionButtonAnimator,
    this.persistentFooterButtons,
    this.drawer,
    this.endDrawer,
    this.bottomNavigationBar,
    this.bottomSheet,
    this.backgroundColor,
    this.resizeToAvoidBottomPadding = true,
    this.primary = true,
  }) : assert(primary != null), super(key: key);
Enter fullscreen mode Exit fullscreen mode

Ve bu ├Âzelliklerin hi├ž biri @required olarak i┼čaretlenmemi┼čtir. Bir AppBar kullanabilirsiniz, ancak kullanmak zorunda de─čilsiniz. Ayn─▒s─▒ drawer'lar, navigation bar'lar (gezinme ├žubuklar─▒) vb. i├žin de ge├žerlidir.

Uygulaman─▒z─▒n farkl─▒ ekranlar─▒n─▒n her birinin kendi Scaffold widget'─▒na sahip olmas─▒ yayg─▒n bir durumdur.

Scaffold sadece bir widget'd─▒r ve arg├╝manlar─▒n─▒n ├žo─ču iste─če ba─čl─▒d─▒r. Bu durum da onu son derece ├Âzelle┼čtirilebilir hale getirir.

    return Scaffold(
      appBar: XWidget() //uygulaman─▒z─▒n en ├╝st├╝ne yerle┼čtirilecek olan widgett─▒r. 
      body: YWidget(...) // ana b├Âl├╝m├╝ temsil eden bir scaffolddur.

Enter fullscreen mode Exit fullscreen mode

Resource: Flutter in Action chapter-4 ÔťĘ

Top comments (0)