[Question] Disable collapsing effect on Collapsing Toolbar

[Stewioie]

Hi!

I have a question about collapsing toolbar and tab bar. Is there a way of disable collapsing eg I switch a specific tab on tab bar?

thanks in advance

Lockness

[diegoveloper]

I guess yes, try reproducing the sample in a single file, so I could help you.

On Sat, Feb 1, 2020, 12:22 PM Szalók Dániel notifications@github.com wrote:

Hi!

I have a question about collapsing toolbar and tab bar. Is there a way of disable collapsing eg I switch a specific tab on tab bar?

thanks in advance

Lockness

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter-samples/issues/15?email_source=notifications&email_token=ABFL3UCIKV6I6CJ7IUA57XLRAWVXBA5CNFSM4KOUKTPKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IKLDHWA, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UCSPZDLIQEWWIAROBTRAWVXBANCNFSM4KOUKTPA .

[Stewioie]

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
          length: 3,
          child: Container(
              child: NestedScrollView(
                physics: NeverScrollableScrollPhysics(),
                controller: null,
                headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                  return <Widget>[
                    SliverAppBar(
                      expandedHeight: 450.0,
                      floating: false,
                      pinned: true,
                      primary: true,
                      flexibleSpace: FlexibleSpaceBar(
                          centerTitle: true,
                          collapseMode: CollapseMode.none,
                          stretchModes: [StretchMode.blurBackground],
                          title: Text("Collapsing Toolbar",
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 16.0,
                              )),
                          background: Image.network(
                            "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                            fit: BoxFit.cover,
                          )),
                    ),
                    SliverPersistentHeader(
                      delegate: _SliverAppBarDelegate(
                        TabBar(
                          labelColor: Colors.black87,
                          unselectedLabelColor: Colors.grey,
                          tabs: [
                            Tab(icon: Icon(Icons.info), text: "Tab 1"), //If this tab selected I want to disable the scrolling effect. This tab does not contains list
                            Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 2"), //If this tab selected I want to enable the scrolling effect. This tab contains list
                            Tab(icon: Icon(Icons.lightbulb_outline), text: "Tab 3"), //If this tab selected I want to enable the scrolling effect. This tab contains list
                          ],
                        ),
                      ),
                      pinned: true,
                    ),
                  ];
                },
                body: Center(
                  child: Text("Sample text"),
                ),
              )
          )
      ),
    );
  }
}

class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  _SliverAppBarDelegate(this._tabBar);

  final TabBar _tabBar;

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return new Container(
      child: _tabBar,
    );
  }

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

[diegoveloper]

check these changes:

class _MyHomePageState2 extends State<MyHomePage2> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    Widget appBar;
    if (_index == 0) {
      appBar = SliverAppBar(
        expandedHeight: 450.0,
        floating: false,
        pinned: true,
        primary: true,
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            collapseMode: CollapseMode.none,
            stretchModes: [StretchMode.blurBackground],
            title: Text("Collapsing Toolbar",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                )),
            background: Image.network(
              "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
              fit: BoxFit.cover,
            )),
      );
    } else {
      appBar = SliverAppBar(
        floating: false,
        pinned: true,
        title: Text("Collapsing Toolbar",
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.0,
            )),
        primary: true,
      );
    }

    return Scaffold(
      body: DefaultTabController(
          length: 3,
          child: Container(
              child: NestedScrollView(
            physics: NeverScrollableScrollPhysics(),
            controller: null,
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                appBar,
                SliverPersistentHeader(
                  delegate: _SliverAppBarDelegate(
                    TabBar(
                      labelColor: Colors.black87,
                      unselectedLabelColor: Colors.grey,
                      onTap: (index) {
                        setState(() {
                          _index = index;
                        });
                      },
                      tabs: [
                        Tab(
                            icon: Icon(Icons.info),
                            text:
                                "Tab 1"), //If this tab selected I want to disable the scrolling effect. This tab does not contains list
                        Tab(
                            icon: Icon(Icons.lightbulb_outline),
                            text:
                                "Tab 2"), //If this tab selected I want to enable the scrolling effect. This tab contains list
                        Tab(
                            icon: Icon(Icons.lightbulb_outline),
                            text:
                                "Tab 3"), //If this tab selected I want to enable the scrolling effect. This tab contains list
                      ],
                    ),
                  ),
                  pinned: true,
                ),
              ];
            },
            body: Center(
              child: Text("Sample text"),
            ),
          ))),
    );
  }
}

