DEV/flutter_flutter
1
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2026-02-20 02:29:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1621 from HansMuller/tablabel_widget

Browse Source 
Support TabLabel widgets
This commit is contained in:
Hans Muller 2016-02-05 09:59:43 -08:00
commit e9b59f2ea4
2 changed files with 27 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
examples/widgets/fab.dart
View File

@ -1,94 +0,0 @@
// 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';
class _Page {
_Page({this.label, this.color, this.icon});
final String label;
final Map<int, Color> color;
final String icon;
TabLabel get tabLabel => new TabLabel(text: label);
bool get fabDefined => color != null && icon != null;
Color get fabColor => color[400];
Icon get fabIcon => new Icon(icon: icon);
Key get fabKey => new ValueKey<Color>(fabColor);
}
List<_Page> _pages = <_Page>[
new _Page(label: "Blue", color: Colors.indigo, icon: 'content/add'),
new _Page(label: "Too", color: Colors.indigo, icon: 'content/add'),
new _Page(label: "Eco", color: Colors.green, icon: 'content/create'),
new _Page(label: "No"),
new _Page(label: "Teal", color: Colors.teal, icon: 'content/add'),
new _Page(label: "Red", color: Colors.red, icon: 'content/create')
];
class FabApp extends StatefulComponent {
FabApp();
FabAppState createState() => new FabAppState();
}
class FabAppState extends State<FabApp> {
_Page selectedPage = _pages[0];
void _handleTabSelection(_Page page) {
setState(() {
selectedPage = page;
});
}
Widget buildTabView(_Page page) {
return new Builder(
builder: (BuildContext context) {
final TextStyle textStyle = new TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 32.0,
textAlign: TextAlign.center
);
return new Container(
key: new ValueKey<String>(page.label),
padding: const EdgeDims.TRBL(48.0, 48.0, 96.0, 48.0),
child: new Card(
child: new Center(
child: new Text(page.label, style: textStyle)
)
)
);
}
);
}
Widget build(BuildContext context) {
return new TabBarSelection<_Page>(
values: _pages,
onChanged: _handleTabSelection,
child: new Scaffold(
toolBar: new ToolBar(
elevation: 0,
center: new Text('FAB Transition Demo'),
tabBar: new TabBar<String>(
labels: new Map.fromIterable(_pages, value: (_Page page) => page.tabLabel)
)
),
body: new TabBarView(children: _pages.map(buildTabView).toList()),
floatingActionButton: !selectedPage.fabDefined ? null : new FloatingActionButton(
key: selectedPage.fabKey,
backgroundColor: selectedPage.fabColor,
child: selectedPage.fabIcon
)
)
);
}
}
void main() {
runApp(new MaterialApp(
title: 'FabApp',
routes: {
'/': (RouteArguments args) => new FabApp()
}
));
}

47
packages/flutter/lib/src/material/tabs.dart
View File

@ -280,21 +280,19 @@ class _TabBarWrapper extends MultiChildRenderObjectWidget {
}
}
typedef Widget TabLabelIconBuilder(BuildContext context, Color color);
/// Each TabBar tab can display either a title [text], an icon, or both. An icon
/// can be specified by either the icon or iconBuilder parameters. In either case
/// the icon will occupy a 24x24 box above the title text. If iconBuilder is
/// specified its color parameter is the color that an ordinary icon would have
/// been drawn with. The color reflects that tab's selection state.
class TabLabel {
const TabLabel({ this.text, this.icon });
const TabLabel({ this.text, this.icon, this.iconBuilder });
final String text;
final String icon;
String toString() {
if (text != null && icon != null)
return '"$text" ($icon)';
if (text != null)
return '"$text"';
if (icon != null)
return '$icon';
return 'EMPTY TAB LABEL';
}
final TabLabelIconBuilder iconBuilder;
}
class _Tab extends StatelessComponent {
@ -304,7 +302,7 @@ class _Tab extends StatelessComponent {
this.label,
this.color
}) : super(key: key) {
assert(label.text != null || label.icon != null);
assert(label.text != null || label.icon != null || label.iconBuilder != null);
}
final VoidCallback onSelected;
@ -317,22 +315,30 @@ class _Tab extends StatelessComponent {
return new Text(label.text, style: style);
}
Widget _buildLabelIcon() {
assert(label.icon != null);
return new Icon(icon: label.icon, color: color);
Widget _buildLabelIcon(BuildContext context) {
assert(label.icon != null || label.iconBuilder != null);
if (label.icon != null) {
return new Icon(icon: label.icon, color: color);
} else {
return new SizedBox(
width: 24.0,
height: 24.0,
child: label.iconBuilder(context, color)
);
}
}
Widget build(BuildContext context) {
Widget labelContent;
if (label.icon == null) {
if (label.icon == null && label.iconBuilder == null) {
labelContent = _buildLabelText();
} else if (label.text == null) {
labelContent = _buildLabelIcon();
labelContent = _buildLabelIcon(context);
} else {
labelContent = new Column(
children: <Widget>[
new Container(
child: _buildLabelIcon(),
child: _buildLabelIcon(context),
margin: const EdgeDims.only(bottom: 10.0)
),
_buildLabelText()
@ -733,13 +739,14 @@ class _TabBarState<T> extends ScrollableState<TabBar<T>> implements TabBarSelect
TextStyle textStyle = themeData.primaryTextTheme.body1;
IconThemeData iconTheme = themeData.primaryIconTheme;
Color textColor = themeData.primaryTextTheme.body1.color.withAlpha(0xB2); // 70% alpha
List<Widget> tabs = <Widget>[];
bool textAndIcons = false;
int tabIndex = 0;
for (TabLabel label in config.labels.values) {
tabs.add(_toTab(label, tabIndex++, textStyle.color, indicatorColor));
if (label.text != null && label.icon != null)
tabs.add(_toTab(label, tabIndex++, textColor, indicatorColor));
if (label.text != null && (label.icon != null || label.iconBuilder != null))
textAndIcons = true;
}