Skip to content
This repository was archived by the owner on Apr 29, 2021. It is now read-only.

Commit 9c5f392

Browse files
author
Yuncong Zhang
committed
Update.
1 parent 4841a1e commit 9c5f392

File tree

3 files changed

+196
-9
lines changed

3 files changed

+196
-9
lines changed

‎Samples/UIWidgetsGallery/demo/material/tabs_fab_demo.cs

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
using System.Collections.Generic;
2+
using System.Linq;
3+
using Unity.UIWidgets.foundation;
4+
using Unity.UIWidgets.material;
5+
using Unity.UIWidgets.painting;
6+
using Unity.UIWidgets.ui;
7+
using Unity.UIWidgets.widgets;
8+
9+
namespace UIWidgetsGallery.gallery {
10+
class TabsFabDemoUtils {
11+
public const string _explanatoryText =
12+
"When the Scaffold's floating action button changes, the new button fades and " +
13+
"turns into view. In this demo, changing tabs can cause the app to be rebuilt " +
14+
"with a FloatingActionButton that the Scaffold distinguishes from the others " +
15+
"by its key.";
16+
17+
public static readonly List<_Page> _allPages = new List<_Page> {
18+
new _Page(label: "Blue", colors: Colors.indigo, icon: Icons.add),
19+
new _Page(label: "Eco", colors: Colors.green, icon: Icons.create),
20+
new _Page(label: "No"),
21+
new _Page(label: "Teal", colors: Colors.teal, icon: Icons.add),
22+
new _Page(label: "Red", colors: Colors.red, icon: Icons.create)
23+
};
24+
}
25+
26+
class _Page {
27+
public _Page(
28+
string label,
29+
MaterialColor colors = null,
30+
IconData icon = null
31+
) {
32+
this.label = label;
33+
this.colors = colors;
34+
this.icon = icon;
35+
}
36+
37+
public readonly string label;
38+
public readonly MaterialColor colors;
39+
public readonly IconData icon;
40+
41+
public Color labelColor {
42+
get { return this.colors != null ? this.colors.shade300 : Colors.grey.shade300; }
43+
}
44+
45+
public bool fabDefined {
46+
get { return this.colors != null && this.icon != null; }
47+
}
48+
49+
public Color fabColor {
50+
get { return this.colors.shade400; }
51+
}
52+
53+
public Icon fabIcon {
54+
get { return new Icon(this.icon); }
55+
}
56+
57+
public Key fabKey {
58+
get { return new ValueKey<Color>(this.fabColor); }
59+
}
60+
}
61+
62+
63+
public class TabsFabDemo : StatefulWidget {
64+
public const string routeName = "/material/tabs-fab";
65+
66+
public override State createState() {
67+
return new _TabsFabDemoState();
68+
}
69+
}
70+
71+
class _TabsFabDemoState : SingleTickerProviderStateMixin<TabsFabDemo> {
72+
GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>.key();
73+
74+
TabController _controller;
75+
_Page _selectedPage;
76+
bool _extendedButtons = false;
77+
78+
public override void initState() {
79+
base.initState();
80+
this._controller = new TabController(vsync: this, length: TabsFabDemoUtils._allPages.Count);
81+
this._controller.addListener(this._handleTabSelection);
82+
this._selectedPage = TabsFabDemoUtils._allPages[0];
83+
}
84+
85+
public override void dispose() {
86+
this._controller.dispose();
87+
base.dispose();
88+
}
89+
90+
void _handleTabSelection() {
91+
this.setState(() => { this._selectedPage = TabsFabDemoUtils._allPages[this._controller.index]; });
92+
}
93+
94+
void _showExplanatoryText() {
95+
this._scaffoldKey.currentState.showBottomSheet((BuildContext context) => {
96+
return new Container(
97+
decoration: new BoxDecoration(
98+
border: new Border(top: new BorderSide(color: Theme.of(this.context).dividerColor))
99+
),
100+
child: new Padding(
101+
padding: EdgeInsets.all(32.0f),
102+
child: new Text(TabsFabDemoUtils._explanatoryText,
103+
style: Theme.of(this.context).textTheme.subhead)
104+
)
105+
);
106+
});
107+
}
108+
109+
Widget buildTabView(_Page page) {
110+
return new Builder(
111+
builder: (BuildContext context) => {
112+
return new Container(
113+
key: new ValueKey<string>(page.label),
114+
padding: EdgeInsets.fromLTRB(48.0f, 48.0f, 48.0f, 96.0f),
115+
child: new Card(
116+
child: new Center(
117+
child: new Text(page.label,
118+
style: new TextStyle(
119+
color: page.labelColor,
120+
fontSize: 32.0f
121+
),
122+
textAlign: TextAlign.center
123+
)
124+
)
125+
)
126+
);
127+
}
128+
);
129+
}
130+
131+
Widget buildFloatingActionButton(_Page page) {
132+
if (!page.fabDefined) {
133+
return null;
134+
}
135+
136+
if (this._extendedButtons) {
137+
return FloatingActionButton.extended(
138+
key: new ValueKey<Key>(page.fabKey),
139+
tooltip: "Show explanation",
140+
backgroundColor: page.fabColor,
141+
icon: page.fabIcon,
142+
label: new Text(page.label.ToUpper()),
143+
onPressed: this._showExplanatoryText
144+
);
145+
}
146+
147+
return new FloatingActionButton(
148+
key: page.fabKey,
149+
tooltip: "Show explanation",
150+
backgroundColor: page.fabColor,
151+
child: page.fabIcon,
152+
onPressed: this._showExplanatoryText
153+
);
154+
}
155+
156+
public override Widget build(BuildContext context) {
157+
return new Scaffold(
158+
key: this._scaffoldKey,
159+
appBar: new AppBar(
160+
title: new Text("FAB per tab"),
161+
bottom: new TabBar(
162+
controller: this._controller,
163+
tabs: TabsFabDemoUtils._allPages
164+
.Select<_Page, Widget>((_Page page) => new Tab(text: page.label.ToUpper())).ToList()
165+
),
166+
actions: new List<Widget> {
167+
new MaterialDemoDocumentationButton(TabsFabDemo.routeName),
168+
new IconButton(
169+
icon: new Icon(Icons.sentiment_very_satisfied),
170+
onPressed: () => {
171+
this.setState(() => { this._extendedButtons = !this._extendedButtons; });
172+
}
173+
)
174+
}
175+
),
176+
floatingActionButton: this.buildFloatingActionButton(this._selectedPage),
177+
body: new TabBarView(
178+
controller: this._controller,
179+
children: TabsFabDemoUtils._allPages.Select<_Page, Widget>(this.buildTabView).ToList()
180+
)
181+
);
182+
}
183+
}
184+
}