[Stewioie]

Thanks for the reply.

Its almost done. If the scrolling disabled on tab 1 i still need the background image at 450 px. is it possible to?

[diegoveloper]

yes, just change the SliverAppBar and use any other widget like SliverBoxAdapter( child : anyWidget Here or create your own AppBar )

https://medium.com/flutter-community/flutter-increase-the-power-of-your-appbar-sliverappbar-c4f67c4e076f

On Sun, Feb 2, 2020 at 4:10 AM Szalók Dániel notifications@github.com wrote:

Thanks for the reply.

Its almost done. If the scrolling disabled on tab 1 i still need the background image at 450 px. is it possible to?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter-samples/issues/15?email_source=notifications&email_token=ABFL3UFLHCQT3KKW6B3TWATRA2EZJA5CNFSM4KOUKTPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKRRTVQ#issuecomment-581114326, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UCKGGSIK2DVZCOW6ZLRA2EZJANCNFSM4KOUKTPA .

[Stewioie]

@diegoveloper If I use SliverToBoxAdapter instead of SliverAppBar then the collapsing effect wont disabled. on tab 1

[diegoveloper]

Don't use that for the tab1 only for the one you don't want collapsing effect.

On Mon, Feb 3, 2020, 10:55 AM Szalók Dániel notifications@github.com wrote:

@diegoveloper https://github.com/diegoveloper If I use SliverToBoxAdapter instead of SliverAppBar then the collapsing effect wont disabled. on tab 1

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter-samples/issues/15?email_source=notifications&email_token=ABFL3UE6HUYRZXXCTMAHHBDRBA5ARA5CNFSM4KOUKTPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKULPGY#issuecomment-581482395, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UGCFI3GDLIOUA7DQQDRBA5ARANCNFSM4KOUKTPA .

[Stewioie]

On tab1 I dont want collapsing. On other tabs are fine with SliverAppBar.

if (_index != 0) {
      appBar = SliverAppBar(
        expandedHeight: ScreenUtil().setHeight(390),
        floating: false,
        pinned: false,
        primary: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: Container(),
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            collapseMode: CollapseMode.none,
            stretchModes: [StretchMode.blurBackground],
            title: Text("Collapsing Toolbar",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                )),
            background: Image.network(
              "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
              fit: BoxFit.cover,
            )),
      );
    } else {
      appBar = SliverToBoxAdapter(
          child: Container(
                  height: 390,
                  child: Image.network(
                      "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                      fit: BoxFit.cover,
                  )
          ),
      );
    }

[diegoveloper]

Could you add a gif?

On Mon, Feb 3, 2020, 11:10 AM Szalók Dániel notifications@github.com wrote:

On tab1 I dont want collapsing. On other tabs is fine with SliverAppBar.

