Skip to content
This repository was archived by the owner on Feb 22, 2023. It is now read-only.

Commit 29ab437

Browse files
TahaTesserTahaTesser
authored
Add Material 3 CheckboxListTile example and update existing examples (#118792)
* Add Material 3 `CheckboxListTile` example and update existing examples * fix `list_tile.dart` doc issues * Remove unnecessary comma
1 parent eced23e commit 29ab437

12 files changed

+424
-177
lines changed

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

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,46 +7,43 @@
77
import 'package:flutter/material.dart';
88
import 'package:flutter/scheduler.dart' show timeDilation;
99

10-
void main() => runApp(const MyApp());
10+
void main() => runApp(const CheckboxListTileApp());
1111

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

1715
@override
1816
Widget build(BuildContext context) {
19-
return MaterialApp(
20-
title: _title,
21-
home: Scaffold(
22-
appBar: AppBar(title: const Text(_title)),
23-
body: const Center(
24-
child: MyStatefulWidget(),
25-
),
26-
),
17+
return const MaterialApp(
18+
home: CheckboxListTileExample(),
2719
);
2820
}
2921
}
3022

31-
class MyStatefulWidget extends StatefulWidget {
32-
const MyStatefulWidget({super.key});
23+
class CheckboxListTileExample extends StatefulWidget {
24+
const CheckboxListTileExample({super.key});
3325

3426
@override
35-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
27+
State<CheckboxListTileExample> createState() => _CheckboxListTileExampleState();
3628
}
3729

38-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
30+
class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
3931
@override
4032
Widget build(BuildContext context) {
41-
return CheckboxListTile(
42-
title: const Text('Animate Slowly'),
43-
value: timeDilation != 1.0,
44-
onChanged: (bool? value) {
45-
setState(() {
46-
timeDilation = value! ? 10.0 : 1.0;
47-
});
48-
},
49-
secondary: const Icon(Icons.hourglass_empty),
33+
return Scaffold(
34+
appBar: AppBar(title: const Text('CheckboxListTile Sample')),
35+
body: Center(
36+
child: CheckboxListTile(
37+
title: const Text('Animate Slowly'),
38+
value: timeDilation != 1.0,
39+
onChanged: (bool? value) {
40+
setState(() {
41+
timeDilation = value! ? 10.0 : 1.0;
42+
});
43+
},
44+
secondary: const Icon(Icons.hourglass_empty),
45+
),
46+
),
5047
);
5148
}
5249
}

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

Lines changed: 50 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -4,99 +4,76 @@
44

55
// Flutter code sample for [CheckboxListTile].
66

7-
import 'package:flutter/gestures.dart';
8-
97
import 'package:flutter/material.dart';
108

11-
void main() => runApp(const MyApp());
12-
13-
class MyApp extends StatelessWidget {
14-
const MyApp({super.key});
9+
void main() => runApp(const CheckboxListTileApp());
1510

16-
static const String _title = 'Flutter Code Sample';
11+
class CheckboxListTileApp extends StatelessWidget {
12+
const CheckboxListTileApp({super.key});
1713

1814
@override
1915
Widget build(BuildContext context) {
2016
return MaterialApp(
21-
title: _title,
22-
home: Scaffold(
23-
appBar: AppBar(title: const Text(_title)),
24-
body: const Center(
25-
child: MyStatefulWidget(),
26-
),
27-
),
17+
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
18+
home: const CheckboxListTileExample(),
2819
);
2920
}
3021
}
3122

32-
class LinkedLabelCheckbox extends StatelessWidget {
33-
const LinkedLabelCheckbox({
34-
super.key,
35-
required this.label,
36-
required this.padding,
37-
required this.value,
38-
required this.onChanged,
39-
});
23+
class CheckboxListTileExample extends StatefulWidget {
24+
const CheckboxListTileExample({super.key});
4025

41-
final String label;
42-
final EdgeInsets padding;
43-
final bool value;
44-
final ValueChanged<bool> onChanged;
26+
@override
27+
State<CheckboxListTileExample> createState() => _CheckboxListTileExampleState();
28+
}
29+
30+
class _CheckboxListTileExampleState extends State<CheckboxListTileExample> {
31+
bool checkboxValue1 = true;
32+
bool checkboxValue2 = true;
33+
bool checkboxValue3 = true;
4534

4635
@override
4736
Widget build(BuildContext context) {
48-
return Padding(
49-
padding: padding,
50-
child: Row(
37+
return Scaffold(
38+
appBar: AppBar(title: const Text('CheckboxListTile Sample')),
39+
body: Column(
5140
children: <Widget>[
52-
Expanded(
53-
child: RichText(
54-
text: TextSpan(
55-
text: label,
56-
style: const TextStyle(
57-
color: Colors.blueAccent,
58-
decoration: TextDecoration.underline,
59-
),
60-
recognizer: TapGestureRecognizer()
61-
..onTap = () {
62-
debugPrint('Label has been tapped.');
63-
},
64-
),
65-
),
41+
CheckboxListTile(
42+
value: checkboxValue1,
43+
onChanged: (bool? value) {
44+
setState(() {
45+
checkboxValue1 = value!;
46+
});
47+
},
48+
title: const Text('Headline'),
49+
subtitle: const Text('Supporting text'),
50+
),
51+
const Divider(height: 0),
52+
CheckboxListTile(
53+
value: checkboxValue2,
54+
onChanged: (bool? value) {
55+
setState(() {
56+
checkboxValue2 = value!;
57+
});
58+
},
59+
title: const Text('Headline'),
60+
subtitle: const Text('Longer supporting text to demonstrate how the text wraps and the checkbox is centered vertically with the text.'),
6661
),
67-
Checkbox(
68-
value: value,
69-
onChanged: (bool? newValue) {
70-
onChanged(newValue!);
71-
},
62+
const Divider(height: 0),
63+
CheckboxListTile(
64+
value: checkboxValue3,
65+
onChanged: (bool? value) {
66+
setState(() {
67+
checkboxValue3 = value!;
68+
});
69+
},
70+
title: const Text('Headline'),
71+
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."),
72+
isThreeLine: true,
7273
),
74+
const Divider(height: 0),
7375
],
7476
),
7577
);
7678
}
7779
}
78-
79-
class MyStatefulWidget extends StatefulWidget {
80-
const MyStatefulWidget({super.key});
81-
82-
@override
83-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
84-
}
85-
86-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
87-
bool _isSelected = false;
88-
89-
@override
90-
Widget build(BuildContext context) {
91-
return LinkedLabelCheckbox(
92-
label: 'Linked, tappable label text',
93-
padding: const EdgeInsets.symmetric(horizontal: 20.0),
94-
value: _isSelected,
95-
onChanged: (bool newValue) {
96-
setState(() {
97-
_isSelected = newValue;
98-
});
99-
},
100-
);
101-
}
102-
}

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

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

‎examples/api/lib/material/checkbox_list_tile/checkbox_list_tile.2.dart renamed to ‎examples/api/lib/material/checkbox_list_tile/custom_labeled_checkbox.1.dart

Lines changed: 24 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,19 @@
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 [CheckboxListTile].
5+
// Flutter code sample for custom labeled checkbox.
66

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

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

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

1614
@override
1715
Widget build(BuildContext context) {
18-
return MaterialApp(
19-
title: _title,
20-
home: Scaffold(
21-
appBar: AppBar(title: const Text(_title)),
22-
body: const Center(
23-
child: MyStatefulWidget(),
24-
),
25-
),
16+
return const MaterialApp(
17+
home: LabeledCheckBoxExample(),
2618
);
2719
}
2820
}
@@ -65,27 +57,32 @@ class LabeledCheckbox extends StatelessWidget {
6557
}
6658
}
6759

68-
class MyStatefulWidget extends StatefulWidget {
69-
const MyStatefulWidget({super.key});
60+
class LabeledCheckBoxExample extends StatefulWidget {
61+
const LabeledCheckBoxExample({super.key});
7062

7163
@override
72-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
64+
State<LabeledCheckBoxExample> createState() => _LabeledCheckBoxExampleState();
7365
}
7466

75-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
67+
class _LabeledCheckBoxExampleState extends State<LabeledCheckBoxExample> {
7668
bool _isSelected = false;
7769

7870
@override
7971
Widget build(BuildContext context) {
80-
return LabeledCheckbox(
81-
label: 'This is the label text',
82-
padding: const EdgeInsets.symmetric(horizontal: 20.0),
83-
value: _isSelected,
84-
onChanged: (bool newValue) {
85-
setState(() {
86-
_isSelected = newValue;
87-
});
88-
},
72+
return Scaffold(
73+
appBar: AppBar(title: const Text('Custom Labeled Checkbox Sample')),
74+
body: Center(
75+
child: LabeledCheckbox(
76+
label: 'This is the label text',
77+
padding: const EdgeInsets.symmetric(horizontal: 20.0),
78+
value: _isSelected,
79+
onChanged: (bool newValue) {
80+
setState(() {
81+
_isSelected = newValue;
82+
});
83+
},
84+
),
85+
),
8986
);
9087
}
9188
}

0 commit comments

Comments
 (0)