Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier.

Overview

custom_radio_grouped_button

Pub

Custom Radio Buttons and Grouped Check Box Button

Custom Flutter widgets that makes Checkbox and Radio Buttons much cleaner and easier

Breaking Changes:

From Version 1.0.2

buttonColor is now unSelectedColor

Installing

Add the following to your pubspec.yaml file:

dependencies:
  custom_radio_grouped_button: any

Creating Radio Button

CustomRadioButton(
  elevation: 0,
  absoluteZeroSpacing: true,
  unSelectedColor: Theme.of(context).canvasColor,
  buttonLables: [
    'Student',
    'Parent',
    'Teacher',
  ],
  buttonValues: [
    "STUDENT",
    "PARENT",
    "TEACHER",
  ],
  buttonTextStyle: ButtonTextStyle(
      selectedColor: Colors.white,
      unSelectedColor: Colors.black,
      textStyle: TextStyle(fontSize: 16)),
  radioButtonValue: (value) {
    print(value);
  },
  selectedColor: Theme.of(context).accentColor,
),

Creating Grouped Button

CustomCheckBoxGroup(
  buttonTextStyle: ButtonTextStyle(
    selectedColor: Colors.red,
    unSelectedColor: Colors.orange,
    textStyle: TextStyle(
      fontSize: 16,
    ),
  ),
  unSelectedColor: Theme.of(context).canvasColor,
  buttonLables: [
    "M",
    "T",
    "W",
    "T",
    "F",
    "S",
    "S",
  ],
  buttonValuesList: [
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
    "Sunday",
  ],
  checkBoxButtonValues: (values) {
    print(values);
  },
  spacing: 0,
  defaultSelected: "Monday",
  horizontal: false,
  enableButtonWrap: false,
  width: 40,
  absoluteZeroSpacing: false,
  selectedColor: Theme.of(context).accentColor,
  padding: 10, 
);

Screenshots

Grouped Button

Grouped Button

Comments
  • defaultSelected is not working in CustomRadioButton ^1.0.6+1

    defaultSelected is not working in CustomRadioButton ^1.0.6+1

    I am building a quiz app, where all the question, options and its correct answer are stored in a List. User can move on to next question or previous question using button, which will update the index position and rebuild the widget tree to load question of that particular index. When the widget tree is rebuilt, the select option for previously attempted question is not highlighted. I am using defaultSelected for this. However, on debugging I found that correct value is passed in the defaultSelected parameters, even then the value is not selected.

    I have my attached my app screen and code. Kindly fix it as soon as possibly. Nice work for the library by the way!.

    CustomRadioButton( selectedBorderColor: THEME_COLOR, unSelectedBorderColor: Colors.grey.withOpacity(0.3), selectedColor: THEME_COLOR, unSelectedColor: Colors.grey.withOpacity(0.3), buttonTextStyle: ButtonTextStyle( selectedColor: Colors.white, unSelectedColor: Colors.black, textStyle: TextStyle( fontSize: 16, ), ), absoluteZeroSpacing: false, enableButtonWrap: true, padding: 20, spacing: 20, width: (width - 240) * 0.6 / 2, enableShape: true, defaultSelected: getDefaultSelectedButton(), buttonLables: quizDetail.questionList .elementAt(selectedIndex - 1) .options, buttonValues: quizDetail.questionList .elementAt(selectedIndex - 1) .options .map((e) => quizDetail.questionList .elementAt(selectedIndex - 1) .options .indexOf(e)) .toList(), radioButtonValue: (value) { setState(() { attemptedQuestionList[selectedIndex - 1] = value; }); }),

    getDefaultSelectedButton() { int val = attemptedQuestionList.elementAt(selectedIndex - 1) == -1 ? null : attemptedQuestionList.elementAt(selectedIndex - 1); print(val); return val; }

    Play the video with sound on.

    https://user-images.githubusercontent.com/17857031/109754887-de897680-7c0a-11eb-9324-e64c892056a1.mov

    opened by IamAKX 7
  • CustomCheckBoxGroup class defaultSelected

    CustomCheckBoxGroup class defaultSelected

    Thank you for your great package. CustomCheckBoxGroup would be used to be selected multiple options. But defaultSelected field is not supporting List, but only an item. Because CustomRadioButton will be used for single chose, defaultSelected should be single item. Would you please kindly sort this problem out? Best regards.

    feature_request 
    opened by luiszheng0627 3
  • Mirror enhances

    Mirror enhances

    image

    • can't create like above, even space = 0 and padding = 0
    • can't apply custom text style
    • horizontal = true is so ambiguous.
    • labels can be duplicated, while values should be unique.
    bug enhancement 
    opened by bogdan-develop 3
  • it can't be centered

    it can't be centered

    first off thanks for this! it looks very nice!

    When I put the widget inside a Column with it's mainAxisAlignment on center, everything is centered but the CustomRadioButton stays on left always.

    bug 
    opened by neutrin0x 3
  • Exception caught by widgets library:

    Exception caught by widgets library:"Class 'String' has no instance method 'where'"

    Version: custom_radio_grouped_button: ^2.1.1 Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19042.1288], locale zh-CN)

    my code:

    CustomCheckBoxGroup(
      buttonTextStyle: ButtonTextStyle(
        selectedColor: Colors.red,
        unSelectedColor: Colors.orange,
        textStyle: TextStyle(
          fontSize: 16,
        ),
      ),
      unSelectedColor: Theme.of(context).canvasColor,
      buttonLables: [
        "M",
        "T",
        "W",
        "T",
        "F",
        "S",
        "S",
      ],
      buttonValuesList: [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
        "Sunday",
      ],
      checkBoxButtonValues: (values) {
        print(values);
      },
      spacing: 0,
      defaultSelected: "Monday",
      horizontal: false,
      enableButtonWrap: false,
      width: 40,
      absoluteZeroSpacing: false,
      selectedColor: Theme.of(context).accentColor,
      padding: 10, 
    );
    
    

    Exception:

    ======== Exception caught by widgets library =======================================================
    The following NoSuchMethodError was thrown building _BodyBuilder:
    Class 'String' has no instance method 'where'.
    Receiver: "Monday"
    Tried calling: where(Closure: (dynamic) => bool)
    
    The relevant error-causing widget was: 
      Scaffold Scaffold:file:///E:/FlutterDev/YLAib/pages/device_pagee_time_switch/add_single_timeriew.dart:16:12
    When the exception was thrown, this was the stack: 
    #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:63:5)
    #1      _CustomCheckBoxGroupState.initState (package:custom_radio_grouped_button/CustomButtons/CustomCheckBoxGroup.dart:133:29)
    
    opened by lybgo 2
  • README improvement

    README improvement

    Just a suggestion. I think the first thing a visitor wants to see is a preview of the package, and you have one, great. But, it's not at the top of the file, so chances are the user will left the repo before even looking at it.

    opened by Ascenio 2
  • defaultSelected is broken

    defaultSelected is broken

    In 1.0.3, creating a CustomRadioButton with a default selected does not work.

    The initState method checks against the buttonValues and if a match is found then _currentSelectedLabel is set to the defaultSelected (value).

    Then during button building the _currentSelectedLabel is checked against the list of button labels, which would only find a match if the labels and the values are the same.

    I would have thought that changing to only look at button values is the correct thing, changing _currentSelectedLabel to _currentSelectedValue

    Hope that makes sense. Thank you.

    bug 
    opened by seanradford 2
  • cannot build app after upgrader 1.0.0 -> 1.0.1

    cannot build app after upgrader 1.0.0 -> 1.0.1

    I upgrade version from 1.0.0 to 1.0.1 and i found error

    1. attribute "hight" rename to "height"
    2. I cannot build apk file and got some exception from attach file

    messageImage_1593704631172

    How I can fix it?

    bug 
    opened by jirapatj 2
  • Align left or right

    Align left or right

    hi , i'm trying align custom_radio_grouped_button to left or right, how can i align it ? thank in advance here what i did and it doesn't work:

    Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
              CustomRadioButton(
              scrollController: ScrollController(),
              elevation: 0,
              absoluteZeroSpacing: true,
              enableShape: true,
              unSelectedColor: Theme.of(context).canvasColor,
              buttonLables: const [
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
                '7',
                '8',
                '9',
              ],
              buttonValues: const [
                '1',
                '2',
                '3',
                '4',
                '5',
                '6',
                '7',
                '8',
                '9',
              ],
         
              radioButtonValue: (value) {},
              selectedColor: _theme.iconTheme.color!,
            ),
            ]
          )
    
    opened by YouSour 1
  • The included part must have a part-of directive

    The included part must have a part-of directive

    error: The included part ''CustomButtons/CustomRadioButton.dart'' 
    must have a part-of directive. (part_of_non_part at [custom_radio_grouped_button] 
    lib/custom_radio_grouped_button.dart:6)
    
    opened by pishguy 1
  • Ability to add prefix icons

    Ability to add prefix icons

    I have added the option to add an icon before text.

    • Ability to use different icons during selection and deselection
    • Ability to use different size of icons
    • Ability to use different colors of icons during selection and deselection
    • Ability to provide padding to the icons
    opened by JiteshArul 4
  • Add Icon to checkbox [Question]

    Add Icon to checkbox [Question]

    I'm using the custom_radio_grouped_button for one of my projects, thank for this great package!

    Is it possible to customize a bit more the checkboxes?

    For example, I would like to add an info button inside of each checkbox (on the right side).

    image

    opened by LAUBENicolas 2
