ویجت 5 (SliverAppBar در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی SliverAppBar

بریم سراغ کد نویسی و سپس توضیح ان

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                  centerTitle: true,
                  title: Text(&quotCollapsing Toolbar&quot,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16.0,
                      )),
                  background: Image.network(
                    &quothttps://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350&quot,
                    fit: BoxFit.cover,
                  )),
            ),
          ];
        },
        body: Center(
          child: Text(&quotSample Text&quot),
        ),
      ),
    );

در کد بالا expandedHeight اندازه ای که ارتفاع Appbar میتونه داشته باشه

و floating به حالتی است که وقتی به سمت بالا در هر جای لیست اسکرول میکنید دوباره اپ بار ظاهر میشود

و pin هم که وقتی True باشد اپ بار ما هنگام اسکرول در جای خودش ثابت میمونه و محو نمیشه

و در flexibleSpace یک تکس و تصویر پشت زمینه اپ بارمان را تعریف کرده ایم که میتونید در زیر نتیجه را ببینید

بریم سراغ دستکاری بقیه ی ماجرا :)

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(&quotCollapsing Toolbar&quot,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        )),
                    background: Image.network(
                      &quothttps://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350&quot,
                      fit: BoxFit.cover,
                    )),
                bottom: TabBar(
                  labelColor: Colors.black87,
                  unselectedLabelColor: Colors.grey,
                  tabs: [
                    new Tab(icon: new Icon(Icons.info), text: &quotTab 1&quot),
                    new Tab(
                        icon: new Icon(Icons.lightbulb_outline), text: &quotTab 2&quot),
                  ],
                ),
              ),
              
            ];
          },
          body: Center(
            child: Text(&quotSample text&quot),
          ),
        ),
      ),
    );

در قسمت bottom که پایین اپ بار ما قرار میگیرد ویجت TabBar را تعریف میکنیم

یک مقدار بیش از حد دیزاین مان خراب شد برای حل این مشکل کد را به شکل زیر تغییر میدهیم

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    title: Text(&quotCollapsing Toolbar&quot,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 16.0,
                        )),
                    background: Image.network(
                      &quothttps://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350&quot,
                      fit: BoxFit.cover,
                    )),
              ),
              new SliverPadding(
                padding: new EdgeInsets.all(16.0),
                sliver: new SliverList(
                  delegate: new SliverChildListDelegate([
                    TabBar(
                      labelColor: Colors.black87,
                      unselectedLabelColor: Colors.grey,
                      tabs: [
                        new Tab(icon: new Icon(Icons.info), text: &quotTab 1&quot),
                        new Tab(
                            icon: new Icon(Icons.lightbulb_outline),
                            text: &quotTab 2&quot),
                      ],
                    ),
                  ]),
                ),
              ),
            ];
          },
          body: Center(
            child: Text(&quotSample text&quot),
          ),
        ),
      ),
    );

از SliverPadding استفاده کرده و به همین جهت میتونیم به مقدار 16 از همه طرف Padding بهش بدهیم و سپس از SliverList استفاده کرده و ویجت TabBar را در ان تعریف میکنیم به این شکل مقادیر قبلی اپ بار با ویجت Tabbar از هم جدا شده و به شکل زیر در می ایند

به همین سادگی به همین خوشمزگی.

اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?

روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)