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

Commit 7177c41

Browse files
TahaTesserTahaTesser
authored
Add Material 3 RadioListTile example and update existing examples (#119716)
* Add Material 3 `RadioListTile` example and update existing examples * Update examples with `useMaterial3: true` and update example descriptions. * add a `ColorScheme` colour
1 parent c5e8757 commit 7177c41

11 files changed

+448
-117
lines changed

‎examples/api/lib/material/radio_list_tile/custom_labeled_radio.0.dart

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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 radio.
6+
7+
import 'package:flutter/gestures.dart';
8+
9+
import 'package:flutter/material.dart';
10+
11+
void main() => runApp(const LabeledRadioApp());
12+
13+
class LabeledRadioApp extends StatelessWidget {
14+
const LabeledRadioApp({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 Radio Sample')),
22+
body: const LabeledRadioExample(),
23+
),
24+
);
25+
}
26+
}
27+
28+
class LinkedLabelRadio extends StatelessWidget {
29+
const LinkedLabelRadio({
30+
super.key,
31+
required this.label,
32+
required this.padding,
33+
required this.groupValue,
34+
required this.value,
35+
required this.onChanged,
36+
});
37+
38+
final String label;
39+
final EdgeInsets padding;
40+
final bool groupValue;
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+
Radio<bool>(
51+
groupValue: groupValue,
52+
value: value,
53+
onChanged: (bool? newValue) {
54+
onChanged(newValue!);
55+
},
56+
),
57+
RichText(
58+
text: TextSpan(
59+
text: label,
60+
style: TextStyle(
61+
color: Theme.of(context).colorScheme.primary,
62+
decoration: TextDecoration.underline,
63+
),
64+
recognizer: TapGestureRecognizer()
65+
..onTap = () {
66+
debugPrint('Label has been tapped.');
67+
},
68+
),
69+
),
70+
],
71+
),
72+
);
73+
}
74+
}
75+
76+
class LabeledRadioExample extends StatefulWidget {
77+
const LabeledRadioExample({super.key});
78+
79+
@override
80+
State<LabeledRadioExample> createState() => _LabeledRadioExampleState();
81+
}
82+
83+
class _LabeledRadioExampleState extends State<LabeledRadioExample> {
84+
bool _isRadioSelected = false;
85+
86+
@override
87+
Widget build(BuildContext context) {
88+
return Scaffold(
89+
body: Column(
90+
mainAxisAlignment: MainAxisAlignment.center,
91+
children: <Widget>[
92+
LinkedLabelRadio(
93+
label: 'First tappable label text',
94+
padding: const EdgeInsets.symmetric(horizontal: 5.0),
95+
value: true,
96+
groupValue: _isRadioSelected,
97+
onChanged: (bool newValue) {
98+
setState(() {
99+
_isRadioSelected = newValue;
100+
});
101+
},
102+
),
103+
LinkedLabelRadio(
104+
label: 'Second tappable label text',
105+
padding: const EdgeInsets.symmetric(horizontal: 5.0),
106+
value: false,
107+
groupValue: _isRadioSelected,
108+
onChanged: (bool newValue) {
109+
setState(() {
110+
_isRadioSelected = newValue;
111+
});
112+
},
113+
),
114+
],
115+
),
116+
);
117+
}
118+
}

‎examples/api/lib/material/radio_list_tile/radio_list_tile.2.dart renamed to ‎examples/api/lib/material/radio_list_tile/custom_labeled_radio.1.dart

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

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

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

11-
class MyApp extends StatelessWidget {
12-
const MyApp({super.key});
13-
14-
static const String _title = 'Flutter Code Sample';
11+
class LabeledRadioApp extends StatelessWidget {
12+
const LabeledRadioApp({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)),
22-
body: const MyStatefulWidget(),
19+
appBar: AppBar(title: const Text('Custom Labeled Radio Sample')),
20+
body: const LabeledRadioExample(),
2321
),
2422
);
2523
}
@@ -68,14 +66,14 @@ class LabeledRadio extends StatelessWidget {
6866
}
6967
}
7068

71-
class MyStatefulWidget extends StatefulWidget {
72-
const MyStatefulWidget({super.key});
69+
class LabeledRadioExample extends StatefulWidget {
70+
const LabeledRadioExample({super.key});
7371

7472
@override
75-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
73+
State<LabeledRadioExample> createState() => _LabeledRadioExampleState();
7674
}
7775

78-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
76+
class _LabeledRadioExampleState extends State<LabeledRadioExample> {
7977
bool _isRadioSelected = false;
8078

8179
@override

‎examples/api/lib/material/radio_list_tile/radio_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 RadioListTileApp());
1010

11-
class MyApp extends StatelessWidget {
12-
const MyApp({super.key});
13-
14-
static const String _title = 'Flutter Code Sample';
11+
class RadioListTileApp extends StatelessWidget {
12+
const RadioListTileApp({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)),
22-
body: const MyStatefulWidget(),
19+
appBar: AppBar(title: const Text('RadioListTile Sample')),
20+
body: const RadioListTileExample(),
2321
),
2422
);
2523
}
2624
}
2725

