Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added custom selection indicators to the gallery scrollable tabs demo #15323

Merged
merged 1 commit into from Mar 12, 2018
Merged

Added custom selection indicators to the gallery scrollable tabs demo #15323

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
65 changes: 65 additions & 0 deletions examples/flutter_gallery/lib/demo/material/scrollable_tabs_demo.dart
View file
Open in desktop
Expand Up @@ -43,6 +43,7 @@ class ScrollableTabsDemo extends StatefulWidget {
class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin {
TabController _controller;
TabsDemoStyle _demoStyle = TabsDemoStyle.iconsAndText;
bool _customIndicator = false;

@override
void initState() {
Expand All @@ -62,13 +63,76 @@ class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTicke
});
}

ShapeDecoration getIndicator() {
if (!_customIndicator)
return null;

switch(_demoStyle) {
case TabsDemoStyle.iconsAndText:
return new ShapeDecoration(
shape: const RoundedRectangleBorder(
borderRadius: const BorderRadius.all(const Radius.circular(4.0)),
side: const BorderSide(
color: Colors.white24,
width: 2.0,
),
) + const RoundedRectangleBorder(
borderRadius: const BorderRadius.all(const Radius.circular(4.0)),
side: const BorderSide(
color: Colors.transparent,
width: 4.0,
),
),
);

case TabsDemoStyle.iconsOnly:
return new ShapeDecoration(
shape: const CircleBorder(
side: const BorderSide(
color: Colors.white24,
width: 4.0,
),
) + const CircleBorder(
side: const BorderSide(
color: Colors.transparent,
width: 4.0,
),
),
);

case TabsDemoStyle.textOnly:
return new ShapeDecoration(
shape: const StadiumBorder(
side: const BorderSide(
color: Colors.white24,
width: 2.0,
),
) + const StadiumBorder(
side: const BorderSide(
color: Colors.transparent,
width: 4.0,
),
),
);
}
return null;
}

@override
Widget build(BuildContext context) {
final Color iconColor = Theme.of(context).accentColor;
return new Scaffold(
appBar: new AppBar(
title: const Text('Scrollable tabs'),
actions: <Widget>[
new IconButton(
icon: const Icon(Icons.sentiment_very_satisfied),
onPressed: () {
setState(() {
_customIndicator = !_customIndicator;
});
},
),
new PopupMenuButton<TabsDemoStyle>(
onSelected: changeDemoStyle,
itemBuilder: (BuildContext context) => <PopupMenuItem<TabsDemoStyle>>[
Expand All @@ -90,6 +154,7 @@ class ScrollableTabsDemoState extends State<ScrollableTabsDemo> with SingleTicke
bottom: new TabBar(
controller: _controller,
isScrollable: true,
indicator: getIndicator(),
tabs: _allPages.map((_Page page) {
switch (_demoStyle) {
case TabsDemoStyle.iconsAndText:
Expand Down