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:

1. Add matertino_radio to your package's pubspec.yaml file:

dependencies:
  matertino_radio: ^1.0.5

1. To use import the matertino_radio package:

import 'package:matertino_radio/matertino_radio.dart';

How to use MatertinoBottomSheetRadio property:

1. 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;

2. 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),
  )
)

3. Here is the output:

How to use MatertinoRadio horizontal custom radio group:

1. 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;

2. 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!;
          });
        }
      )
    )
  )
)

3. Here is the output:

How to use MatertinoRadio list with custom radio group:

1. 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;

2. 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!;
        });
      }
    )
  )
)

3. 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: