app_bar_bottom.dart 4.12 KB
Newer Older
1 2 3 4 5 6
// Copyright 2017 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';

7 8
class AppBarBottomSample extends StatefulWidget {
  @override
9
  _AppBarBottomSampleState createState() => _AppBarBottomSampleState();
10 11 12 13 14 15 16 17
}

class _AppBarBottomSampleState extends State<AppBarBottomSample> with SingleTickerProviderStateMixin {
  TabController _tabController;

  @override
  void initState() {
    super.initState();
18
    _tabController = TabController(vsync: this, length: choices.length);
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void _nextPage(int delta) {
    final int newIndex = _tabController.index + delta;
    if (newIndex < 0 || newIndex >= _tabController.length)
      return;
    _tabController.animateTo(newIndex);
  }

  @override
  Widget build(BuildContext context) {
36 37 38
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
39
          title: const Text('AppBar Bottom Widget'),
40
          leading: IconButton(
41 42 43 44 45
            tooltip: 'Previous choice',
            icon: const Icon(Icons.arrow_back),
            onPressed: () { _nextPage(-1); },
          ),
          actions: <Widget>[
46
            IconButton(
47 48 49 50 51
              icon: const Icon(Icons.arrow_forward),
              tooltip: 'Next choice',
              onPressed: () { _nextPage(1); },
            ),
          ],
52
          bottom: PreferredSize(
53
            preferredSize: const Size.fromHeight(48.0),
54
            child: Theme(
55
              data: Theme.of(context).copyWith(accentColor: Colors.white),
56
              child: Container(
57
                height: 48.0,
58
                alignment: Alignment.center,
59
                child: TabPageSelector(controller: _tabController),
60 61 62 63
              ),
            ),
          ),
        ),
64
        body: TabBarView(
65
          controller: _tabController,
66
          children: choices.map<Widget>((Choice choice) {
67
            return Padding(
68
              padding: const EdgeInsets.all(16.0),
69
              child: ChoiceCard(choice: choice),
70 71 72 73 74 75 76
            );
          }).toList(),
        ),
      ),
    );
  }
}
77 78 79 80 81 82 83

class Choice {
  const Choice({ this.title, this.icon });
  final String title;
  final IconData icon;
}

84 85 86 87 88 89 90
const List<Choice> choices = <Choice>[
  Choice(title: 'CAR', icon: Icons.directions_car),
  Choice(title: 'BICYCLE', icon: Icons.directions_bike),
  Choice(title: 'BOAT', icon: Icons.directions_boat),
  Choice(title: 'BUS', icon: Icons.directions_bus),
  Choice(title: 'TRAIN', icon: Icons.directions_railway),
  Choice(title: 'WALK', icon: Icons.directions_walk),
91 92 93 94 95 96 97 98 99 100
];

class ChoiceCard extends StatelessWidget {
  const ChoiceCard({ Key key, this.choice }) : super(key: key);

  final Choice choice;

  @override
  Widget build(BuildContext context) {
    final TextStyle textStyle = Theme.of(context).textTheme.display1;
101
    return Card(
102
      color: Colors.white,
103 104
      child: Center(
        child: Column(
105 106 107
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
108 109
            Icon(choice.icon, size: 128.0, color: textStyle.color),
            Text(choice.title, style: textStyle),
110 111 112 113 114 115 116
          ],
        ),
      ),
    );
  }
}

117
void main() {
118
  runApp(AppBarBottomSample());
119 120
}

121 122
/*
Sample Catalog
123

124
Title: AppBar with a custom bottom widget.
125

126 127 128
Summary: An AppBar that includes a bottom widget. Any widget
with a PreferredSize can appear at the bottom of an AppBar.

129
Summary: Any widget with a PreferredSize can appear at the bottom of an AppBar.
130

131
Description:
132 133 134 135 136
Typically an AppBar's bottom widget is a TabBar however any widget with a
PreferredSize can be used. In this app, the app bar's bottom widget is a
TabPageSelector that displays the relative position of the selected page
in the app's TabBarView. The arrow buttons in the toolbar part of the app
bar and they select the previous or the next page.
137

138
Classes: AppBar, PreferredSize, TabBarView, TabController
139

140 141 142 143
Sample: AppBarBottomSample

See also:
  - The "Components-Tabs" section of the material design specification:
144
    <https://material.io/go/design-tabs>
145
*/