Skip to content

Commit 92a59ca

Browse files
TahaTesserTahaTesser
authored
CupertinoTabScaffold/CupertinoTabController: Add interactive examples (#103196)
* `CupertinoTabScaffold`/`CupertinoTabController`: Add interactive examples * fix class name in the test * Kick tests
1 parent 80657a5 commit 92a59ca

File tree

5 files changed

+213
-86
lines changed

5 files changed

+213
-86
lines changed

‎examples/api/lib/cupertino/tab_scaffold/cupertino_tab_controller.0.dart

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
// Flutter code sample for CupertinoTabController
6+
7+
import 'package:flutter/cupertino.dart';
8+
9+
void main() => runApp(const TabControllerApp());
10+
11+
class TabControllerApp extends StatelessWidget {
12+
const TabControllerApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return const CupertinoApp(
17+
theme: CupertinoThemeData(brightness: Brightness.light),
18+
home: TabControllerExample(),
19+
);
20+
}
21+
}
22+
23+
class TabControllerExample extends StatefulWidget {
24+
const TabControllerExample({Key? key}) : super(key: key);
25+
26+
@override
27+
State<TabControllerExample> createState() => _TabControllerExampleState();
28+
}
29+
30+
class _TabControllerExampleState extends State<TabControllerExample> {
31+
final CupertinoTabController controller = CupertinoTabController();
32+
33+
@override
34+
void dispose() {
35+
controller.dispose();
36+
super.dispose();
37+
}
38+
39+
@override
40+
Widget build(BuildContext context) {
41+
return CupertinoTabScaffold(
42+
controller: controller,
43+
tabBar: CupertinoTabBar(
44+
items: const <BottomNavigationBarItem>[
45+
BottomNavigationBarItem(
46+
icon: Icon(CupertinoIcons.square_grid_2x2_fill),
47+
label: 'Browse',
48+
),
49+
BottomNavigationBarItem(
50+
icon: Icon(CupertinoIcons.star_circle_fill),
51+
label: 'Starred',
52+
),
53+
],
54+
),
55+
tabBuilder: (BuildContext context, int index) {
56+
return Center(
57+
child: Column(
58+
mainAxisAlignment: MainAxisAlignment.center,
59+
children: <Widget>[
60+
Text('Content of tab $index'),
61+
const SizedBox(height: 10),
62+
CupertinoButton(
63+
onPressed: () => controller.index = 0,
64+
child: const Text('Go to first tab'),
65+
),
66+
],
67+
)
68+
);
69+
},
70+
);
71+
}
72+
}

‎examples/api/lib/cupertino/tab_scaffold/cupertino_tab_scaffold.0.dart

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
// Flutter code sample for CupertinoTabScaffold
6+
7+
import 'package:flutter/cupertino.dart';
8+
9+
void main() => runApp(const TabScaffoldApp());
10+
11+
class TabScaffoldApp extends StatelessWidget {
12+
const TabScaffoldApp({Key? key}) : super(key: key);
13+
14+
@override
15+
Widget build(BuildContext context) {
16+
return const CupertinoApp(
17+
theme: CupertinoThemeData(brightness: Brightness.light),
18+
home: TabScaffoldExample(),
19+
);
20+
}
21+
}
22+
23+
class TabScaffoldExample extends StatefulWidget {
24+
const TabScaffoldExample({Key? key}) : super(key: key);
25+
26+
@override
27+
State<TabScaffoldExample> createState() => _TabScaffoldExampleState();
28+
}
29+
30+
class _TabScaffoldExampleState extends State<TabScaffoldExample> {
31+
@override
32+
Widget build(BuildContext context) {
33+
return CupertinoTabScaffold(
34+
tabBar: CupertinoTabBar(
35+
items: const <BottomNavigationBarItem>[
36+
BottomNavigationBarItem(
37+
icon: Icon(CupertinoIcons.home),
38+
label: 'Home',
39+
),
40+
BottomNavigationBarItem(
41+
icon: Icon(CupertinoIcons.search_circle_fill),
42+
label: 'Explore',
43+
),
44+
],
45+
),
46+
tabBuilder: (BuildContext context, int index) {
47+
return CupertinoTabView(
48+
builder: (BuildContext context) {
49+
return CupertinoPageScaffold(
50+
navigationBar: CupertinoNavigationBar(
51+
middle: Text('Page 1 of tab $index'),
52+
),
53+
child: Center(
54+
child: CupertinoButton(
55+
child: const Text('Next page'),
56+
onPressed: () {
57+
Navigator.of(context).push(
58+
CupertinoPageRoute<void>(
59+
builder: (BuildContext context) {
60+
return CupertinoPageScaffold(
61+
navigationBar: CupertinoNavigationBar(
62+
middle: Text('Page 2 of tab $index'),
63+
),
64+
child: Center(
65+
child: CupertinoButton(
66+
child: const Text('Back'),
67+
onPressed: () {
68+
Navigator.of(context).pop();
69+
},
70+
),
71+
),
72+
);
73+
},
74+
),
75+
);
76+
},
77+
),
78+
),
79+
);
80+
},
81+
);
82+
},
83+
);
84+
}
85+
}