2826
enum SingingCharacter { lafayette, jefferson }
2927

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

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

37-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
35+
class _RadioListTileExampleState extends State<RadioListTileExample> {
3836
SingingCharacter? _character = SingingCharacter.lafayette;
3937

4038
@override

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

Lines changed: 38 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -4,113 +4,73 @@
44

55
// Flutter code sample for [RadioListTile].
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 RadioListTileApp());
1510

16-
static const String _title = 'Flutter Code Sample';
11+
class RadioListTileApp extends StatelessWidget {
12+
const RadioListTileApp({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 MyStatefulWidget(),
25-
),
17+
theme: ThemeData(useMaterial3: true),
18+
home: const RadioListTileExample(),
2619
);
2720
}
2821
}
2922

30-
class LinkedLabelRadio extends StatelessWidget {
31-
const LinkedLabelRadio({
32-
super.key,
33-
required this.label,
34-
required this.padding,
35-
required this.groupValue,
36-
required this.value,
37-
required this.onChanged,
38-
});
39-
40-
final String label;
41-
final EdgeInsets padding;
42-
final bool groupValue;
43-
final bool value;
44-
final ValueChanged<bool> onChanged;
45-
46-
@override
47-
Widget build(BuildContext context) {
48-
return Padding(
49-
padding: padding,
50-
child: Row(
51-
children: <Widget>[
52-
Radio<bool>(
53-
groupValue: groupValue,
54-
value: value,
55-
onChanged: (bool? newValue) {
56-
onChanged(newValue!);
57-
}),
58-
RichText(
59-
text: TextSpan(
60-
text: label,
61-
style: const TextStyle(
62-
color: Colors.blueAccent,
63-
decoration: TextDecoration.underline,
64-
),
65-
recognizer: TapGestureRecognizer()
66-
..onTap = () {
67-
debugPrint('Label has been tapped.');
68-
},
69-
),
70-
),
71-
],
72-
),
73-
);
74-
}
75-
}
23+
enum Groceries { pickles, tomato, lettuce }
7624

77-
class MyStatefulWidget extends StatefulWidget {
78-
const MyStatefulWidget({super.key});
25+
class RadioListTileExample extends StatefulWidget {
26+
const RadioListTileExample({super.key});
7927

8028
@override
81-
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
29+
State<RadioListTileExample> createState() => _RadioListTileExampleState();
8230
}
8331

84-
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
85-
bool _isRadioSelected = false;
32+
class _RadioListTileExampleState extends State<RadioListTileExample> {
33+
Groceries? _groceryItem = Groceries.pickles;
8634

8735
@override
8836
Widget build(BuildContext context) {
8937
return Scaffold(
38+
appBar: AppBar(title: const Text('RadioListTile Sample')),
9039
body: Column(
91-
mainAxisAlignment: MainAxisAlignment.center,
9240
children: <Widget>[
93-
LinkedLabelRadio(
94-
label: 'First tappable label text',
95-
padding: const EdgeInsets.symmetric(horizontal: 5.0),
96-
value: true,
97-
groupValue: _isRadioSelected,
98-
onChanged: (bool newValue) {
41+
RadioListTile<Groceries>(
42+
value: Groceries.pickles,
43+
groupValue: _groceryItem,
44+
onChanged: (Groceries? value) {
45+
setState(() {
46+
_groceryItem = value;
47+
});
48+
},
49+
title: const Text('Pickles'),
50+
subtitle: const Text('Supporting text'),
51+
),
52+
RadioListTile<Groceries>(
53+
value: Groceries.tomato,
54+
groupValue: _groceryItem,
55+
onChanged: (Groceries? value) {
9956
setState(() {
100-
_isRadioSelected = newValue;
57+
_groceryItem = value;
10158
});
10259
},
60+
title: const Text('Tomato'),
61+
subtitle: const Text('Longer supporting text to demonstrate how the text wraps and the radio is centered vertically with the text.'),
10362
),
104-
LinkedLabelRadio(
105-
label: 'Second tappable label text',
106-
padding: const EdgeInsets.symmetric(horizontal: 5.0),
107-
value: false,
108-
groupValue: _isRadioSelected,
109-
onChanged: (bool newValue) {
63+
RadioListTile<Groceries>(
64+
value: Groceries.lettuce,
65+
groupValue: _groceryItem,
66+
onChanged: (Groceries? value) {
11067
setState(() {
111-
_isRadioSelected = newValue;
68+
_groceryItem = value;
11269
});
11370
},
71+
title: const Text('Lettuce'),
72+
subtitle: const Text("Longer supporting text to demonstrate how the text wraps and how setting 'RadioListTile.isThreeLine = true' aligns the radio to the top vertically with the text."),
73+
isThreeLine: true,
11474
),
11575
],
11676
),

0 commit comments

Comments
 (0)