| // Copyright 2015 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'; |
| |
| const String _explanatoryText = |
| "When the Scaffold's floating action button changes, the new button fades and " |
| "turns into view. In this demo, changing tabs can cause the app to be rebuilt " |
| "with a FloatingActionButton that the Scaffold distinguishes from the others " |
| "by its key."; |
| |
| class _Page { |
| _Page({ this.label, this.colors, this.icon }); |
| |
| final String label; |
| final MaterialColor colors; |
| final IconData icon; |
| |
| Color get labelColor => colors != null ? colors.shade300 : Colors.grey.shade300; |
| bool get fabDefined => colors != null && icon != null; |
| Color get fabColor => colors.shade400; |
| Icon get fabIcon => new Icon(icon); |
| Key get fabKey => new ValueKey<Color>(fabColor); |
| } |
| |
| final List<_Page> _allPages = <_Page>[ |
| new _Page(label: 'Blue', colors: Colors.indigo, icon: Icons.add), |
| new _Page(label: 'Eco', colors: Colors.green, icon: Icons.create), |
| new _Page(label: 'No'), |
| new _Page(label: 'Teal', colors: Colors.teal, icon: Icons.add), |
| new _Page(label: 'Red', colors: Colors.red, icon: Icons.create), |
| ]; |
| |
| class TabsFabDemo extends StatefulWidget { |
| static const String routeName = '/material/tabs-fab'; |
| |
| @override |
| _TabsFabDemoState createState() => new _TabsFabDemoState(); |
| } |
| |
| class _TabsFabDemoState extends State<TabsFabDemo> with SingleTickerProviderStateMixin { |
| final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>(); |
| |
| TabController _controller; |
| _Page _selectedPage; |
| |
| @override |
| void initState() { |
| super.initState(); |
| _controller = new TabController(vsync: this, length: _allPages.length); |
| _controller.addListener(_handleTabSelection); |
| _selectedPage = _allPages[0]; |
| } |
| |
| @override |
| void dispose() { |
| _controller.dispose(); |
| super.dispose(); |
| } |
| |
| void _handleTabSelection() { |
| setState(() { |
| _selectedPage = _allPages[_controller.index]; |
| }); |
| } |
| |
| void _showExplanatoryText() { |
| _scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) { |
| return new Container( |
| decoration: new BoxDecoration( |
| border: new Border(top: new BorderSide(color: Theme.of(context).dividerColor)) |
| ), |
| child: new Padding( |
| padding: const EdgeInsets.all(32.0), |
| child: new Text(_explanatoryText, style: Theme.of(context).textTheme.subhead) |
| ) |
| ); |
| }); |
| } |
| |
| Widget buildTabView(_Page page) { |
| return new Builder( |
| builder: (BuildContext context) { |
| return new Container( |
| key: new ValueKey<String>(page.label), |
| padding: const EdgeInsets.fromLTRB(48.0, 48.0, 48.0, 96.0), |
| child: new Card( |
| child: new Center( |
| child: new Text(page.label, |
| style: new TextStyle( |
| color: page.labelColor, |
| fontSize: 32.0 |
| ), |
| textAlign: TextAlign.center |
| ) |
| ) |
| ) |
| ); |
| } |
| ); |
| } |
| |
| @override |
| Widget build(BuildContext context) { |
| return new Scaffold( |
| key: _scaffoldKey, |
| appBar: new AppBar( |
| title: const Text('FAB per tab'), |
| bottom: new TabBar( |
| controller: _controller, |
| tabs: _allPages.map((_Page page) => new Tab(text: page.label.toUpperCase())).toList(), |
| ) |
| ), |
| floatingActionButton: !_selectedPage.fabDefined ? null : new FloatingActionButton( |
| key: _selectedPage.fabKey, |
| tooltip: 'Show explanation', |
| backgroundColor: _selectedPage.fabColor, |
| child: _selectedPage.fabIcon, |
| onPressed: _showExplanatoryText |
| ), |
| body: new TabBarView( |
| controller: _controller, |
| children: _allPages.map(buildTabView).toList() |
| ), |
| ); |
| } |
| } |