Skip to content

Commit bbca7ff

Browse files
TahaTesserTahaTesser
authored
Add Material 3 SwitchListTile example and update existing examples (#119714)
* Add Material 3 `SwitchListTile` example and update existing examples * Update examples with `useMaterial3: true` and update example descriptions. * add a `ColorScheme` colour
1 parent b8f5394 commit bbca7ff

16 files changed

+369
-126
lines changed

‎examples/api/lib/material/checkbox_list_tile/checkbox_list_tile.0.dart

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ class CheckboxListTileApp extends StatelessWidget {
1414

1515
@override
1616
Widget build(BuildContext context) {
17-
return const MaterialApp(
18-
home: CheckboxListTileExample(),
17+
return MaterialApp(
18+
theme: ThemeData(useMaterial3: true),
19+
home: const CheckboxListTileExample(),
1920
);
2021
}
2122
}

‎examples/api/lib/material/checkbox_list_tile/checkbox_list_tile.1.dart

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class CheckboxListTileApp extends StatelessWidget {
1414
@override
1515
Widget build(BuildContext context) {
1616
return MaterialApp(
17-
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
17+
theme: ThemeData(useMaterial3: true),
1818
home: const CheckboxListTileExample(),
1919
);
2020
}
@@ -44,7 +44,7 @@ class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
4444
setState(() {
4545
checkboxValue1 = value!;
4646
});
47-
},
47+
},
4848
title: const Text('Headline'),
4949
subtitle: const Text('Supporting text'),
5050
),
@@ -55,7 +55,7 @@ class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
5555
setState(() {
5656
checkboxValue2 = value!;
5757
});
58-
},
58+
},
5959
title: const Text('Headline'),
6060
subtitle: const Text('Longer supporting text to demonstrate how the text wraps and the checkbox is centered vertically with the text.'),
6161
),
@@ -66,7 +66,7 @@ class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
6666
setState(() {
6767
checkboxValue3 = value!;
6868
});
69-
},
69+
},
7070
title: const Text('Headline'),
7171
subtitle: const Text("Longer supporting text to demonstrate how the text wraps and how setting 'CheckboxListTile.isThreeLine = true' aligns the checkbox to the top vertically with the text."),
7272
isThreeLine: true,

‎examples/api/lib/material/checkbox_list_tile/custom_labeled_checkbox.0.dart

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,16 @@ import 'package:flutter/gestures.dart';
88

99
import 'package:flutter/material.dart';
1010

11-
void main() => runApp(const LabeledCheckBoxApp());
11+
void main() => runApp(const LabeledCheckboxApp());
1212

13-
class LabeledCheckBoxApp extends StatelessWidget {
14-
const LabeledCheckBoxApp({super.key});
13+
class LabeledCheckboxApp extends StatelessWidget {
14+
const LabeledCheckboxApp({super.key});
1515

1616
@override
1717
Widget build(BuildContext context) {
18-
return const MaterialApp(
19-
home: LabeledCheckBoxExample(),
18+
return MaterialApp(
19+
theme: ThemeData(useMaterial3: true),
20+
home: const LabeledCheckboxExample(),
2021
);
2122
}
2223
}
@@ -68,14 +69,14 @@ class LinkedLabelCheckbox extends StatelessWidget {
6869
}
6970
}
7071

71-
class LabeledCheckBoxExample extends StatefulWidget {
72-
const LabeledCheckBoxExample({super.key});
72+
class LabeledCheckboxExample extends StatefulWidget {
73+
const LabeledCheckboxExample({super.key});
7374

7475
@override
75-
State<LabeledCheckBoxExample> createState() => _LabeledCheckBoxExampleState();
76+
State<LabeledCheckboxExample> createState() => _LabeledCheckboxExampleState();
7677
}
7778

78-
class _LabeledCheckBoxExampleState extends State<LabeledCheckBoxExample> {
79+
class _LabeledCheckboxExampleState extends State<LabeledCheckboxExample> {
7980
bool _isSelected = false;
8081

8182
@override

‎examples/api/lib/material/checkbox_list_tile/custom_labeled_checkbox.1.dart

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,16 @@
66

77
import 'package:flutter/material.dart';
88

9-
void main() => runApp(const LabeledCheckBoxApp());
9+
void main() => runApp(const LabeledCheckboxApp());
1010

11-
class LabeledCheckBoxApp extends StatelessWidget {
12-
const LabeledCheckBoxApp({super.key});
11+
class LabeledCheckboxApp extends StatelessWidget {
12+
const LabeledCheckboxApp({super.key});
1313

1414
@override
1515
Widget build(BuildContext context) {
16-
return const MaterialApp(
17-
home: LabeledCheckBoxExample(),
16+
return MaterialApp(
17+
theme: ThemeData(useMaterial3: true),
18+
home: const LabeledCheckboxExample(),
1819
);
1920
}
2021
}
@@ -57,14 +58,14 @@ class LabeledCheckbox extends StatelessWidget {
5758
}
5859
}
5960

60-
class LabeledCheckBoxExample extends StatefulWidget {
61-
const LabeledCheckBoxExample({super.key});
61+
class LabeledCheckboxExample extends StatefulWidget {
62+
const LabeledCheckboxExample({super.key});
6263

6364
@override
64-
State<LabeledCheckBoxExample> createState() => _LabeledCheckBoxExampleState();
65+
State<LabeledCheckboxExample> createState() => _LabeledCheckboxExampleState();
6566
}
6667

67-
class _LabeledCheckBoxExampleState extends State<LabeledCheckBoxExample> {
68+
class _LabeledCheckboxExampleState extends State<LabeledCheckboxExample> {
6869
bool _isSelected = false;
6970

7071
@override

‎examples/api/lib/material/switch_list_tile/custom_labeled_switch.0.dart

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
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 custom labeled switch.
6+
7+
import 'package:flutter/gestures.dart';
8+
9+
import 'package:flutter/material.dart';
10+
11+
void main() => runApp(const LabeledSwitchApp());
12+
13+
class LabeledSwitchApp extends StatelessWidget {
14+
const LabeledSwitchApp({super.key});
15+
16+
@override
17+
Widget build(BuildContext context) {
18+
return MaterialApp(
19+
theme: ThemeData(useMaterial3: true),
20+
home: Scaffold(
21+
appBar: AppBar(title: const Text('Custom Labeled Switch Sample')),
22+
body: const Center(
23+
child: LabeledSwitchExample(),
24+
),
25+
),
26+
);
27+
}
28+
}
29+
30+
class LinkedLabelSwitch extends StatelessWidget {
31+
const LinkedLabelSwitch({
32+
super.key,
33+
required this.label,
34+
required this.padding,
35+
required this.value,
36+
required this.onChanged,
37+
});
38+
39+
final String label;
40+
final EdgeInsets padding;
41+
final bool value;
42+
final ValueChanged<bool> onChanged;
43+
44+
@override
45+
Widget build(BuildContext context) {
46+
return Padding(
47+
padding: padding,
48+
child: Row(
49+
children: <Widget>[
50+
Expanded(
51+
child: RichText(
52+
text: TextSpan(
53+
text: label,
54+
style: TextStyle(
55+
color: Theme.of(context).colorScheme.primary,
56+
decoration: TextDecoration.underline,
57+
),
58+
recognizer: TapGestureRecognizer()
59+
..onTap = () {
60+
debugPrint('Label has been tapped.');
61+
},
62+
),
63+
),
64+
),
65+
Switch(
66+
value: value,
67+
onChanged: (bool newValue) {
68+
onChanged(newValue);
69+
},
70+
),
71+
],
72+
),
73+
);
74+
}
75+
}
76+
77+
class LabeledSwitchExample extends StatefulWidget {
78+
const LabeledSwitchExample({super.key});
79+
80+
@override
81+
State<LabeledSwitchExample> createState() => _LabeledSwitchExampleState();
82+
}
83+
84+
class _LabeledSwitchExampleState extends State<LabeledSwitchExample> {
85+
bool _isSelected = false;
86+
87+
@override
88+
Widget build(BuildContext context) {
89+
return LinkedLabelSwitch(
90+
label: 'Linked, tappable label text',
91+
padding: const EdgeInsets.symmetric(horizontal: 20.0),
92+
value: _isSelected,
93+
onChanged: (bool newValue) {
94+
setState(() {
95+
_isSelected = newValue;
96+
});
97+
},
98+
);
99+
}
100+
}

‎examples/api/lib/material/switch_list_tile/switch_list_tile.2.dart renamed to ‎examples/api/lib/material/switch_list_tile/custom_labeled_switch.1.dart

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,23 @@
22
// Use of this source code is governed by a BSD-style license that can be
33
// found in the LICENSE file.
44

5-
// Flutter code sample for [SwitchListTile].
5+
// Flutter code sample for custom labeled switch.
66

77
import 'package:flutter/material.dart';
88

9-
void main() => runApp(const MyApp());
9+
void main() => runApp(const LabeledSwitchApp());
1010

11-
class MyApp extends StatelessWidget {
12-
const MyApp({super.key});
13-
14-
static const String _title = 'Flutter Code Sample';
11+
class LabeledSwitchApp extends StatelessWidget {
12+
const LabeledSwitchApp({super.key});
1513

1614
@override
1715
Widget build(BuildContext context) {
1816
return MaterialApp(
19-
title: _title,
17+
theme: ThemeData(useMaterial3: true),
2018
home: Scaffold(
21-
appBar: AppBar(title: const Text(_title)),
19+
appBar: AppBar(title: const Text('Custom Labeled Switch Sample')),
2220
body: const Center(
23-
child: MyStatefulWidget(),
21+
child: LabeledSwitchExample(),
2422
),
2523
),
2624
);
@@ -65,14 +63,14 @@ class LabeledSwitch extends StatelessWidget {
6563
}
6664
}
6765

68-
class MyStatefulWidget extends StatefulWidget {
69-
const MyStatefulWidget({super.key});
66+
class LabeledSwitchExample extends StatefulWidget {
67+
const LabeledSwitchExample({super.key});
7068

7169
@override
72-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
70+
State<LabeledSwitchExample> createState() => _LabeledSwitchExampleState();
7371
}
7472

75-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
73+
class _LabeledSwitchExampleState extends State<LabeledSwitchExample> {
7674
bool _isSelected = false;
7775

7876
@override

‎examples/api/lib/material/switch_list_tile/switch_list_tile.0.dart

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,35 +6,33 @@
66

77
import 'package:flutter/material.dart';
88

9-
void main() => runApp(const MyApp());
9+
void main() => runApp(const SwitchListTileApp());
1010

11-
class MyApp extends StatelessWidget {
12-
const MyApp({super.key});
13-
14-
static const String _title = 'Flutter Code Sample';
11+
class SwitchListTileApp extends StatelessWidget {
12+
const SwitchListTileApp({super.key});
1513

1614
@override
1715
Widget build(BuildContext context) {
1816
return MaterialApp(
19-
title: _title,
17+
theme: ThemeData(useMaterial3: true),
2018
home: Scaffold(
21-
appBar: AppBar(title: const Text(_title)),
19+
appBar: AppBar(title: const Text('SwitchListTile Sample')),
2220
body: const Center(
23-
child: MyStatefulWidget(),
21+
child: SwitchListTileExample(),
2422
),
2523
),
2624
);
2725
}
2826
}
2927

30-
class MyStatefulWidget extends StatefulWidget {
31-
const MyStatefulWidget({super.key});
28+
class SwitchListTileExample extends StatefulWidget {
29+
const SwitchListTileExample({super.key});
3230

3331
@override
34-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
32+
State<SwitchListTileExample> createState() => _SwitchListTileExampleState();
3533
}
3634

37-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
35+
class _SwitchListTileExampleState extends State<SwitchListTileExample> {
3836
bool _lights = false;
3937

4038
@override

0 commit comments

Comments
 (0)