blob: bffb1f04fb886a73572ab22b5b6592c7fc712bca [file] [log] [blame]
// 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';
/// Flutter code sample for [Radio] to showcase how to customize radio style.
void main() => runApp(const RadioExampleApp());
class RadioExampleApp extends StatelessWidget {
const RadioExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Radio Sample')),
body: const Center(child: RadioExample()),
),
);
}
}
enum RadioType { fillColor, backgroundColor, side, innerRadius }
class RadioExample extends StatefulWidget {
const RadioExample({super.key});
@override
State<RadioExample> createState() => _RadioExampleState();
}
class _RadioExampleState extends State<RadioExample> {
RadioType? _radioType = RadioType.fillColor;
@override
Widget build(BuildContext context) {
return RadioGroup<RadioType>(
groupValue: _radioType,
onChanged: (RadioType? value) {
setState(() {
_radioType = value;
});
},
child: Column(
children: <Widget>[
ListTile(
title: const Text('Fill color'),
leading: Radio<RadioType>(
value: RadioType.fillColor,
fillColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.selected)) {
return Colors.deepPurple;
} else {
return Colors.deepPurple.shade200;
}
}),
),
),
ListTile(
title: const Text('Background color'),
leading: Radio<RadioType>(
value: RadioType.backgroundColor,
backgroundColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.selected)) {
return Colors.greenAccent.withOpacity(0.5);
} else {
return Colors.grey.shade300.withOpacity(0.3);
}
}),
),
),
ListTile(
title: const Text('Side'),
leading: Radio<RadioType>(
value: RadioType.side,
side: WidgetStateBorderSide.resolveWith((Set<WidgetState> states) {
if (states.contains(WidgetState.selected)) {
return const BorderSide(
color: Colors.red,
width: 4,
strokeAlign: BorderSide.strokeAlignCenter,
);
} else {
return const BorderSide(
color: Colors.grey,
width: 1.5,
strokeAlign: BorderSide.strokeAlignCenter,
);
}
}),
),
),
const ListTile(
title: Text('Inner radius'),
leading: Radio<RadioType>(
value: RadioType.innerRadius,
innerRadius: WidgetStatePropertyAll<double>(6),
),
),
],
),
);
}
}