diff --git a/examples/api/lib/material/switch/switch.0.dart b/examples/api/lib/material/switch/switch.0.dart new file mode 100644 index 000000000000..a1b6e0e558cf --- /dev/null +++ b/examples/api/lib/material/switch/switch.0.dart @@ -0,0 +1,51 @@ +// 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 Switch + +import 'package:flutter/material.dart'; + +void main() => runApp(const SwitchApp()); + +class SwitchApp extends StatelessWidget { + const SwitchApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Switch Sample')), + body: const Center( + child: SwitchExample(), + ), + ), + ); + } +} + +class SwitchExample extends StatefulWidget { + const SwitchExample({super.key}); + + @override + State createState() => _SwitchExampleState(); +} + +class _SwitchExampleState extends State { + bool light = true; + + @override + Widget build(BuildContext context) { + return Switch( + // This bool value toggles the switch. + value: light, + activeColor: Colors.red, + onChanged: (bool value) { + // This is called when the user toggles the switch. + setState(() { + light = value; + }); + }, + ); + } +} diff --git a/examples/api/lib/material/switch/switch.1.dart b/examples/api/lib/material/switch/switch.1.dart new file mode 100644 index 000000000000..be9b8044d91e --- /dev/null +++ b/examples/api/lib/material/switch/switch.1.dart @@ -0,0 +1,82 @@ +// 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 Switch + +import 'package:flutter/material.dart'; + +void main() => runApp(const SwitchApp()); + +class SwitchApp extends StatelessWidget { + const SwitchApp({super.key}); + + @override + Widget build(BuildContext context) { + return MaterialApp( + home: Scaffold( + appBar: AppBar(title: const Text('Switch Sample')), + body: const Center( + child: SwitchExample(), + ), + ), + ); + } +} + +class SwitchExample extends StatefulWidget { + const SwitchExample({super.key}); + + @override + State createState() => _SwitchExampleState(); +} + +class _SwitchExampleState extends State { + bool light = true; + + @override + Widget build(BuildContext context) { + final MaterialStateProperty trackColor = MaterialStateProperty.resolveWith( + (Set states) { + // Track color when the switch is selected. + if (states.contains(MaterialState.selected)) { + return Colors.amber; + } + // Otherwise return null to set default track color + // for remaining states such as when the switch is + // hovered, focused, or disabled. + return null; + }, + ); + final MaterialStateProperty overlayColor = MaterialStateProperty.resolveWith( + (Set states) { + // Material color when switch is selected. + if (states.contains(MaterialState.selected)) { + return Colors.amber.withOpacity(0.54); + } + // Material color when switch is disabled. + if (states.contains(MaterialState.disabled)) { + return Colors.grey.shade400; + } + // Otherwise return null to set default material color + // for remaining states such as when the switch is + // hovered, or focused. + return null; + }, + ); + + return Switch( + // This bool value toggles the switch. + value: light, + overlayColor: overlayColor, + trackColor: trackColor, + thumbColor: MaterialStateProperty.all(Colors.black), + onChanged: (bool value) { + // This is called when the user toggles the switch. + setState(() { + light = value; + }); + }, + ); + } +} diff --git a/examples/api/test/material/switch/switch.0_test.dart b/examples/api/test/material/switch/switch.0_test.dart new file mode 100644 index 000000000000..eb972b265dd6 --- /dev/null +++ b/examples/api/test/material/switch/switch.0_test.dart @@ -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/material.dart'; +import 'package:flutter_api_samples/material/switch/switch.0.dart' as example; +import 'package:flutter_test/flutter_test.dart'; + +void main() { + testWidgets('Can toggle switch', (WidgetTester tester) async { + await tester.pumpWidget( + const example.SwitchApp(), + ); + + final Finder switchFinder = find.byType(Switch); + Switch materialSwitch = tester.widget(switchFinder); + expect(materialSwitch.value, true); + + await tester.tap(switchFinder); + await tester.pumpAndSettle(); + materialSwitch = tester.widget(switchFinder); + expect(materialSwitch.value, false); + }); +} diff --git a/examples/api/test/material/switch/switch.1_test.dart b/examples/api/test/material/switch/switch.1_test.dart new file mode 100644 index 000000000000..eb972b265dd6 --- /dev/null +++ b/examples/api/test/material/switch/switch.1_test.dart @@ -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/material.dart'; +import 'package:flutter_api_samples/material/switch/switch.0.dart' as example; +import 'package:flutter_test/flutter_test.dart'; + +void main() { + testWidgets('Can toggle switch', (WidgetTester tester) async { + await tester.pumpWidget( + const example.SwitchApp(), + ); + + final Finder switchFinder = find.byType(Switch); + Switch materialSwitch = tester.widget(switchFinder); + expect(materialSwitch.value, true); + + await tester.tap(switchFinder); + await tester.pumpAndSettle(); + materialSwitch = tester.widget(switchFinder); + expect(materialSwitch.value, false); + }); +} diff --git a/packages/flutter/lib/src/material/switch.dart b/packages/flutter/lib/src/material/switch.dart index f0ca58c3adca..31e4ae74fc2b 100644 --- a/packages/flutter/lib/src/material/switch.dart +++ b/packages/flutter/lib/src/material/switch.dart @@ -44,6 +44,20 @@ enum _SwitchType { material, adaptive } /// /// Requires one of its ancestors to be a [Material] widget. /// +/// {@tool dartpad} +/// This example shows a toggleable [Switch]. When the thumb slides to the other +/// side of the track, the switch is toggled between on/off. +/// +/// ** See code in examples/api/lib/material/switch/switch.0.dart ** +/// {@end-tool} +/// +/// {@tool dartpad} +/// This example shows how to customize [Switch] using [MaterialStateProperty] +/// switch properties. +/// +/// ** See code in examples/api/lib/material/switch/switch.1.dart ** +/// {@end-tool} +/// /// See also: /// /// * [SwitchListTile], which combines this widget with a [ListTile] so that @@ -51,6 +65,8 @@ enum _SwitchType { material, adaptive } /// * [Checkbox], another widget with similar semantics. /// * [Radio], for selecting among a set of explicit values. /// * [Slider], for selecting a value in a range. +/// * [MaterialStateProperty], an interface for objects that "resolve" to +/// different values depending on a widget's material state. /// * class Switch extends StatelessWidget { /// Creates a Material Design switch.