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
5import 'package:flutter/material.dart';
6
7/// Flutter code sample for [Radio] to showcase how to customize radio style.
8
9void main() => runApp(const RadioExampleApp());
10
11class RadioExampleApp extends StatelessWidget {
12 const RadioExampleApp({super.key});
13
14 @override
15 Widget build(BuildContext context) {
16 return MaterialApp(
17 home: Scaffold(
18 appBar: AppBar(title: const Text('Radio Sample')),
19 body: const Center(child: RadioExample()),
20 ),
21 );
22 }
23}
24
25enum RadioType { fillColor, backgroundColor, side, innerRadius }
26
27class RadioExample extends StatefulWidget {
28 const RadioExample({super.key});
29
30 @override
31 State<RadioExample> createState() => _RadioExampleState();
32}
33
34class _RadioExampleState extends State<RadioExample> {
35 RadioType? _radioType = RadioType.fillColor;
36
37 @override
38 Widget build(BuildContext context) {
39 return RadioGroup<RadioType>(
40 groupValue: _radioType,
41 onChanged: (RadioType? value) {
42 setState(() {
43 _radioType = value;
44 });
45 },
46 child: Column(
47 children: <Widget>[
48 ListTile(
49 title: const Text('Fill color'),
50 leading: Radio<RadioType>(
51 value: RadioType.fillColor,
52 fillColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
53 if (states.contains(WidgetState.selected)) {
54 return Colors.deepPurple;
55 } else {
56 return Colors.deepPurple.shade200;
57 }
58 }),
59 ),
60 ),
61 ListTile(
62 title: const Text('Background color'),
63 leading: Radio<RadioType>(
64 value: RadioType.backgroundColor,
65 backgroundColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
66 if (states.contains(WidgetState.selected)) {
67 return Colors.greenAccent.withOpacity(0.5);
68 } else {
69 return Colors.grey.shade300.withOpacity(0.3);
70 }
71 }),
72 ),
73 ),
74 ListTile(
75 title: const Text('Side'),
76 leading: Radio<RadioType>(
77 value: RadioType.side,
78 side: WidgetStateBorderSide.resolveWith((Set<WidgetState> states) {
79 if (states.contains(MaterialState.selected)) {
80 return const BorderSide(
81 color: Colors.red,
82 width: 4,
83 strokeAlign: BorderSide.strokeAlignCenter,
84 );
85 } else {
86 return const BorderSide(
87 color: Colors.grey,
88 width: 1.5,
89 strokeAlign: BorderSide.strokeAlignCenter,
90 );
91 }
92 }),
93 ),
94 ),
95
96 const ListTile(
97 title: Text('Inner radius'),
98 leading: Radio<RadioType>(
99 value: RadioType.innerRadius,
100 innerRadius: WidgetStatePropertyAll<double>(6),
101 ),
102 ),
103 ],
104 ),
105 );
106 }
107}
108