if (_index != 0) { appBar = SliverAppBar( expandedHeight: ScreenUtil().setHeight(390), floating: false, pinned: false, primary: true, backgroundColor: Colors.transparent, elevation: 0, leading: Container(), flexibleSpace: FlexibleSpaceBar( centerTitle: true, collapseMode: CollapseMode.none, stretchModes: [StretchMode.blurBackground], title: Text("Collapsing Toolbar", style: TextStyle( color: Colors.white, fontSize: 16.0, )), background: Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350", fit: BoxFit.cover, )), ); } else { appBar = SliverToBoxAdapter( child: Container( height: 390, child: Image.network( "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350", fit: BoxFit.cover, ) ), ); }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter-samples/issues/15?email_source=notifications&email_token=ABFL3UAQHHIYVZ7LMS277G3RBA6YJA5CNFSM4KOUKTPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKUNIEY#issuecomment-581489683, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UCHGH6YCQC7Y2BPHNLRBA6YJANCNFSM4KOUKTPA .

[Stewioie]

what do you mean on gif here?

[diegoveloper]

To check the behavior

On Mon, Feb 3, 2020, 11:13 AM Szalók Dániel notifications@github.com wrote:

what do you mean on gif here?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter-samples/issues/15?email_source=notifications&email_token=ABFL3UA53VV4DTEQ75XXNTTRBA7CBA5CNFSM4KOUKTPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKUNSFA#issuecomment-581490964, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UGKTOHJRXZFLIEHYBTRBA7CBANCNFSM4KOUKTPA .

[diegoveloper]

That's weird, please add the code you are using and tell me what you want to achieve.

On Mon, Feb 3, 2020 at 11:34 AM Szalók Dániel notifications@github.com wrote:

[image: 20200203_173128] https://user-images.githubusercontent.com/43112534/73671526-6bca6680-46ab-11ea-8ee7-be4c4a28de8e.gif

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter-samples/issues/15?email_source=notifications&email_token=ABFL3UCFGZH3776SR2GMZH3RBBBRPA5CNFSM4KOUKTPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKUQDXI#issuecomment-581501405, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UBZTWSIGKMGSQTWOF3RBBBRPANCNFSM4KOUKTPA .

[Stewioie]

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

/*

  DESIGN REQUIREMENTS

  - permanent appbar with gradient background
  - below appbar a network image 390px height. (I use a package to scale the image based on screen. (ScreenUtil))
  - below image a TabBar with 3 tabs
  - 1st tab with static data
  - 2nd tab with list
  - 3rd tab with list

 */

/*

  WHAT TO ACHIEVE

  - on 1st tab disable the collapsing and scrolling effect
  - on 2nd and 3rd tab collapsing and scrolling is enabled

 */

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  TabController _tabController;

  int _index = 0;
  List<Widget> _tabPages = <Widget>[Container(
    child: Container(
      padding: EdgeInsets.only(left: 40, right: 40),
      child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                    children: <Widget>[
                      Text("basic data"),
                      Text("basic data value")
                    ]
                ),
                Column(
                    children: <Widget>[
                      Text("basic data"),
                      Text("basic data value")
                    ]
                )
              ]
          ),
          Padding(padding: EdgeInsets.only(bottom: 32)),
          Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Column(
                    children: <Widget>[
                      Text("basic data"),
                      Text("basic data value")
                    ]
                ),
                Column(
                    children: <Widget>[
                      Text("basic data"),
                      Text("basic data value")
                    ]
                )
              ]
          )
        ]
      ),
      color: Colors.white,
    )
  ), ListView.builder(itemBuilder: (BuildContext context, int index) {
    return Card(
      margin: EdgeInsets.only(top: 16),
      child: Container(
        child: Text("Event dummy text"),
        height: 50,
      ),
    );
  }, itemCount: 120), ListView.builder(itemBuilder: (BuildContext context, int index) {
    return Card(
      margin: EdgeInsets.only(top: 16),
      child: Container(
        child: Text("Reminder dummy text"),
        height: 50,
      ),
    );
  }, itemCount: 120)];

  @override
  void initState() {
    super.initState();

    _tabController = TabController(vsync: this, length: _tabPages.length);

    _tabController.addListener(() {
      setState(() {
        _index = _tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    Widget appBar;
    if (_index != 0) {
      appBar = SliverAppBar(
        expandedHeight: 390,
        floating: false,
        pinned: false,
        primary: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: Container(),
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            collapseMode: CollapseMode.none,
            stretchModes: [StretchMode.blurBackground],
            title: Text("Collapsing Toolbar",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                )),
            background: Image.network(
              "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
              fit: BoxFit.cover,
            )),
      );
    } else {
      appBar = SliverToBoxAdapter(
        child: Stack(alignment: Alignment.bottomCenter,
            children: <Widget>[
              Container(
                  constraints: BoxConstraints(minHeight: 390),
                  height: 390,
                  child: Image.network(
                    "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                    fit: BoxFit.cover,
                  )
              ),
              Padding(
                padding: EdgeInsets.only(bottom: 16),
                child: Text("Collapsing Toolbar",
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 24.0,
                    ))
              )
            ]
        )
      );
    }

    return Scaffold(
        key: _scaffoldKey,
        drawer: Drawer(),
        appBar: AppBar(
            elevation: 0.0,
            centerTitle: true,
            flexibleSpace: Container(decoration: BoxDecoration(gradient: LinearGradient(begin: Alignment.centerLeft, end: Alignment.centerRight, colors: const <Color>[const Color.fromRGBO(101, 95, 255, 1.0), const Color.fromRGBO(53, 152, 254, 1.0)]))),
            title: Text("TITLE"),
            actions: <Widget>[
              IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {
                    Navigator.pushNamed(context, "/share");
                  })
            ]),
        backgroundColor: Colors.grey,
        body: DefaultTabController(
            length: 3,
            child: Container(
                child: NestedScrollView(
                    physics: NeverScrollableScrollPhysics(),
                    controller: null,
                    headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
                      return <Widget>[
                        appBar,
                        SliverPersistentHeader(
                          delegate: _SliverDelegate(Material(
                              elevation: 2,
                              color: Colors.white,
                              child: TabBar(
                                  isScrollable: false,
                                  controller: _tabController,
                                  indicatorSize: TabBarIndicatorSize.tab,
                                  indicatorWeight: 2.0,
                                  indicatorColor: Colors.red,
                                  labelColor: Colors.red,
                                  labelPadding: EdgeInsets.zero,
                                  labelStyle: TextStyle(color: Colors.grey, fontWeight: FontWeight.bold, fontSize: 14),
                                  unselectedLabelColor: Colors.blueGrey,
                                  tabs: [
                                    Container(width: MediaQuery.of(context).size.width / 3, child: Tab(text: "data")),
                                    Container(width: MediaQuery.of(context).size.width / 3, child: Tab(text: "events")),
                                    Container(width: MediaQuery.of(context).size.width / 3, child: Tab(text: "reminders"))
                                  ])
                          )),
                          pinned: true,
                        ),
                      ];
                    },
                    body: _tabPages[_index]))));
  }
}

