mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
129 lines
3.8 KiB
Dart
129 lines
3.8 KiB
Dart
// 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()
|
|
),
|
|
);
|
|
}
|
|
}
|