main.dart

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
import 'package:flutter/material.dart';

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

class MainCollapsingToolbar extends StatefulWidget {
  @override
  _MainCollapsingToolbarState createState() => _MainCollapsingToolbarState();
}

class _MainCollapsingToolbarState extends State<MainCollapsingToolbar> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      body: DefaultTabController(
        length: 6,
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200.0,
                floating: true,
                pinned: false,
                flexibleSpace: FlexibleSpaceBar(
                    centerTitle: true,
                    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(
                  isScrollable: true,
                  labelColor: Colors.black87,
                  unselectedLabelColor: Colors.grey,
                  tabs: [
                    Container(
                        width: 80.0,
                        child: Tab(icon: Icon(Icons.directions_car))),
                    Container(
                        width: 80.0,
                        child: Tab(icon: Icon(Icons.directions_transit))),
                    Container(
                        width: 80.0,
                        child: Tab(icon: Icon(Icons.directions_bike))),
                    Container(
                        width: 80.0,
                        child: Tab(icon: Icon(Icons.directions_boat))),
                    Container(
                        width: 80.0,
                        child: Tab(icon: Icon(Icons.directions_subway))),
                    Container(
                        width: 80.0,
                        child: Tab(icon: Icon(Icons.directions_walk))),
                  ],
                )),
                pinned: true,
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(
//                  color: Colors.red,
                child: ListView.builder(
                  itemCount: 60,
                  itemBuilder: (BuildContext context, int index) {
                    return Card(
                        margin: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 15.0),
                        child: Container(
                          padding: EdgeInsets.all(30.0),
                          child: Center(
                            child: Text('Item $index'),
                          ),
                        ));
                  },
                ),
              ),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
              Icon(Icons.directions_boat),
              Icon(Icons.directions_subway),
              Icon(Icons.directions_walk),
            ],
          ),
        ),
      ),
    ));
  }
}

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(
      decoration: new BoxDecoration(
        color: Colors.white,
      ),
      child: _tabBar,
    );
  }

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