class _SliverDelegate extends SliverPersistentHeaderDelegate {

  final Material _material;
  TabBar _tabBar;

  _SliverDelegate(this._material) {
    _tabBar = _material.child as TabBar;
  }

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return _material;
  }

  @override
  bool shouldRebuild(_SliverDelegate oldDelegate) {
    return false;
  }
}

[diegoveloper]

done

  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  TabController _tabController;

  int _index = 0;
  List<Widget> _tabPages = <Widget>[
    Container(
        child: Container(
      padding: EdgeInsets.only(left: 40, right: 40),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(children: <Widget>[
                    Text("basic data"),
                    Text("basic data value")
                  ]),
                  Column(children: <Widget>[
                    Text("basic data"),
                    Text("basic data value")
                  ])
                ]),
            Padding(padding: EdgeInsets.only(bottom: 32)),
            Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(children: <Widget>[
                    Text("basic data"),
                    Text("basic data value")
                  ]),
                  Column(children: <Widget>[
                    Text("basic data"),
                    Text("basic data value")
                  ])
                ])
          ]),
      color: Colors.white,
    )),
    ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Card(
            margin: EdgeInsets.only(top: 16),
            child: Container(
              child: Text("Event dummy text"),
              height: 50,
            ),
          );
        },
        itemCount: 120),
    ListView.builder(
        itemBuilder: (BuildContext context, int index) {
          return Card(
            margin: EdgeInsets.only(top: 16),
            child: Container(
              child: Text("Reminder dummy text"),
              height: 50,
            ),
          );
        },
        itemCount: 120)
  ];

  @override
  void initState() {
    super.initState();

    _tabController = TabController(vsync: this, length: _tabPages.length);

    _tabController.addListener(() {
      setState(() {
        _index = _tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    Widget appBar;
    if (_index != 0) {
      appBar = SliverAppBar(
        expandedHeight: 390,
        floating: false,
        pinned: false,
        primary: true,
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: Container(),
        flexibleSpace: FlexibleSpaceBar(
            centerTitle: true,
            collapseMode: CollapseMode.none,
            stretchModes: [StretchMode.blurBackground],
            title: Text("Collapsing Toolbar",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 16.0,
                )),
            background: Image.network(
              "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
              fit: BoxFit.cover,
            )),
      );
    } else {
      appBar = SliverPersistentHeader(
          pinned: true,
          delegate: _CustomSliverDelegate(
              Stack(
                alignment: Alignment.bottomCenter,
                children: <Widget>[
                  Container(
                      constraints: BoxConstraints(minHeight: 390),
                      height: 390,
                      child: Image.network(
                        "https://images.pexels.com/photos/396547/pexels-photo-396547.jpeg?auto=compress&cs=tinysrgb&h=350",
                        fit: BoxFit.cover,
                      )),
                  Padding(
                      padding: EdgeInsets.only(bottom: 16),
                      child: Text("Collapsing Toolbar",
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0,
                          )))
                ],
              ),
              390));
    }

    return Scaffold(
        key: _scaffoldKey,
        drawer: Drawer(),
        appBar: AppBar(
            elevation: 0.0,
            centerTitle: true,
            flexibleSpace: Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: const <Color>[
                  const Color.fromRGBO(101, 95, 255, 1.0),
                  const Color.fromRGBO(53, 152, 254, 1.0)
                ]))),
            title: Text("TITLE"),
            actions: <Widget>[
              IconButton(
                  icon: Icon(Icons.share),
                  onPressed: () {
                    Navigator.pushNamed(context, "/share");
                  })
            ]),
        backgroundColor: Colors.grey,
        body: DefaultTabController(
            length: 3,
            child: Container(
                child: NestedScrollView(
                    physics: NeverScrollableScrollPhysics(),
                    controller: null,
                    headerSliverBuilder:
                        (BuildContext context, bool innerBoxIsScrolled) {
                      return <Widget>[
                        appBar,
                        SliverPersistentHeader(
                          delegate: _SliverDelegate(Material(
                              elevation: 2,
                              color: Colors.white,
                              child: TabBar(
                                  isScrollable: false,
                                  controller: _tabController,
                                  indicatorSize: TabBarIndicatorSize.tab,
                                  indicatorWeight: 2.0,
                                  indicatorColor: Colors.red,
                                  labelColor: Colors.red,
                                  labelPadding: EdgeInsets.zero,
                                  labelStyle: TextStyle(
                                      color: Colors.grey,
                                      fontWeight: FontWeight.bold,
                                      fontSize: 14),
                                  unselectedLabelColor: Colors.blueGrey,
                                  tabs: [
                                    Container(
                                        width:
                                            MediaQuery.of(context).size.width /
                                                3,
                                        child: Tab(text: "data")),
                                    Container(
                                        width:
                                            MediaQuery.of(context).size.width /
                                                3,
                                        child: Tab(text: "events")),
                                    Container(
                                        width:
                                            MediaQuery.of(context).size.width /
                                                3,
                                        child: Tab(text: "reminders"))
                                  ]))),
                          pinned: true,
                        ),
                      ];
                    },
                    body: _tabPages[_index]))));
  }
}

