Matertino Radio
Fully Customizable Radio Group Package Developed By 1 More Code.
Development
A Beautiful and Simple Custom Radio Group widget for Flutter. It can be fully customized with label, titles, labelStyle, titleStyle, radioIcons, etc. It also contains single radio list tile. You can use this library with bottom sheet radio group as modern dropdown with search feature.
Demo Screenshot of MatertinoRadio
:
How to use:
How to use MatertinoRadio
:
- Add
matertino_radio
to your package's pubspec.yaml file:
dependencies:
matertino_radio: ^1.0.5
- To use import the
matertino_radio
package:
import 'package:matertino_radio/matertino_radio.dart';
How to use MatertinoBottomSheetRadio
property:
- Create variables of lists and selectedItem:
List<String> items = ["Adventure", "Agility", "Cultural Influence", "Entrepreneurship", "Heritage", "Movers", "Open for Business", "Power", "Quality of Life", "Social Purpose"];
String? selectedItem;
- Create a
MatertinoBottomSheetRadio
:
MatertinoBottomSheetRadio(
list: items,
selected: selectedItem,
onSelect: (val) {
setState(() {
selectedItem = val;
});
},
child: CupertinoTextField(
onTap: null,
controller: TextEditingController(text: selectedItem),
placeholder: "Select Item",
enabled: false,
suffix: const Icon(Icons.arrow_drop_down),
)
)
- Here is the output:
How to use MatertinoRadio
horizontal custom radio group:
- Create variables of lists and selectedItem:
List<Map<String, dynamic>> lists = [
{"title": "Male", "iconData": Icons.male_rounded},
{"title": "Female", "iconData": Icons.female_rounded},
{"title": "Other", "iconData": Icons.alt_route_rounded}
];
String? selectedItem;
- Use of
MatertinoRadioListTile
:
Row(
children: List.generate(
lists.length,
(index) => Expanded(
child: MatertinoRadioListTile(
value: lists[index]['title'],
groupValue: selectedItem,
title: lists[index]['title'],
onChanged: (val) {
setState(() {
selectedItem = val!;
});
}
)
)
)
)
- Here is the output:
How to use MatertinoRadio
list with custom radio group:
- Create variables of lists and selectedItem:
List<Map<String, dynamic>> lists = [
{"title": "India", "rank": "#1", "color": Colors.cyan.withOpacity(0.3)},
{"title": "Germany", "rank": "#2", "color": Colors.green.withOpacity(0.3)},
{"title": "Canada", "rank": "#3", "color": Colors.blue.withOpacity(0.3)},
{"title": "United States", "rank": "#4", "color": Colors.redAccent.withOpacity(0.3)},
{"title": "Switzerland", "rank": "#5", "color": Colors.amber.withOpacity(0.3)},
{"title": "China", "rank": "#6", "color": Colors.teal.withOpacity(0.3)}
];
String? selectedItem;
- Use of
MatertinoRadioListTile
:
Column(
children: List.generate(
lists.length,
(index) => MatertinoRadioListTile(
value: lists[index]['title'],
groupValue: selectedItem,
title: lists[index]['title'],
tileColor: itemList[index]['color'],
trailingWidget: Text(itemList[index]['rank']),
selectedRadioIconData: CupertinoIcons.checkmark_seal_fill,
unselectedRadioIconData: CupertinoIcons.checkmark_seal,
onChanged: (val) {
setState(() {
selectedItem = val!;
});
}
)
)
)
- Here is the output:
Example Usage
See Example Code for more info.
Issues & Feedback
Please file an issue to send feedback or report a bug,
If you want to ask a question or suggest an idea then you can open an discussion.
Thank you!
Contributing
Every pull request is most welcome 🤝.
Support
If this package saves your time. You can now buy me a coffee!
Scan bellow QR code or click and don't forget to leave a message there:
Libraries
- matertino_radio
- Support for doing something awesome.