Owner
Ketan Choyal
iOS/Android App Developer 📱 Flutter + Native https://sourcerer.io/ketanchoyal
Ketan Choyal
Cupertino buttons which are used as radio buttons in order to select one value

Flutter Cupertino Radio Choice Cupertino buttons which are used as radio buttons in order to select one value. Tutorial A complete tutorial how to use

Christoph Rothermel 4 Sep 18, 2022
A library to easily create radio button and checkbox groups.

Check/Radio Group A library to easily create radio button and checkbox groups. Define font size, selection color, position of radios / check and text

Caiubi Tech 2 Jan 6, 2021
A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier.

Draggable Home A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver. Us

Devs On Flutter 106 Dec 12, 2022
Fancy design of radio buttons in Flutter (package).

A Flutter package for new radio button design. With Elegant Animation. Features Usage TODO: Include short and useful examples for package users. Add l

Aymen Boucheffa 0 Nov 26, 2021
Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more.

flutter_donation_buttons Donation/Support buttons to allow you to add your favorite support buttons like: Paypal, Ko-fi or Patreon and more. Getting S

null 6 Dec 10, 2022
A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay windows for Android with pure Flutter. Android only Features Pure Flu

Zoe 116 Dec 21, 2022
Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons

Flutter Number Picker is a custom widget designed for choosing an integer or decimal number by using add and minus buttons. Getting Started Head to /p

Vũ Phương 2 Jul 4, 2022
Displays a scrollable timeline with custom child widgets and custom icons.

Flutter Timeline Widget Displays a scrollable timeline with custom child widgets and custom icons. Installation In your pubspec.yaml file within your

Furkan Tektas 375 Nov 20, 2022
Custom widgets and utils using Flutter framework widgets and Dart language

reuse_widgets_and_utils The custom widgets and utils using Flutter framework widgets and Dart programming language. Getting Started This project is a

null 1 Oct 29, 2021
Flutter Package for Easier Creation of Home Screen Widgets

Home Widget HomeWidget is a Plugin to make it easier to create HomeScreen Widgets on Android and iOS. HomeWidget does not allow writing Widgets with F

Anton Borries 405 Dec 31, 2022
Custom-Position-Popup - Custom Position Popup For Flutter

Custom-Position-Popup before clone the GitHub repository please give a star on t

Blackshadow Software Ltd 11 Oct 17, 2022
Customizable Material and Cupertino buttons with progress indicators and more

future_button Customizable Material and Cupertino buttons with progress indicators and more.

Erzhan 33 Oct 13, 2022
Create beautiful Loading and Timer buttons in Flutter

Argon Buttons (Timer and Loading) Create beautiful Loading and Timer buttons using Argon Buttons. No need to worry about handling animations or timers

Yogesh 213 Dec 11, 2022
pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

pull_down_button is a rework of Flutter's PopupMenuButton to be styled like Pop-Up & Pull-Down Buttons from iOS 14+ with some additional customisation options.

ĐmĐrl 18 Dec 30, 2022
A widget for swiping through a deck of cards with gestures or buttons.

swiping_card_deck A widget for swiping through a deck of cards with gestures or buttons. This package was inspired when I was trying to develop a Tind

Justin Hutchins 8 Oct 17, 2022
This repo is for anything that can be reusable in flutter like custom widgets 🟥, animations 🌟and more

Flutter Shortcuts This repo is for anything that can be reusable in flutter like custom widgets ?? , animations ?? and more. How to Use Just get the f

Abdelrahman Mostafa Elmarakby 91 Dec 3, 2022
Show custom in-app notification with any Widgets in flutter

notify_inapp show custom in-app notification with any Widgets. Getting Started Add this to your package's pubspec.yaml file: dependencies: notify_in

NewTab 3 Aug 19, 2022
Flutter package: Assorted layout widgets that boldly go where no native Flutter widgets have gone before.

assorted_layout_widgets I will slowly but surely add interesting widgets, classes and methods to this package. Despite the package name, they are not

Marcelo Glasberg 122 Dec 22, 2022
Flutter-useful-widgets - Flutter Useful Widgets

useful_widgets This package makes it easy to build apps by providing a list of simple and useful widgets. import 'package:useful_widgets/useful_widget

Ricardo Crescenti 6 Jun 20, 2022