mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
CupertinoTabScaffold/CupertinoTabController: Add interactive examples (#103196)
* `CupertinoTabScaffold`/`CupertinoTabController`: Add interactive examples * fix class name in the test * Kick tests
This commit is contained in:
Taha Tesser
GitHub
parent
80657a5053
commit
92a59caa7f
@ -0,0 +1,72 @@
|
||||
// Copyright 2014 The Flutter Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
// Flutter code sample for CupertinoTabController
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
void main() => runApp(const TabControllerApp());
|
||||
|
||||
class TabControllerApp extends StatelessWidget {
|
||||
const TabControllerApp({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const CupertinoApp(
|
||||
theme: CupertinoThemeData(brightness: Brightness.light),
|
||||
home: TabControllerExample(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TabControllerExample extends StatefulWidget {
|
||||
const TabControllerExample({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<TabControllerExample> createState() => _TabControllerExampleState();
|
||||
}
|
||||
|
||||
class _TabControllerExampleState extends State<TabControllerExample> {
|
||||
final CupertinoTabController controller = CupertinoTabController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoTabScaffold(
|
||||
controller: controller,
|
||||
tabBar: CupertinoTabBar(
|
||||
items: const <BottomNavigationBarItem>[
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.square_grid_2x2_fill),
|
||||
label: 'Browse',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.star_circle_fill),
|
||||
label: 'Starred',
|
||||
),
|
||||
],
|
||||
),
|
||||
tabBuilder: (BuildContext context, int index) {
|
||||
return Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Text('Content of tab $index'),
|
||||
const SizedBox(height: 10),
|
||||
CupertinoButton(
|
||||
onPressed: () => controller.index = 0,
|
||||
child: const Text('Go to first tab'),
|
||||
),
|
||||
],
|
||||
)
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,85 @@
|
||||
// Copyright 2014 The Flutter Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
// Flutter code sample for CupertinoTabScaffold
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
void main() => runApp(const TabScaffoldApp());
|
||||
|
||||
class TabScaffoldApp extends StatelessWidget {
|
||||
const TabScaffoldApp({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const CupertinoApp(
|
||||
theme: CupertinoThemeData(brightness: Brightness.light),
|
||||
home: TabScaffoldExample(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class TabScaffoldExample extends StatefulWidget {
|
||||
const TabScaffoldExample({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<TabScaffoldExample> createState() => _TabScaffoldExampleState();
|
||||
}
|
||||
|
||||
class _TabScaffoldExampleState extends State<TabScaffoldExample> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoTabScaffold(
|
||||
tabBar: CupertinoTabBar(
|
||||
items: const <BottomNavigationBarItem>[
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.home),
|
||||
label: 'Home',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.search_circle_fill),
|
||||
label: 'Explore',
|
||||
),
|
||||
],
|
||||
),
|
||||
tabBuilder: (BuildContext context, int index) {
|
||||
return CupertinoTabView(
|
||||
builder: (BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
navigationBar: CupertinoNavigationBar(
|
||||
middle: Text('Page 1 of tab $index'),
|
||||
),
|
||||
child: Center(
|
||||
child: CupertinoButton(
|
||||
child: const Text('Next page'),
|
||||
onPressed: () {
|
||||
Navigator.of(context).push(
|
||||
CupertinoPageRoute<void>(
|
||||
builder: (BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
navigationBar: CupertinoNavigationBar(
|
||||
middle: Text('Page 2 of tab $index'),
|
||||
),
|
||||
child: Center(
|
||||
child: CupertinoButton(
|
||||
child: const Text('Back'),
|
||||
onPressed: () {
|
||||
Navigator.of(context).pop();
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
// Copyright 2014 The Flutter Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter_api_samples/cupertino/tab_scaffold/cupertino_tab_controller.0.dart' as example;
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
void main() {
|
||||
testWidgets('Can switch tabs using CupertinoTabController', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.TabControllerApp(),
|
||||
);
|
||||
|
||||
expect(find.text('Content of tab 0'), findsOneWidget);
|
||||
await tester.tap(find.byIcon(CupertinoIcons.star_circle_fill));
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.text('Content of tab 1'), findsOneWidget);
|
||||
|
||||
await tester.tap(find.text('Go to first tab'));
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.text('Content of tab 0'), findsOneWidget);
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
// Copyright 2014 The Flutter Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter_api_samples/cupertino/tab_scaffold/cupertino_tab_scaffold.0.dart' as example;
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
void main() {
|
||||
testWidgets('Can use CupertinoTabView as the root widget', (WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.TabScaffoldApp(),
|
||||
);
|
||||
|
||||
expect(find.text('Page 1 of tab 0'), findsOneWidget);
|
||||
await tester.tap(find.byIcon(CupertinoIcons.search_circle_fill));
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.text('Page 1 of tab 1'), findsOneWidget);
|
||||
|
||||
await tester.tap(find.text('Next page'));
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.text('Page 2 of tab 1'), findsOneWidget);
|
||||
await tester.tap(find.text('Back'));
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.text('Page 1 of tab 1'), findsOneWidget);
|
||||
});
|
||||
}
|
||||
@ -15,47 +15,10 @@ import 'theme.dart';
|
||||
/// its [CupertinoTabBar].
|
||||
///
|
||||
/// {@tool snippet}
|
||||
/// This samples shows how [CupertinoTabController] can be used to switch tabs in
|
||||
/// [CupertinoTabScaffold].
|
||||
///
|
||||
/// [CupertinoTabController] can be used to switch tabs:
|
||||
///
|
||||
/// ```dart
|
||||
/// class MyCupertinoTabScaffoldPage extends StatefulWidget {
|
||||
/// const MyCupertinoTabScaffoldPage({Key? key}) : super(key: key);
|
||||
///
|
||||
/// @override
|
||||
/// State<MyCupertinoTabScaffoldPage> createState() => _CupertinoTabScaffoldPageState();
|
||||
/// }
|
||||
///
|
||||
/// class _CupertinoTabScaffoldPageState extends State<MyCupertinoTabScaffoldPage> {
|
||||
/// final CupertinoTabController _controller = CupertinoTabController();
|
||||
///
|
||||
/// @override
|
||||
/// Widget build(BuildContext context) {
|
||||
/// return CupertinoTabScaffold(
|
||||
/// tabBar: CupertinoTabBar(
|
||||
/// items: const <BottomNavigationBarItem> [
|
||||
/// // ...
|
||||
/// ],
|
||||
/// ),
|
||||
/// controller: _controller,
|
||||
/// tabBuilder: (BuildContext context, int index) {
|
||||
/// return Center(
|
||||
/// child: CupertinoButton(
|
||||
/// child: const Text('Go to first tab'),
|
||||
/// onPressed: () => _controller.index = 0,
|
||||
/// )
|
||||
/// );
|
||||
/// }
|
||||
/// );
|
||||
/// }
|
||||
///
|
||||
/// @override
|
||||
/// void dispose() {
|
||||
/// _controller.dispose();
|
||||
/// super.dispose();
|
||||
/// }
|
||||
/// }
|
||||
/// ```
|
||||
/// ** See code in examples/api/lib/cupertino/tab_scaffold/cupertino_tab_controller.0.dart **
|
||||
/// {@end-tool}
|
||||
///
|
||||
/// See also:
|
||||
@ -138,54 +101,10 @@ class CupertinoTabController extends ChangeNotifier {
|
||||
/// (via [State.setState], for instance) from its descendant rather than from
|
||||
/// its ancestor.
|
||||
///
|
||||
/// {@tool snippet}
|
||||
///
|
||||
/// {@tool dartpad}
|
||||
/// A sample code implementing a typical iOS information architecture with tabs.
|
||||
///
|
||||
/// ```dart
|
||||
/// CupertinoTabScaffold(
|
||||
/// tabBar: CupertinoTabBar(
|
||||
/// items: const <BottomNavigationBarItem> [
|
||||
/// // ...
|
||||
/// ],
|
||||
/// ),
|
||||
/// tabBuilder: (BuildContext context, int index) {
|
||||
/// return CupertinoTabView(
|
||||
/// builder: (BuildContext context) {
|
||||
/// return CupertinoPageScaffold(
|
||||
/// navigationBar: CupertinoNavigationBar(
|
||||
/// middle: Text('Page 1 of tab $index'),
|
||||
/// ),
|
||||
/// child: Center(
|
||||
/// child: CupertinoButton(
|
||||
/// child: const Text('Next page'),
|
||||
/// onPressed: () {
|
||||
/// Navigator.of(context).push(
|
||||
/// CupertinoPageRoute<void>(
|
||||
/// builder: (BuildContext context) {
|
||||
/// return CupertinoPageScaffold(
|
||||
/// navigationBar: CupertinoNavigationBar(
|
||||
/// middle: Text('Page 2 of tab $index'),
|
||||
/// ),
|
||||
/// child: Center(
|
||||
/// child: CupertinoButton(
|
||||
/// child: const Text('Back'),
|
||||
/// onPressed: () { Navigator.of(context).pop(); },
|
||||
/// ),
|
||||
/// ),
|
||||
/// );
|
||||
/// },
|
||||
/// ),
|
||||
/// );
|
||||
/// },
|
||||
/// ),
|
||||
/// ),
|
||||
/// );
|
||||
/// },
|
||||
/// );
|
||||
/// },
|
||||
/// )
|
||||
/// ```
|
||||
/// ** See code in examples/api/lib/cupertino/tab_scaffold/cupertino_tab_scaffold.0.dart **
|
||||
/// {@end-tool}
|
||||
///
|
||||
/// To push a route above all tabs instead of inside the currently selected one
|
||||
|
||||
Loading…
Reference in New Issue
Block a user