SliverAppBar

ویجت SliverAppBar ویجتی است مانند AppBar با این تفاوت که SliverAppBar قابلیت مخفی شدن را در اختیار شما قرار می‌دهد.

این ویجت بر اساس اسکرول کاربر عمل می‌کند به این صورت که هنگامی که کاربر به سمت پایین صفحه اسکرول می‌کند این ویجت AppBar به صورت خودکار مخفی می‌شود و در صورت اسکرول کاربر به سمت بالای ویجت AppBar دوباره ظاهر می‌شود.

در ادامه به بررسی Property های این ویجت پرداخته‌ایم و در انتها یک نمونه کد قرار داده‌ایم.

 

(<List <Widget) action

این Property یک لیست از ویجت ها را گرفته که در قسمت action مربوط به AppBar نمایش می‌دهد.

 

actionIconTheme (IconThemeData)

این Property مربوط به ویژگی icon های مربوط به بخش action مانند color, size, opacity ,… را شامل می‌شود.

 

backgroundColor (Color)

در این Property می‌توانید رنگ پس زمینه SliverAppBar را مشخص کنید.

 

bottom (PreferredSizeWidget)

این Property را به عنوان ورودی می‌گیرد که و با استفاده از این قسمت می‌توانید در قسمت پایینی SliverAppBar ویجت های معرفی شده در PreferredSizeWidget نمایش داده می‌شود.

 

brightness (Brightness)

این Property تنظیمات مربوط به روشنایی SliverAppBar را شامل میشود.

 

centerTitle (bool)

این Property مربوط به موقیعت Title می‌باشد که در صورت مقدار دهی true ویجت Title در قسمت وسط SliverAppBar قرار می‌گیرد.

 

collapsedHeight (double)

این Property مشخص می‌کند که SliverAppBar در چه ارتفاعی جمع شود.

 

expandedHeight (double)

این property مانند ویژگی collapsedHeight مقدار double را می‌گیرد که مشخص می‌کند که SliverAppBar در چه ارتفاعی به طور کامل گسترش یابد.

 

flexiableSpace (Widget)

این Property یک ویجت را به عنوان ورودی دریافت می‌کند که آن را هنگام جمع شدن SliverAppBar نمایش می‌دهد به طور ساده تر می‌توان گفت بخش ثابت SliverAppBar در این قسمت تعریف می‌شود.

floating (bool)

مقدار ورودی این Property از نوع متغیر boolean می‌باشد که به SliverAppBar قابلیت شناور بودن می‌دهد.

قابلیت شناور بودن به این معنی است که وقتی شما به پایین ترین نقطه از صفحه خود اسکرول کرده باشید در صورتی که اندکی به سمت بالا صفحه را اسکرول کنید SliverAppBar برای شما نمایش داده خواهد شد

در صورتی که این Property را برابر false قرار دهید برای ظاهر شدن مجدد SliverAppBar حتما باید به ابتدای صفحه بازگردید.

 

forceElvated (bool)

مقدار دهی این Property مشخص می‌کند که سایه SliverAppBar هنگامی که این ویجت به صورت کامل نمایش داده می‌شود ظاهر شود یا خیر.

 

iconTheme (IconThemeData)

این بخش مربوط به تنظیمات ظاهری ایکون های به کار رفته در SliverAppBar را شامل می‌شود.

 

leading (Widget)

SliverAppBar مانند AppBar دارای قسمت leading می‌باشد که شما می‌توانید در این قسمت لیستی از Widget های مورد نظر خود را وارد کنید.

 

leadingWidth (double)

این Property مربوط به مشخص کردن مقدار طول leading می‌باشد.

 

pinned (bool)

این Property مشخص می‌کند که قسمت های flexibleSpace, leading, action در بالای صفحه سنجاق شوند یا خیر.

 

shadowColor (Color)

اگ می‌خواهید رنگ مربوط به سایه SliverAppBar را تغییر دهید باید یک Color برای این property تعریف کنید.

 

shape (ShapeBorder)

در این proprty می‌توانید شکل ظاهری SliverAppBar را تغییر دهید مانند تغییر borderRadius

 

snap (bool)

این property که مقدار boolean را به عنوان ورودی قبول می‌کند به SliverAppBar این قابلیت را می‌دهد تا در صورت کوچکترین اسکرول به سمت بالا تمام SliverAppBar ظاهر و نمایش داده شود. توجه داشته باشید برای استفاده از این ویژگی باید مقدار floating را هم برابر true قرار دهید.

 

نمونه کد SliverAppBar

 

Scaffold(
        body: SafeArea(
          child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                snap: false,
                floating: false,
                pinned: false,
                elevation: 20,
                surfaceTintColor: Colors.red,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text("MyFlutter.ir",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        ) //TextStyle
                    ), //Text
                  background: Center(child: Container(
                      width: 200,
                      child: Image.asset("assets/images/myflutter.ir.png"))),
                ),
                expandedHeight: 180,
                collapsedHeight: 60,
                backgroundColor: Colors.blueGrey,
                leading: IconButton(
                  icon: Icon(Icons.menu),
                  tooltip: 'Menu',
                  onPressed: () {},
                ), //IconButton
                actions: <Widget>[
                  IconButton(
                    icon: Icon(Icons.comment),
                    tooltip: 'Comment Icon',
                    onPressed: () {},
                  ), //IconButton
                  IconButton(
                    icon: Icon(Icons.settings),
                    tooltip: 'Setting Icon',
                    onPressed: () {},
                  ), //IconButton
                ], //<Widget>[]
              ), //SliverAppBar
              SliverList(
                delegate: SliverChildBuilderDelegate(
                      (context, index) => ListTile(
                    tileColor: (index % 2 == 0) ? Colors.white : Colors.black12,
                    title: Center(
                      child: Text('$index',
                          style: TextStyle(
                              fontWeight: FontWeight.normal,
                              fontSize: 50,
                              color: Colors.blueAccent) //TextStyle
                      ), //Text
                    ), //Center
                  ), //ListTile
                  childCount: 51,
                ), //SliverChildBuildDelegate
              ) //SliverList
            ], //<Widget>[]
          ) //
        ),
      ),

 

خروجی در صورتی که مقادیر زیر ست شده باشند.

snap: false

pinned: false

floating: false

 

 

خروجی در صورتی که مقادیر زیر ست شده باشند.

snap: false

pinned: false

floating: true

 

خروجی در صورتی که مقادیر زیر ست شده باشند.

snap: false

pinned: true

floating: false

 

خروجی در صورتی که مقادیر زیر ست شده باشند.

snap: true

pinned: false

floating: true

 

خروجی در صورتی که مقادیر زیر ست شده باشند.

snap: true

pinned: true

floating: true

 

 

جمع بندی

SliverAppBar به طور کلی مشابه AppBar است با این تفاوت که SliverAppBar قابلیت های بیشتری نظیر مخفی شدن را دارد.