‎Samples/UIWidgetsGallery/demo/material/tabs_fab_demo.cs.meta

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Samples/UIWidgetsGallery/gallery/demos.cs

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -227,15 +227,15 @@ static List<GalleryDemo> _buildGalleryDemos() {
227227
routeName: ButtonsDemo.routeName,
228228
buildRoute: (BuildContext context) => new ButtonsDemo()
229229
),
230-
// new GalleryDemo(
231-
// title: "Buttons: Floating Action Button",
232-
// subtitle: "FAB with transitions",
233-
// icon: GalleryIcons.buttons,
234-
// category: GalleryDemoCategory._kMaterialComponents,
235-
// routeName: TabsFabDemo.routeName,
236-
// documentationUrl: "https://docs.flutter.io/flutter/material/FloatingActionButton-class.html",
237-
// buildRoute: (BuildContext context) => TabsFabDemo()
238-
// ),
230+
new GalleryDemo(
231+
title: "Buttons: Floating Action Button",
232+
subtitle: "FAB with transitions",
233+
icon: GalleryIcons.buttons,
234+
category: _kMaterialComponents,
235+
routeName: TabsFabDemo.routeName,
236+
documentationUrl: "https://docs.flutter.io/flutter/material/FloatingActionButton-class.html",
237+
buildRoute: (BuildContext context) => new TabsFabDemo()
238+
),
239239
new GalleryDemo(
240240
title: "Cards",
241241
subtitle: "Baseline cards with rounded corners",

0 commit comments

Comments
 (0)