bottom_navigation_demo.dart 5.94 KB
Newer Older
1 2 3 4 5 6 7 8
// Copyright 2016 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

class NavigationIconView {
  NavigationIconView({
9
    Widget icon,
10
    Widget title,
11 12
    Color color,
    TickerProvider vsync,
13 14
  }) : _icon = icon,
       _color = color,
15
       item = new BottomNavigationBarItem(
16 17
         icon: icon,
         title: title,
18
         backgroundColor: color,
19 20
       ),
       controller = new AnimationController(
21 22
         duration: kThemeAnimationDuration,
         vsync: vsync,
23
       ) {
24 25
    _animation = new CurvedAnimation(
      parent: controller,
26
      curve: const Interval(0.5, 1.0, curve: Curves.fastOutSlowIn),
27 28
    );
  }
29

30
  final Widget _icon;
31
  final Color _color;
32
  final BottomNavigationBarItem item;
33 34 35 36 37 38 39 40 41
  final AnimationController controller;
  CurvedAnimation _animation;

  FadeTransition transition(BottomNavigationBarType type, BuildContext context) {
    Color iconColor;
    if (type == BottomNavigationBarType.shifting) {
      iconColor = _color;
    } else {
      final ThemeData themeData = Theme.of(context);
42 43 44
      iconColor = themeData.brightness == Brightness.light
          ? themeData.primaryColor
          : themeData.accentColor;
45 46 47 48 49 50 51
    }

    return new FadeTransition(
      opacity: _animation,
      child: new SlideTransition(
        position: new Tween<FractionalOffset>(
          begin: const FractionalOffset(0.0, 0.02), // Small offset from the top.
52
          end: FractionalOffset.topLeft,
53
        ).animate(_animation),
54 55 56 57 58 59 60 61 62 63 64 65 66 67 68
        child: new IconTheme(
          data: new IconThemeData(
            color: iconColor,
            size: 120.0,
          ),
          child: _icon,
        ),
      ),
    );
  }
}

class CustomIcon extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
69
    final IconThemeData iconTheme = IconTheme.of(context);
70 71 72 73
    return new Container(
      margin: const EdgeInsets.all(4.0),
      width: iconTheme.size - 8.0,
      height: iconTheme.size - 8.0,
74
      color: iconTheme.color,
75 76 77 78 79
    );
  }
}

class BottomNavigationDemo extends StatefulWidget {
80
  static const String routeName = '/material/bottom_navigation';
81 82 83 84 85

  @override
  _BottomNavigationDemoState createState() => new _BottomNavigationDemoState();
}

86 87
class _BottomNavigationDemoState extends State<BottomNavigationDemo>
    with TickerProviderStateMixin {
88 89 90 91 92 93 94 95 96
  int _currentIndex = 0;
  BottomNavigationBarType _type = BottomNavigationBarType.shifting;
  List<NavigationIconView> _navigationViews;

  @override
  void initState() {
    super.initState();
    _navigationViews = <NavigationIconView>[
      new NavigationIconView(
97 98
        icon: const Icon(Icons.access_alarm),
        title: const Text('Alarm'),
99
        color: Colors.deepPurple,
100
        vsync: this,
101
      ),
102 103
      new NavigationIconView(
        icon: new CustomIcon(),
104
        title: const Text('Box'),
105
        color: Colors.deepOrange,
106 107
        vsync: this,
      ),
108
      new NavigationIconView(
109 110
        icon: const Icon(Icons.cloud),
        title: const Text('Cloud'),
111
        color: Colors.teal,
112
        vsync: this,
113 114
      ),
      new NavigationIconView(
115 116
        icon: const Icon(Icons.favorite),
        title: const Text('Favorites'),
117
        color: Colors.indigo,
118
        vsync: this,
119 120
      ),
      new NavigationIconView(
121 122
        icon: const Icon(Icons.event_available),
        title: const Text('Event'),
123
        color: Colors.pink,
124
        vsync: this,
125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146
      )
    ];

    for (NavigationIconView view in _navigationViews)
      view.controller.addListener(_rebuild);

    _navigationViews[_currentIndex].controller.value = 1.0;
  }

  @override
  void dispose() {
    for (NavigationIconView view in _navigationViews)
      view.controller.dispose();
    super.dispose();
  }

  void _rebuild() {
    setState(() {
      // Rebuild in order to animate views.
    });
  }

147
  Widget _buildTransitionsStack() {
148 149 150 151 152 153 154
    final List<FadeTransition> transitions = <FadeTransition>[];

    for (NavigationIconView view in _navigationViews)
      transitions.add(view.transition(_type, context));

    // We want to have the newly animating (fading in) views on top.
    transitions.sort((FadeTransition a, FadeTransition b) {
155 156 157 158
      final Animation<double> aAnimation = a.listenable;
      final Animation<double> bAnimation = b.listenable;
      final double aValue = aAnimation.value;
      final double bValue = bAnimation.value;
159 160 161
      return aValue.compareTo(bValue);
    });

162
    return new Stack(children: transitions);
163 164 165 166
  }

  @override
  Widget build(BuildContext context) {
167
    final BottomNavigationBar botNavBar = new BottomNavigationBar(
168 169
      items: _navigationViews
          .map((NavigationIconView navigationView) => navigationView.item)
170
          .toList(),
171 172 173 174 175 176 177 178
      currentIndex: _currentIndex,
      type: _type,
      onTap: (int index) {
        setState(() {
          _navigationViews[_currentIndex].controller.reverse();
          _currentIndex = index;
          _navigationViews[_currentIndex].controller.forward();
        });
179
      },
180 181 182 183
    );

    return new Scaffold(
      appBar: new AppBar(
184
        title: const Text('Bottom navigation'),
185 186 187 188 189 190 191 192
        actions: <Widget>[
          new PopupMenuButton<BottomNavigationBarType>(
            onSelected: (BottomNavigationBarType value) {
              setState(() {
                _type = value;
              });
            },
            itemBuilder: (BuildContext context) => <PopupMenuItem<BottomNavigationBarType>>[
193
              const PopupMenuItem<BottomNavigationBarType>(
194
                value: BottomNavigationBarType.fixed,
195
                child: const Text('Fixed'),
196
              ),
197
              const PopupMenuItem<BottomNavigationBarType>(
198
                value: BottomNavigationBarType.shifting,
199
                child: const Text('Shifting'),
200
              )
201
            ],
202
          )
203
        ],
204
      ),
205 206 207
      body: new Center(
        child: _buildTransitionsStack()
      ),
208
      bottomNavigationBar: botNavBar,
209 210 211
    );
  }
}