‎examples/api/test/cupertino/tab_scaffold/cupertino_tab_controller.0_test.dart

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/cupertino.dart';
6+
import 'package:flutter_api_samples/cupertino/tab_scaffold/cupertino_tab_controller.0.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Can switch tabs using CupertinoTabController', (WidgetTester tester) async {
11+
await tester.pumpWidget(
12+
const example.TabControllerApp(),
13+
);
14+
15+
expect(find.text('Content of tab 0'), findsOneWidget);
16+
await tester.tap(find.byIcon(CupertinoIcons.star_circle_fill));
17+
await tester.pumpAndSettle();
18+
expect(find.text('Content of tab 1'), findsOneWidget);
19+
20+
await tester.tap(find.text('Go to first tab'));
21+
await tester.pumpAndSettle();
22+
expect(find.text('Content of tab 0'), findsOneWidget);
23+
});
24+
}

‎examples/api/test/cupertino/tab_scaffold/cupertino_tab_scaffold.0_test.dart

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Copyright 2014 The Flutter Authors. All rights reserved.
2+
// Use of this source code is governed by a BSD-style license that can be
3+
// found in the LICENSE file.
4+
5+
import 'package:flutter/cupertino.dart';
6+
import 'package:flutter_api_samples/cupertino/tab_scaffold/cupertino_tab_scaffold.0.dart' as example;
7+
import 'package:flutter_test/flutter_test.dart';
8+
9+
void main() {
10+
testWidgets('Can use CupertinoTabView as the root widget', (WidgetTester tester) async {
11+
await tester.pumpWidget(
12+
const example.TabScaffoldApp(),
13+
);
14+
15+
expect(find.text('Page 1 of tab 0'), findsOneWidget);
16+
await tester.tap(find.byIcon(CupertinoIcons.search_circle_fill));
17+
await tester.pumpAndSettle();
18+
expect(find.text('Page 1 of tab 1'), findsOneWidget);
19+
20+
await tester.tap(find.text('Next page'));
21+
await tester.pumpAndSettle();
22+
expect(find.text('Page 2 of tab 1'), findsOneWidget);
23+
await tester.tap(find.text('Back'));
24+
await tester.pumpAndSettle();
25+
expect(find.text('Page 1 of tab 1'), findsOneWidget);
26+
});
27+
}

‎packages/flutter/lib/src/cupertino/tab_scaffold.dart

Lines changed: 5 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -15,47 +15,10 @@ import 'theme.dart';
1515
/// its [CupertinoTabBar].
1616
///
1717
/// {@tool snippet}
18+
/// This samples shows how [CupertinoTabController] can be used to switch tabs in
19+
/// [CupertinoTabScaffold].
1820
///
19-
/// [CupertinoTabController] can be used to switch tabs:
20-
///
21-
/// ```dart
22-
/// class MyCupertinoTabScaffoldPage extends StatefulWidget {
23-
/// const MyCupertinoTabScaffoldPage({Key? key}) : super(key: key);
24-
///
25-
/// @override
26-
/// State<MyCupertinoTabScaffoldPage> createState() => _CupertinoTabScaffoldPageState();
27-
/// }
28-
///
29-
/// class _CupertinoTabScaffoldPageState extends State<MyCupertinoTabScaffoldPage> {
30-
/// final CupertinoTabController _controller = CupertinoTabController();
31-
///
32-
/// @override
33-
/// Widget build(BuildContext context) {
34-
/// return CupertinoTabScaffold(
35-
/// tabBar: CupertinoTabBar(
36-
/// items: const <BottomNavigationBarItem> [
37-
/// // ...
38-
/// ],
39-
/// ),
40-
/// controller: _controller,
41-
/// tabBuilder: (BuildContext context, int index) {
42-
/// return Center(
43-
/// child: CupertinoButton(
44-
/// child: const Text('Go to first tab'),
45-
/// onPressed: () => _controller.index = 0,
46-
/// )
47-
/// );
48-
/// }
49-
/// );
50-
/// }
51-
///
52-
/// @override
53-
/// void dispose() {
54-
/// _controller.dispose();
55-
/// super.dispose();
56-
/// }
57-
/// }
58-
/// ```
21+
/// ** See code in examples/api/lib/cupertino/tab_scaffold/cupertino_tab_controller.0.dart **
5922
/// {@end-tool}
6023
///
6124
/// See also:
@@ -138,54 +101,10 @@ class CupertinoTabController extends ChangeNotifier {
138101
/// (via [State.setState], for instance) from its descendant rather than from
139102
/// its ancestor.
140103
///
141-
/// {@tool snippet}
142-
///
104+
/// {@tool dartpad}
143105
/// A sample code implementing a typical iOS information architecture with tabs.
144106
///
145-
/// ```dart
146-
/// CupertinoTabScaffold(
147-
/// tabBar: CupertinoTabBar(
148-
/// items: const <BottomNavigationBarItem> [
149-
/// // ...
150-
/// ],
151-
/// ),
152-
/// tabBuilder: (BuildContext context, int index) {
153-
/// return CupertinoTabView(
154-
/// builder: (BuildContext context) {
155-
/// return CupertinoPageScaffold(
156-
/// navigationBar: CupertinoNavigationBar(
157-
/// middle: Text('Page 1 of tab $index'),
158-
/// ),
159-
/// child: Center(
160-
/// child: CupertinoButton(
161-
/// child: const Text('Next page'),
162-
/// onPressed: () {
163-
/// Navigator.of(context).push(
164-
/// CupertinoPageRoute<void>(
165-
/// builder: (BuildContext context) {
166-
/// return CupertinoPageScaffold(
167-
/// navigationBar: CupertinoNavigationBar(
168-
/// middle: Text('Page 2 of tab $index'),
169-
/// ),
170-
/// child: Center(
171-
/// child: CupertinoButton(
172-
/// child: const Text('Back'),
173-
/// onPressed: () { Navigator.of(context).pop(); },
174-
/// ),
175-
/// ),
176-
/// );
177-
/// },
178-
/// ),
179-
/// );
180-
/// },
181-
/// ),
182-
/// ),
183-
/// );
184-
/// },
185-
/// );
186-
/// },
187-
/// )
188-
/// ```
107+
/// ** See code in examples/api/lib/cupertino/tab_scaffold/cupertino_tab_scaffold.0.dart **
189108
/// {@end-tool}
190109
///
191110
/// To push a route above all tabs instead of inside the currently selected one

0 commit comments

Comments
 (0)