class _SliverDelegate extends SliverPersistentHeaderDelegate {
  final Material _material;
  TabBar _tabBar;

  _SliverDelegate(this._material) {
    _tabBar = _material.child as TabBar;
  }

  @override
  double get minExtent => _tabBar.preferredSize.height;
  @override
  double get maxExtent => _tabBar.preferredSize.height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return _material;
  }

  @override
  bool shouldRebuild(_SliverDelegate oldDelegate) {
    return false;
  }
}

class _CustomSliverDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;
  final double height;

  _CustomSliverDelegate(this.child, this.height);

  @override
  double get minExtent => height;
  @override
  double get maxExtent => height;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  bool shouldRebuild(_CustomSliverDelegate oldDelegate) {
    return false;
  }
}

[Stewioie]

Thanks. Now tha appbars are perfect.

Final question is: On tab1 the body is scrollable. Can it be disabled?

[diegoveloper]

you just need to change the widget according to your condition.

On Mon, Feb 3, 2020 at 1:34 PM Szalók Dániel notifications@github.com wrote:

Thanks. Now tha appbars are perfect.

Final question is: On tab1 the body is scrollable. Can it be disabled?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter-samples/issues/15?email_source=notifications&email_token=ABFL3UFITHOKLOOH5H7EAJLRBBPRZA5CNFSM4KOUKTPKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEKU45GQ#issuecomment-581553818, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UHKFMDQHUDBLU5A7V3RBBPRZANCNFSM4KOUKTPA .