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

Tab Animation Sample Video #32177

Merged
merged 13 commits into from May 13, 2019
@@ -19,6 +19,8 @@ import 'constants.dart';
/// ancestor, a [TabController] can be shared by providing a
/// [DefaultTabController] inherited widget.
///
/// {@animation 700 540 https://flutter.github.io/assets-for-api-docs/assets/material/tabs.mp4}
///
/// {@tool sample}
///
/// This widget introduces a [Scaffold] with an [AppBar] and a [TabBar].
@@ -32,8 +34,8 @@ import 'constants.dart';
///
/// class _MyTabbedPageState extends State<MyTabbedPage> with SingleTickerProviderStateMixin {
/// final List<Tab> myTabs = <Tab>[
/// Tab(text: 'LEFT'),
/// Tab(text: 'RIGHT'),
/// Tab(text: 'left'),
This conversation was marked as resolved by shihaohong

This comment has been minimized.

Copy link
@HansMuller

HansMuller May 7, 2019

Contributor

The convention per the Material spec is call caps for tab titles

This comment has been minimized.

Copy link
@shihaohong

shihaohong May 7, 2019

Author Contributor

I reverted it to all caps

/// Tab(text: 'right'),
/// ];
///
/// TabController _tabController;
@@ -62,7 +64,12 @@ import 'constants.dart';
/// body: TabBarView(
/// controller: _tabController,
/// children: myTabs.map((Tab tab) {
/// return Center(child: Text(tab.text));
/// return Center(
/// child: Text(
/// 'This is the ${tab.text} tab',
/// style: const TextStyle(fontSize: 36),
/// ),
/// );
/// }).toList(),
/// ),
/// );
@@ -71,13 +78,15 @@ import 'constants.dart';
/// ```
/// {@end-tool}
class TabController extends ChangeNotifier {
/// Creates an object that manages the state required by [TabBar] and a [TabBarView].
/// Creates an object that manages the state required by [TabBar] and a
/// [TabBarView].
///
/// The [length] must not be null or negative. Typically its a value greater than one, i.e.
/// typically there are two or more tabs.
/// The [length] must not be null or negative. Typically its a value greater
This conversation was marked as resolved by shihaohong

This comment has been minimized.

Copy link
@HansMuller

HansMuller May 7, 2019

Contributor

its => it's

/// than one, i.e. typically there are two or more tabs. The [length] must
/// match [TabBar.tabs]'s and [TabBarView.children]'s length.
///
/// The `initialIndex` must be valid given [length] and must not be null. If [length] is
/// zero, then `initialIndex` must be 0 (the default).
/// The `initialIndex` must be valid given [length] and must not be null. If
/// [length] is zero, then `initialIndex` must be 0 (the default).
TabController({ int initialIndex = 0, @required this.length, @required TickerProvider vsync })
: assert(length != null && length >= 0),
assert(initialIndex != null && initialIndex >= 0 && (length == 0 || initialIndex < length)),
@@ -103,7 +112,8 @@ class TabController extends ChangeNotifier {
Animation<double> get animation => _animationController?.view ?? kAlwaysCompleteAnimation;
final AnimationController _animationController;

/// The total number of tabs. Typically greater than one.
/// The total number of tabs. Typically greater than one. Must match
/// [TabBar.tabs]'s and [TabBarView.children]'s length.
final int length;

void _changeIndex(int value, { Duration duration, Curve curve }) {
@@ -219,11 +229,13 @@ class _TabControllerScope extends InheritedWidget {
/// widgets are created by a stateless parent widget or by different parent
/// widgets.
///
/// {@animation 700 540 https://flutter.github.io/assets-for-api-docs/assets/material/tabs.mp4}
///
/// ```dart
/// class MyDemo extends StatelessWidget {
/// final List<Tab> myTabs = <Tab>[
/// Tab(text: 'LEFT'),
/// Tab(text: 'RIGHT'),
/// Tab(text: 'left'),
This conversation was marked as resolved by shihaohong

This comment has been minimized.

Copy link
@HansMuller

HansMuller May 7, 2019

Contributor

LEFT and RIGHT is OK

/// Tab(text: 'right'),
/// ];
///
/// @override
@@ -238,7 +250,12 @@ class _TabControllerScope extends InheritedWidget {
/// ),
/// body: TabBarView(
/// children: myTabs.map((Tab tab) {
/// return Center(child: Text(tab.text));
/// return Center(
/// child: Text(
/// 'This is the ${tab.text} tab',
/// style: const TextStyle(fontSize: 36),
/// ),
/// );
/// }).toList(),
/// ),
/// ),
@@ -249,7 +266,8 @@ class _TabControllerScope extends InheritedWidget {
class DefaultTabController extends StatefulWidget {
/// Creates a default tab controller for the given [child] widget.
///
/// The [length] argument is typically greater than one.
/// The [length] argument is typically greater than one. The [length] must
/// match [TabBar.tabs]'s and [TabBarView.children]'s length.
///
/// The [initialIndex] argument must not be null.
const DefaultTabController({
@@ -260,7 +278,8 @@ class DefaultTabController extends StatefulWidget {
}) : assert(initialIndex != null),
super(key: key);

/// The total number of tabs. Typically greater than one.
/// The total number of tabs. Typically greater than one. Must match
/// [TabBar.tabs]'s and [TabBarView.children]'s length.
final int length;

/// The initial index of the selected tab.
@@ -530,12 +530,15 @@ class _TabBarScrollController extends ScrollController {
///
/// If a [TabController] is not provided, then a [DefaultTabController] ancestor
/// must be provided instead. The tab controller's [TabController.length] must
/// equal the length of the [tabs] list.
/// equal the length of the [tabs] list and the length of the
/// [TabBarView.children] list.
///
/// Requires one of its ancestors to be a [Material] widget.
///
/// Uses values from [TabBarTheme] if it is set in the current context.
///
/// To see a sample implementation, visit the [TabController] documentation.
///
/// See also:
///
/// * [TabBarView], which displays page views that correspond to each tab.
@@ -580,7 +583,8 @@ class TabBar extends StatefulWidget implements PreferredSizeWidget {

/// Typically a list of two or more [Tab] widgets.
///
/// The length of this list must match the [controller]'s [TabController.length].
/// The length of this list must match the [controller]'s [TabController.length]
/// and the length of the [TabBarView.children] list.
final List<Widget> tabs;

/// This widget's selection and animation state.
@@ -1069,6 +1073,11 @@ class _TabBarState extends State<TabBar> {
///
/// If a [TabController] is not provided, then there must be a [DefaultTabController]
/// ancestor.
///
/// The tab controller's [TabController.length] must equal the length of the
/// [children] list and the length of the [TabBar.tabs] list.
///
/// To see a sample implementation, visit the [TabController] documentation.
class TabBarView extends StatefulWidget {
/// Creates a page view with one child per tab.
///
@@ -1089,7 +1098,8 @@ class TabBarView extends StatefulWidget {
/// will be used.
final TabController controller;

/// One widget per tab.
/// One widget per tab. Its length must match the length of the [TabBar.tabs]
This conversation was marked as resolved by shihaohong

This comment has been minimized.

Copy link
@HansMuller

HansMuller May 7, 2019

Contributor

Insert a blank line after "One widget per tab". The format for docs should be:

/// Brief but surprisingly comprehensive summary statement (one sentence).
///
/// Additional explanation.

This comment has been minimized.

Copy link
@shihaohong

shihaohong May 7, 2019

Author Contributor

Sounds good!

/// list, as well as the [controller]'s [TabController.length].
final List<Widget> children;

/// How the page view should respond to user input.
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.