Unverified Commit 27fee486 authored by Taha Tesser's avatar Taha Tesser Committed by GitHub

`CupertinoSwitch`: Add an interactive example (#103043)

Update
parent 3ed0bbed
// 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 CupertinoSwitch
import 'package:flutter/cupertino.dart';
void main() => runApp(const CupertinoSwitchApp());
class CupertinoSwitchApp extends StatelessWidget {
const CupertinoSwitchApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const CupertinoApp(
theme: CupertinoThemeData(brightness: Brightness.light),
home: CupertinoSwitchExample(),
);
}
}
class CupertinoSwitchExample extends StatefulWidget {
const CupertinoSwitchExample({Key? key}) : super(key: key);
@override
State<CupertinoSwitchExample> createState() => _CupertinoSwitchExampleState();
}
class _CupertinoSwitchExampleState extends State<CupertinoSwitchExample> {
bool wifi = true;
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
navigationBar: const CupertinoNavigationBar(
middle: Text('CupertinoSwitch Sample'),
),
child: Center(
// CupertinoFormRow's main axis is set to max by default.
// Set the intrinsic height widget to center the CupertinoFormRow.
child: IntrinsicHeight(
child: Container(
color: CupertinoTheme.of(context).barBackgroundColor,
child: CupertinoFormRow(
prefix: Row(
children: <Widget>[
Icon(
// Wifi icon is updated based on switch value.
wifi ? CupertinoIcons.wifi : CupertinoIcons.wifi_slash,
color: wifi ? CupertinoColors.systemBlue : CupertinoColors.systemRed,
),
const SizedBox(width: 10),
const Text('Wi-Fi')
],
),
child: CupertinoSwitch(
// This bool value toggles the switch.
value: wifi,
thumbColor: CupertinoColors.systemBlue,
trackColor: CupertinoColors.systemRed.withOpacity(0.14),
activeColor: CupertinoColors.systemRed.withOpacity(0.64),
onChanged: (bool? value) {
// This is called when the user toggles the switch.
setState(() {
wifi = value!;
});
},
),
),
),
),
),
);
}
}
// 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/switch/cupertino_switch.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Toggling cupertino switch updates icon', (WidgetTester tester) async {
await tester.pumpWidget(
const example.CupertinoSwitchApp(),
);
final Finder switchFinder = find.byType(CupertinoSwitch);
CupertinoSwitch cupertinoSwitch = tester.widget<CupertinoSwitch>(switchFinder);
final Finder wifiOnIcon = find.byIcon(CupertinoIcons.wifi);
final Finder wifiOffIcon = find.byIcon(CupertinoIcons.wifi_slash);
expect(cupertinoSwitch.value, true);
// When the switch is on, wifi icon should be visible.
expect(wifiOnIcon, findsOneWidget);
expect(wifiOffIcon, findsNothing);
await tester.tap(switchFinder);
await tester.pumpAndSettle();
cupertinoSwitch = tester.widget<CupertinoSwitch>(switchFinder);
expect(cupertinoSwitch.value, false);
// When the switch is off, wifi slash icon should be visible.
expect(wifiOnIcon, findsNothing);
expect(wifiOffIcon, findsOneWidget);
});
}
...@@ -26,6 +26,13 @@ import 'thumb_painter.dart'; ...@@ -26,6 +26,13 @@ import 'thumb_painter.dart';
/// that use a switch will listen for the [onChanged] callback and rebuild the /// that use a switch will listen for the [onChanged] callback and rebuild the
/// switch with a new [value] to update the visual appearance of the switch. /// switch with a new [value] to update the visual appearance of the switch.
/// ///
/// {@tool dartpad}
/// This example shows a toggleable [CupertinoSwitch]. When the thumb slides to
/// the other side of the track, the switch is toggled between on/off.
///
/// ** See code in examples/api/lib/cupertino/switch/cupertino_switch.0.dart **
/// {@end-tool}
///
/// {@tool snippet} /// {@tool snippet}
/// ///
/// This sample shows how to use a [CupertinoSwitch] in a [ListTile]. The /// This sample shows how to use a [CupertinoSwitch] in a [ListTile]. The
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment