A library to easily create radio button and checkbox groups.

Overview

Check/Radio Group

Pub

A library to easily create radio button and checkbox groups.

Define font size, selection color, position of radios / check and text alignment.

We leave you free to customize the way you like best.

Let's program!

Getting Started

In the dependencies: section of your pubspec.yaml, add the following line:

  check_radio_group: 2.0.0

Usage

import 'package:check_radio_group/check/check_group.dart';
import 'package:check_radio_group/model/group_style.dart';
import 'package:check_radio_group/model/item_group.dart';
import 'package:check_radio_group/radio/radio_group.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      title: 'Radio/Check Group',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SamplePage(),
    ));

class SamplePage extends StatefulWidget {
  @override
  _SamplePageState createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  final List<GroupItem> radioItems = [
    GroupItem(title: 'Radio One'),
    GroupItem(title: 'Radio Two'),
    GroupItem(title: 'Radio Three'),
  ];
  final List<GroupItem> checkItems = [
    GroupItem(title: 'Check One'),
    GroupItem(title: 'Check Two'),
    GroupItem(title: 'Check Three'),
  ];

  GroupItem _selected;

  @override
  void initState() {
    setState(() {
      _selected = radioItems[0];
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _titleWidget(String title) => Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
          ),
        );

    return Scaffold(
      appBar: AppBar(
        title: Text('Check/Radio Group'),
        centerTitle: true,
      ),
      body: Container(
        margin: EdgeInsets.all(16),
        child: ListView(
          children: <Widget>[
            Center(
              child: _titleWidget('Radio Group Sample'),
            ),
            _titleWidget('Default Radio Group'),
            RadioGroup(
              items: radioItems,
              onSelected: (item) {
                print(item.title);
              },
            ),
            SizedBox(
              height: 32,
            ),
            _titleWidget('Selected Radio Group'),
            RadioGroup(
              items: radioItems,
              selected: _selected,
              onSelected: (item) {
                print(item.title);
              },
            ),
            SizedBox(
              height: 32,
            ),
            _titleWidget('Custom Radio Group Style'),
            RadioGroup(
              items: radioItems,
              selected: _selected,
              style: GroupStyle(
                  activeColor: Colors.red,
                  checkPosition: ListTileControlAffinity.trailing,
                  titleAlign: TextAlign.end,
                  titleStyle: TextStyle(fontSize: 12)),
              onSelected: (item) {
                print(item.title);
              },
            ),
            SizedBox(
              height: 32,
            ),
            Center(
              child: _titleWidget('Check Group Sample'),
            ),
            _titleWidget('Default Check Group'),
            CheckGroup(
              items: radioItems,
              onSelected: (item) {
                print(item.title);
              },
            ),
            SizedBox(
              height: 32,
            ),
            Center(
              child: _titleWidget('Check Group Sample'),
            ),
            _titleWidget('Selected Check Group'),
            CheckGroup(
              items: checkItems,
              style: GroupStyle(
                  activeColor: Colors.red,
                  checkPosition: ListTileControlAffinity.leading,
                  titleAlign: TextAlign.left,
                  titleStyle: TextStyle(fontSize: 12)),
              onSelected: (item) {
                print(item.title);
              },
            ),
          ],
        ),
      ),
    );
  }
}

Demo

Radio button group Checkbox Group

You might also like...

A button with ripple effect while being hold

A button with ripple effect while being hold

ripple_button a button with ripple effect while being hold build requirements to run this project you need a working enviroment of flutter v2 or highe

Nov 8, 2021

May be used to intercept the Android back-button, as an alternative to `WillPopScope`.

back_button_interceptor In simple cases, when you need to intercept the Android back-button, you usually add WillPopScope to your widget tree. However

Dec 12, 2022

A Widget that mimics the Facebook Reaction Button in Flutter.

A Widget that mimics the Facebook Reaction Button in Flutter.

ReactiveButton A Widget that mimics the Facebook Reaction Button in Flutter. Step by step explanation A full explanation on how to build such Widget m

Jul 12, 2022

A custom dropdown button lets the user select from a number of items

A custom dropdown button lets the user select from a number of items

CircularDropDownMenu Description A custom dropdown button lets the user select from a number of items. The button shows the currently selected item as

Dec 5, 2020

Flutter base, with a navigation button

mysample A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Dec 30, 2021

Flutter progress button

Flutter progress button

flutter_progress_button flutter_progress_button is a free and open source (MIT license) Material Flutter Button that supports variety of buttons style

Dec 6, 2022

Flutter Custom, Text, 3D, Social media button's package

Flutter Custom, Text, 3D, Social media button's package

Flutter Button flutter_button, which is a flutter package, contains animated, cool and awesome buttons. That you may like, thanks to this package you

Dec 29, 2022

AsyncButtonBuilder offers a simple way to extend any type of button with an asynchronous aspect

AsyncButtonBuilder offers a simple way to extend any type of button with an asynchronous aspect

async_button_builder AsyncButtonBuilder offers a simple way to extend any type of button with an asynchronous aspect. It allows adding loading, disabl

Jul 10, 2022

This flutter package provides an easy implementation of a Slider Button to cancel current transaction or screen

This flutter package provides an easy implementation of a Slider Button to cancel current transaction or screen

This flutter package provides an easy implementation of a Slider Button to cancel current transaction or screen

Nov 8, 2022
Comments
  • Cannot get all selected items in checkbox group

    Cannot get all selected items in checkbox group

    Say we have a checkbox group,

    return CheckGroup(
              style: GroupStyle(
                checkPosition: ListTileControlAffinity.leading,
                titleAlign: TextAlign.left,
                titleStyle: TextStyle(
                    fontSize: enFontSize,
                    fontWeight: FontWeight.w500,
                    color: color),
              ),
              items: tempList,
              onSelected: (item) {
                print(item.title);
                //answerResult.add(item.title);
              },
            );
    

    Since checkboxs are multi selection, how to get the list of selected items?

    opened by RaistlinTAO 2
Owner
Caiubi Tech
Caiubi Tech
Flutter custom widget to make a group buttons. Included Radio and CheckBox buttons.

Flutter widget to create a group of buttons fast ?? Included Radio and CheckBox buttons models with custom groping types ?? Show some ❤️ and star the

Stanislav Ilin 162 Dec 26, 2022
Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Flutter Duration Button - Create auto-click button likes Netflix's Skip Intro button in Flutter

Kim Seung Hwan 7 Dec 7, 2022
Flutter Triple Status Button can use toggle button but in three statuses.

triple_status_button Triple Status Button. Flutter Triple Status Button can use toggle button but in three statuses. Property Description height heigh

MahdiBagjani 2 Nov 13, 2021
A button that looks like a Cupertino text button

Cupertino Text Button A button that looks like a Cupertino text button! Text Button A simple text button can be created like this: CupertinoTextButton

Nick Sirovsky 0 Nov 24, 2022
Flutter reaction button plugin it is fully customizable widget such as Facebook reaction button

Flutter Reaction Button Flutter button reaction it is fully customizable widget such as Facebook reaction button. Preview Demo Usage Include 'flutter_

Abdelouahed Medjoudja 174 Dec 19, 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
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
Create beautiful flutter tags quickly and easily

flutter_tags Create beautiful tags quickly and easily. Installing Add this to your package's pubspec.yaml file: Null-safety version (Beta) MORE INFO d

null 2 Mar 4, 2022
A popup simple topModalSheet menu button widget with handsome design and easy to use

top_modal_sheet A popup simple topModalSheet menu button widget with handsome design and easy to use. Installations Add top_modal_sheet: ^1.0.0 in you

Baldemar Alejandres 5 Jul 29, 2022
RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and error animations.

rounded_loading_button RoundedLoadingButton is a Flutter package with a simple implementation of an animated loading button, complete with success and

Chris Edgington 223 Jan 4, 2023