Skip to content

copy and presentaion #2094

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.

Sign up for GitHub

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

Closed
pedromorgan wants to merge 2 commits into from
Closed

copy and presentaion #2094

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
08d20a2
copy and presentaion
pedromorgan Dec 18, 2018
5906a5b
Update tabs.md
pedromorgan Dec 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 34 additions & 32 deletions src/docs/cookbook/design/tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,25 @@ Working with tabs is a common pattern in apps following the Material Design
guidelines. Flutter includes a convenient way to create tab layouts as part of
the [material library](https://docs.flutter.io/flutter/material/material-library.html).

## Directions
## Steps

@brianegan brianegan Feb 13, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's keep directions, please! Used everywhere else in the cookbook.


1. Create a `TabController`
2. Create the tabs
3. Create content for each tab
1. Create a [`TabController`](https://docs.flutter.io/flutter/material/TabController-class.html)
2. Create the [`TabBar`](https://docs.flutter.io/flutter/material/TabBar-class.html)
with [`Tab's`](https://docs.flutter.io/flutter/material/Tab-class.html)
3. Create content for each tab in a [`TabBarView`](https://docs.flutter.io/flutter/material/TabBarView-class.html)

## 1. Create a `TabController`

In order for tabs to work, we'll need to keep the selected tab and content
sections in sync. This is the job of the [`TabController`](https://docs.flutter.io/flutter/material/TabController-class.html).
The purpose of the [`TabController`](https://docs.flutter.io/flutter/material/TabController-class.html),
is to coordinate the selected `Tab` in the `TabBar` and content in `TabBarView`.

@brianegan brianegan Feb 13, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"content in the TabBarView. "?


We can either manually create a `TabController` or use the
[`DefaultTabController`](https://docs.flutter.io/flutter/material/DefaultTabController-class.html)
Widget. Using the `DefaultTabController` is the simplest option, since it will
create a `TabController` for us and make it available to all descendant Widgets.
A `TabController` can be either:

@brianegan brianegan Feb 13, 2019

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the idea of this section, but the language is a bit awkward. Maybe:

A TabController can be:

  • Created manually
  • Created automatically by using a DefaultTabController Widget

Using the DefaultTabController is the simplest...

- manually created [`TabController`](https://docs.flutter.io/flutter/material/TabController-class.html) or sublcassed
- or using
the [`DefaultTabController`](https://docs.flutter.io/flutter/material/DefaultTabController-class.html)
Widget.
- Using the `DefaultTabController` is the simplest option, as it will
create a `TabController` 'wrapper' Widget and thereby available to all descendant Widgets.

<!-- skip -->
```dart
Expand All @@ -31,12 +35,12 @@ DefaultTabController(
);
```

## 2. Create the tabs
## 2. Create the `TabBar` and `Tab`s

Now that we have a `TabController` to work with, we can create our tabs using
the [`TabBar`](https://docs.flutter.io/flutter/material/TabController-class.html)
Widget. In this example, we'll create a `TabBar` with 3 [`Tab`](https://docs.flutter.io/flutter/material/Tab-class.html)
Widgets and place it within an [`AppBar`](https://docs.flutter.io/flutter/material/AppBar-class.html).
The example below shows
- a [`TabBar`](https://docs.flutter.io/flutter/material/TabController-class.html) Widget
- with three [`Tab`](https://docs.flutter.io/flutter/material/Tab-class.html) Widgets
- placed at the `bottom:` of the [`AppBar`](https://docs.flutter.io/flutter/material/AppBar-class.html).

<!-- skip -->
```dart
Expand All @@ -46,36 +50,34 @@ DefaultTabController(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_car)),
],
),
),
),
);
```
The `TabBar` must have a **controller:**
- by passing a `TabController` specifically created as the **controller:** var
- otherwise, the `TabBar` will look up the Widget tree for the nearest `DefaultTabController`
- and if one not found then an error

By default, the `TabBar` looks up the Widget tree for the nearest
`DefaultTabController`. If you're manually creating a `TabController`, you'll
need to pass it to the `TabBar`.

## 3. Create content for each tab
## 3. Create content in a `TabBarView`

Now that we have tabs, we'll want to display content when a tab is selected.
For this purpose, we'll employ the [`TabBarView`](https://docs.flutter.io/flutter/material/TabBarView-class.html)
Widget.
The [`TabBarView`](https://docs.flutter.io/flutter/material/TabBarView-class.html)
is used to "switch" and display content when a tab is selected

*Note:* Order is important and must correspond to the order of the tabs in the
`TabBar`!
*Note:* Order is important and must correspond to the order of the tabs in the `TabBar`!

<!-- skip -->
```dart
TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_car)),
],
);
```
Expand All @@ -99,9 +101,9 @@ class TabBarDemo extends StatelessWidget {
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_car)),
],
),
title: Text('Tabs Demo'),
Expand Down