matertino_radio

Description:

matertino radio

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
copied to clipboard

To use import the matertino_radio package:

import 'package:matertino_radio/matertino_radio.dart';
copied to clipboard
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;
copied to clipboard

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),
)
)
copied to clipboard

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;
copied to clipboard

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!;
});
}
)
)
)
)
copied to clipboard

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;
copied to clipboard

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!;
});
}
)
)
)
copied to clipboard

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: