Hunter  Krajcik

Hunter Krajcik

1661262300

A Widget That Groups Radio Buttons So They Can Work together

Radio Group

A widget that groups radio buttons so they can work together to give the user a pleasant experience when making selections within the app.

A gif demonstrating the radio group in action.

Installation

In the pubspec.yaml of your flutter project, add the following dependency:

 radio_group_v2: ^1.0.2

Import it to each file you use it in:

 import 'package:radio_group_v2/radio_group_v2.dart';

Usage

Example 1

This example is a very basic, vertical radio group.

RadioGroupController myController = RadioGroupController();

RadioGroup(
  controller: myController,
  values: ["Choice1", "Choice2", "Choice3"],
)

Example 2

This example is a horizontal radio group with some decoration, and it starts with the first button selected.

RadioGroupController myController = RadioGroupController();

RadioGroup(
  controller: myController,
  values: ["Choice1", "Choice2", "Choice3"],
  indexOfDefault: 0,
  orientation: RadioGroupOrientation.Horizontal,
  decoration: RadioGroupDecoration(
    spacing: 10.0,
    labelStyle: TextStyle(
      color: Colors.blue,
    ),
    activeColor: Colors.amber,
  ),
)

Example 3

This example shows how to programmatically select an item using two different methods.

RadioGroupController myController = RadioGroupController();

List<String> items = ["Choice1", "Choice2", "Choice3"];

RadioGroup(
  controller: myController,
  values: items,
)

// Method 1 - Selects a specific item from the list.
myController.value = items[1];

// Method 2 - Selects whatever item is at the given
//            index in the list.
myController.selectAt(2);

Example 4

This example shows how to retrieve the selected value.

RadioGroupController myController = RadioGroupController();

RadioGroup(
  controller: myController,
  values: ["Choice1", "Choice2", "Choice3"],
)

String selected = myController.value.toString();

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add radio_group_v2

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  radio_group_v2: ^1.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:radio_group_v2/radio_group_v2.dart';

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:radio_group_v2/radio_group_v2.dart';

void main() {
  runApp(App());
}

/// This is how this example code will know if we are talking about the vertical
/// radio group example or the horizontal radio group example.
enum RadioGroupId {
  /// The vertical radio group example.
  Vertical,

  /// The horizontal radio group example.
  Horizontal,
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  /// The currently selected value of the vertical radio group.
  ///
  /// This one is obtained automatically, thanks to the onChange() method.
  String verticalValAutomatic = "";

  /// The currently selected value of the vertical radio group.
  ///
  /// This one is obtained by clicking the "Fetch Selected" button under the
  /// vertical radio group.
  String verticalValRequested = "";

  /// The currently selected value of the horizontal radio group.
  ///
  /// This one is obtained automatically, thanks to the onChange() method.
  String horizontalValAutomatic = "";

  /// The currently selected value of the horizontal radio group.
  ///
  /// This one is obtained by clicking the "Fetch Selected" button under the
  /// horizontal radio group.
  String horizontalValRequested = "";

  /// The controller for the vertical radio group.
  RadioGroupController verticalGroupController = RadioGroupController();

  /// The controller for the horizontal radio group.
  RadioGroupController horizontalGroupController = RadioGroupController();

  /// The values for the vertical radio group.
  final List<String> verticalValues = [
    "String 1",
    "String 2",
    "String 3",
    "String 4",
    "String 5",
  ];

  /// The values for the horizontal radio group.
  final List<Text> horizontalValues = [
    Text("Widget 1"),
    Text("Widget 2"),
    Text("Widget 3"),
    Text("Widget 4"),
    Text("Widget 5"),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Radio Group"),
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(25.0),
              child: Column(
                children: [
                  selectedValBoard(verticalValAutomatic, verticalValRequested),
                  IntrinsicWidth(
                    child: RadioGroup(
                      controller: verticalGroupController,
                      values: verticalValues,
                      onChanged: (newValue) => setState(() {
                        verticalValAutomatic = newValue.toString();
                      }),
                      decoration: RadioGroupDecoration(
                        labelStyle: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                    ),
                  ),
                  actionButtons(RadioGroupId.Vertical),
                  Divider(
                    height: 50.0,
                  ),
                  selectedValBoard(
                      horizontalValAutomatic, horizontalValRequested),
                  RadioGroup(
                    controller: horizontalGroupController,
                    values: horizontalValues,
                    orientation: RadioGroupOrientation.Horizontal,
                    indexOfDefault: 0,
                    onChanged: (newValue) => setState(() {
                      horizontalValAutomatic = newValue.toString();
                    }),
                  ),
                  actionButtons(RadioGroupId.Horizontal),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  /// This method builds the section at the top of each radio group that shows
  /// which button is selected.
  ///
  /// This shows of the ability to be able to get the selected value in two
  /// different ways.
  Padding selectedValBoard(String automatic, String requested) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12.5),
      child: Column(
        children: [
          Text("Selected Value"),
          IntrinsicHeight(
            child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Column(
                      children: [
                        Text("onChange():"),
                        Text(automatic),
                      ],
                    ),
                  ],
                ),
              ),
              VerticalDivider(
                color: Colors.black,
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Column(
                      children: [
                        Text("\"Fetch Selected\" btn:"),
                        Text(requested),
                      ],
                    ),
                  ],
                ),
              ),
            ]),
          )
        ],
      ),
    );
  }

  /// The buttons used to demo the radio groups.
  Padding actionButtons(RadioGroupId radioGroupId) {
    /// Make the buttons blue.
    ButtonStyle buttonStyle = ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith(
        (states) => states.contains(MaterialState.pressed)
            ? Colors.blueAccent
            : Colors.blue,
      ),
      padding: MaterialStateProperty.all(
        EdgeInsets.symmetric(
          horizontal: 16,
          vertical: 8,
        ),
      ),
    );

    /// Make the button text white.
    TextStyle textStyle = TextStyle(
      color: Colors.white,
    );

    /// Either the [verticalGroupController] or the [horizontalGroupController]
    /// depending on which radio group we are working with at the moment.
    RadioGroupController radioGroupController;
    if (radioGroupId == RadioGroupId.Vertical) {
      radioGroupController = verticalGroupController;
    } else {
      radioGroupController = horizontalGroupController;
    }

    return Padding(
      padding: const EdgeInsets.only(top: 12.5),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () {
                  radioGroupController.value = null;
                },
                child: Text(
                  "Select None",
                  style: textStyle,
                ),
                style: buttonStyle,
              ),
              SizedBox(
                width: 12.5,
              ),
              TextButton(
                onPressed: () {
                  if (radioGroupId == RadioGroupId.Vertical) {
                    radioGroupController.value = verticalValues.last;
                  } else {
                    radioGroupController.value = horizontalValues.last;
                  }
                },
                child: Text(
                  "Select Last",
                  style: textStyle,
                ),
                style: buttonStyle,
              ),
            ],
          ),
          SizedBox(
            height: 12.5,
          ),
          TextButton(
            onPressed: () {
              setState(() {
                if (radioGroupId == RadioGroupId.Vertical) {
                  verticalValRequested = radioGroupController.value.toString();
                } else {
                  horizontalValRequested =
                      radioGroupController.value.toString();
                }
              });
            },
            child: Text(
              "Fetch Selected",
              style: textStyle,
            ),
            style: buttonStyle,
          ),
        ],
      ),
    );
  }
}

Download Details:

Author: Babincc
Source Code: https://github.com/babincc/flutter_workshop/ 
License: MIT

#flutter #dart #radio 

What is GEEK

Buddha Community

A Widget That Groups Radio Buttons So They Can Work together
Hunter  Krajcik

Hunter Krajcik

1661262300

A Widget That Groups Radio Buttons So They Can Work together

Radio Group

A widget that groups radio buttons so they can work together to give the user a pleasant experience when making selections within the app.

A gif demonstrating the radio group in action.

Installation

In the pubspec.yaml of your flutter project, add the following dependency:

 radio_group_v2: ^1.0.2

Import it to each file you use it in:

 import 'package:radio_group_v2/radio_group_v2.dart';

Usage

Example 1

This example is a very basic, vertical radio group.

RadioGroupController myController = RadioGroupController();

RadioGroup(
  controller: myController,
  values: ["Choice1", "Choice2", "Choice3"],
)

Example 2

This example is a horizontal radio group with some decoration, and it starts with the first button selected.

RadioGroupController myController = RadioGroupController();

RadioGroup(
  controller: myController,
  values: ["Choice1", "Choice2", "Choice3"],
  indexOfDefault: 0,
  orientation: RadioGroupOrientation.Horizontal,
  decoration: RadioGroupDecoration(
    spacing: 10.0,
    labelStyle: TextStyle(
      color: Colors.blue,
    ),
    activeColor: Colors.amber,
  ),
)

Example 3

This example shows how to programmatically select an item using two different methods.

RadioGroupController myController = RadioGroupController();

List<String> items = ["Choice1", "Choice2", "Choice3"];

RadioGroup(
  controller: myController,
  values: items,
)

// Method 1 - Selects a specific item from the list.
myController.value = items[1];

// Method 2 - Selects whatever item is at the given
//            index in the list.
myController.selectAt(2);

Example 4

This example shows how to retrieve the selected value.

RadioGroupController myController = RadioGroupController();

RadioGroup(
  controller: myController,
  values: ["Choice1", "Choice2", "Choice3"],
)

String selected = myController.value.toString();

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add radio_group_v2

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  radio_group_v2: ^1.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:radio_group_v2/radio_group_v2.dart';

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:radio_group_v2/radio_group_v2.dart';

void main() {
  runApp(App());
}

/// This is how this example code will know if we are talking about the vertical
/// radio group example or the horizontal radio group example.
enum RadioGroupId {
  /// The vertical radio group example.
  Vertical,

  /// The horizontal radio group example.
  Horizontal,
}

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  /// The currently selected value of the vertical radio group.
  ///
  /// This one is obtained automatically, thanks to the onChange() method.
  String verticalValAutomatic = "";

  /// The currently selected value of the vertical radio group.
  ///
  /// This one is obtained by clicking the "Fetch Selected" button under the
  /// vertical radio group.
  String verticalValRequested = "";

  /// The currently selected value of the horizontal radio group.
  ///
  /// This one is obtained automatically, thanks to the onChange() method.
  String horizontalValAutomatic = "";

  /// The currently selected value of the horizontal radio group.
  ///
  /// This one is obtained by clicking the "Fetch Selected" button under the
  /// horizontal radio group.
  String horizontalValRequested = "";

  /// The controller for the vertical radio group.
  RadioGroupController verticalGroupController = RadioGroupController();

  /// The controller for the horizontal radio group.
  RadioGroupController horizontalGroupController = RadioGroupController();

  /// The values for the vertical radio group.
  final List<String> verticalValues = [
    "String 1",
    "String 2",
    "String 3",
    "String 4",
    "String 5",
  ];

  /// The values for the horizontal radio group.
  final List<Text> horizontalValues = [
    Text("Widget 1"),
    Text("Widget 2"),
    Text("Widget 3"),
    Text("Widget 4"),
    Text("Widget 5"),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Radio Group"),
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(25.0),
              child: Column(
                children: [
                  selectedValBoard(verticalValAutomatic, verticalValRequested),
                  IntrinsicWidth(
                    child: RadioGroup(
                      controller: verticalGroupController,
                      values: verticalValues,
                      onChanged: (newValue) => setState(() {
                        verticalValAutomatic = newValue.toString();
                      }),
                      decoration: RadioGroupDecoration(
                        labelStyle: TextStyle(
                          color: Colors.blue,
                          fontWeight: FontWeight.w800,
                        ),
                      ),
                    ),
                  ),
                  actionButtons(RadioGroupId.Vertical),
                  Divider(
                    height: 50.0,
                  ),
                  selectedValBoard(
                      horizontalValAutomatic, horizontalValRequested),
                  RadioGroup(
                    controller: horizontalGroupController,
                    values: horizontalValues,
                    orientation: RadioGroupOrientation.Horizontal,
                    indexOfDefault: 0,
                    onChanged: (newValue) => setState(() {
                      horizontalValAutomatic = newValue.toString();
                    }),
                  ),
                  actionButtons(RadioGroupId.Horizontal),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }

  /// This method builds the section at the top of each radio group that shows
  /// which button is selected.
  ///
  /// This shows of the ability to be able to get the selected value in two
  /// different ways.
  Padding selectedValBoard(String automatic, String requested) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 12.5),
      child: Column(
        children: [
          Text("Selected Value"),
          IntrinsicHeight(
            child: Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Column(
                      children: [
                        Text("onChange():"),
                        Text(automatic),
                      ],
                    ),
                  ],
                ),
              ),
              VerticalDivider(
                color: Colors.black,
              ),
              Expanded(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    Column(
                      children: [
                        Text("\"Fetch Selected\" btn:"),
                        Text(requested),
                      ],
                    ),
                  ],
                ),
              ),
            ]),
          )
        ],
      ),
    );
  }

  /// The buttons used to demo the radio groups.
  Padding actionButtons(RadioGroupId radioGroupId) {
    /// Make the buttons blue.
    ButtonStyle buttonStyle = ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith(
        (states) => states.contains(MaterialState.pressed)
            ? Colors.blueAccent
            : Colors.blue,
      ),
      padding: MaterialStateProperty.all(
        EdgeInsets.symmetric(
          horizontal: 16,
          vertical: 8,
        ),
      ),
    );

    /// Make the button text white.
    TextStyle textStyle = TextStyle(
      color: Colors.white,
    );

    /// Either the [verticalGroupController] or the [horizontalGroupController]
    /// depending on which radio group we are working with at the moment.
    RadioGroupController radioGroupController;
    if (radioGroupId == RadioGroupId.Vertical) {
      radioGroupController = verticalGroupController;
    } else {
      radioGroupController = horizontalGroupController;
    }

    return Padding(
      padding: const EdgeInsets.only(top: 12.5),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () {
                  radioGroupController.value = null;
                },
                child: Text(
                  "Select None",
                  style: textStyle,
                ),
                style: buttonStyle,
              ),
              SizedBox(
                width: 12.5,
              ),
              TextButton(
                onPressed: () {
                  if (radioGroupId == RadioGroupId.Vertical) {
                    radioGroupController.value = verticalValues.last;
                  } else {
                    radioGroupController.value = horizontalValues.last;
                  }
                },
                child: Text(
                  "Select Last",
                  style: textStyle,
                ),
                style: buttonStyle,
              ),
            ],
          ),
          SizedBox(
            height: 12.5,
          ),
          TextButton(
            onPressed: () {
              setState(() {
                if (radioGroupId == RadioGroupId.Vertical) {
                  verticalValRequested = radioGroupController.value.toString();
                } else {
                  horizontalValRequested =
                      radioGroupController.value.toString();
                }
              });
            },
            child: Text(
              "Fetch Selected",
              style: textStyle,
            ),
            style: buttonStyle,
          ),
        ],
      ),
    );
  }
}

Download Details:

Author: Babincc
Source Code: https://github.com/babincc/flutter_workshop/ 
License: MIT

#flutter #dart #radio 

HTML Radio Button - Radio Group and Attributes

HTML Radio button is typically used to select a particular option from a group of related options. To define a radio button, we use the element of HTML. When a particular option is selected using a radio button, the other options are deselected i.e., one can only select a single option at a time. It lets the user select from a set of limited options.

HTML Radio Buttons

Syntax of HTML Radio Button:

Radio buttons belonging to a particular category must have the same name. The value of each radio button is not shown to the user but is sent to the server after its selection by the user. It is a good practice to use a

Defining Radio Group in HTML

We can define a group for radio buttons by giving each radio button the same name. As and when the user selects a particular option from this group, other options are deselected.

Following is an example of radio buttons with different names within a form.

<html>
<head>
  <title>Radio Buttons</title>
</head>
<body>
<form>
  <p>Please select your preferred contact method</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email">
    <label for="Choice1">Email</label>
    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="Choice2">Phone</label>
    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="Choice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
</body>
</html>

Output-

HTML Radio Button

Attributes of HTML Radio Group

NameDescriptiontypeSpecifies the type of input, in this case set as ‘radio’.nameSpecifies the name of the control that is delivered to the server.valueSpecifies the value that will be sent to the server, if the radio button is checked.checkedDefines a by default checked radio button.

We should specify the value attribute so that the information is delivered to the server, on form submission. If the value attribute is not specified, the form data assigns a value ‘on’ to the entire radio group (this isn’t a good practice).

Selecting Radio Button by default

If no radio button is selected by the user, no information of the radio buttons is delivered to the server. Hence, it is recommended to use the ‘checked’ state of the radio button and eliminate inefficiency.

<html>
<head>
  <title>Radio Buttons</title>
</head>
<body>
<form>
  <p>Please select your preferred contact method</p>
  <div>
    <input type="radio" id="contactChoice1"
     name="contact" value="email" checked>
    <label for="Choice1">Email</label>
    <input type="radio" id="contactChoice2"
     name="contact" value="phone">
    <label for="Choice2">Phone</label>
    <input type="radio" id="contactChoice3"
     name="contact" value="mail">
    <label for="Choice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
</body>
</html>

Output-

selecting default radio button

If ‘checked’ is put along with every button, the one put later overrides the ones put before it.

CSS and Radio Buttons

We can style radio buttons using CSS3.

<html>
<head>
  <title>Radio Buttons</title>
  <style>
    label {
  margin-right: 15px;
  line-height: 32px;
}
    input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 16px;
  height: 16px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

  position: relative;
  top: 4px;
}
  </style>
</head>
<body>
<form> 
  <p>Please select your preferred contact method:</p>
  <div>
    <input type="radio" id="contactChoice1"
           name="contact" value="email">
    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice2"
           name="contact" value="phone">
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice3"
           name="contact" value="mail">
    <label for="contactChoice3">Mail</label>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>
<pre id="log">
</pre>
</body>
</html>

#html tutorials #html radio button #javascript and radio buttons

Carrie  Keeling

Carrie Keeling

1639162620

Radio-Buttons Widget: Getting Started With matplotlib Widgets

matplotlib, being one of the most popular Python visualization framework, offers a list of interactive widgets you can use to work with your graphs. In this getting started with matplotlib widgets tutorial, I will be showing an example how to use the Radio Buttons widget.

#matplotlib  #widget  #button 

A Flutter Package Whitch Contains Grouped Buttons Like Radio Buttons

flutter_group_button

A flutter package which contains basics grouped buttons like radio buttons and checkboxes

VERSION

[1.0.1]

Table of content

Getting start

To use this package, add flutter_group_button^[version] as a dependency in your pubspec.yaml file

dependencies:
  flutter_group_button: ^1.0.1

Fast Overview

Make sure that dependencie is add to your pubsec.yaml file.

RadioGroup Overview

    RadioGroup(
                  children: [
                    Text("Choice 1"),
                    Text("Choice 2"),
                    Text("Choice 3")
                  ],
                    /// no default selected item
                  defaultSelectedItem: -1,
                  onSelectionChanged: (selection) {
                    /// print the index of the selected item
                    print(selection);
                  })

CheckBoxGroup Overview

    CheckboxGroup(
                  child: {
                    Text("Choice 1"): false,
                    Text("Choice 2"): true,
                    Text("Choice 3"): false
                  },
                  ///  
                  onNewChecked: (l) {
                    /// print a list of the checked item name
                    print(l);
                  })

General info

Illustration

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

RadioGroup

The RadioGroup has many arguments for more flexibility which are optional. You can implements theme for your needs. Important to know that both the radio button and the radio's label are clickable

RadioGroup parameters list

 groupItemsAlignment,
 onSelectionChanged,
 defaultSelectedItem = 0,
 children,
 textBeforeRadio = true,
 padding = const EdgeInsets.all(0),
 margin = const EdgeInsets.all(0),
 activeColor,
 focusColor,
 hoverColor,
 textBelowRadio = true,
 priority = RadioPriority.textBeforeRadio,
 mainAxisAlignment = MainAxisAlignment.start,
 internMainAxisAlignment = MainAxisAlignment.start,
 

RadioGroup parameters details

(@Required) means that the argument is required by the Widget to work properly

Important to know there is only 3 required parameters for RadioGroup to work
they are:
    groupItemsAlignment,
    children,
    onSelectionChanged,

(@Optional) means that the argument is not required by the RadioGroup to work

(@Required)

groupItemsAlignment

The alignment of the RadioGroup Items. It can be GroupItemsAlignment.row for row alignment or GroupItemsAlignment.column for column alignment. Note that according to its value and the parent of the RadioGroup, you will have to play with both mainAxisAlignment and internalMainAxisAlignment to make the RadioGroup be at the right place

(@Required)

children

The item or the list of the items label of the RadioGroup. You can pass any widget or list of widget you want but It's good to pass a Text widget or a list of Text widget like shown
here. Note that you can add a Style to the Text or use any widget you want.

(@Required)

onSelectionChanged

Callback called when the selected item changed it returns the index of the selected radio button. Note that the index start at 0.

(@Optional)

defaultSelectedItem

(int): Is the default item to select for the RadioGroup. By default the first item is selected. Note that the index begin at 0. If you don't want any item to be selected, just give a negative value to it.

(@Optional)

padding

(EdgeInsetsGeometry): Empty space to inscribe inside the RadioGroup.

(@Optional)

textBeforeRadio

(bool) which tells if the items label must come before or after the radio button. By default it's set to true. if you want the opposite, just set it to false

(@Optional)

textBelowRadio

(bool): which tells if the item's label must be below or above the Radio. By default, it's set to true. If you want the opposite, just set it to false. One thing to take in consideration, the item's label can not be before and below the radio at the same time. it can only be (before of after the radio button depending on the textBeforeRadio's value) or (below or above the radio button depending on the textBelowRadio's value), so there is a priority to respect.

(@Optional)

priority

(RadioPriority) which tells if the [textBeforeRadio] is important or not than [textBelowRadio]. it can take two values (RadioPriority.textBeforeRadio or RadioPriority.textBelowRadio). By default, textBeforeRadio is important than textBelowRadio

(@Optional)

margin

(EdgeInsetsGeometry) Empty space to surround the the RadioGroup items.

(@Optional)

mainAxisAlignment)

(MainAxisAlignment) The main axis alignment of the RadioGroup. Depending on the container of the RadioGroup parent, you could need it or not.

(@Optional)

internMainAxisAlignment

(MainAxisAlignment): the internal axis alignment of the RadioGroup. You can control the main axis alignment of the radio button and its label. Depending on the RadioGroup parent, you can have to play with both mainAxisAlignment and this internalRadioAxisAlignment

(@Optional)

focusColor

(Color): The color for the radio's [Material] when it has the input focus.

(@Optional)

hoverColor;

(Color): The color for the radio's [Material] when a pointer is hovering over it.

(@Optional)

activeColor

(Color): The color to use when this radio button is selected. Defaults to [ThemeData.toggleableActiveColor].

Short illustration

  import 'package:flutter_group_button/flutter_group_button';  
   
 
  RadioGroup(
              children: [
                Text("Choice 1"),
                Text("Choice 2"),
                /// fell free to add a textStyle or change the Text to Cupertino
                /// Text widget
                Text("Choice 3")
              ],
              //to indicate that there is no default selected item
              defaultSelectedItem: -1,
              onSelectionChanged: (selection) {
                print(selection);
              })

This is the result of the code above

CheckboxGroup

The CheckboxGroup has many arguments for more flexibility which are optional. You can implements theme for your needs. Important to know that both the checkbox button and the checkbox's label are clickable

CheckBoxGroup parameters list

child,
onNewChecked,
activeColor,
focusColor,
hoverColor,
checkColor,
priority = CheckboxPriority.textBeforeCheckbox,
groupItemsAlignment,
padding = const EdgeInsets.all(0),
margin = const EdgeInsets.all(0),
textBeforeCheckbox = true,
textBelowCheckBox = true,
mainAxisAlignment = MainAxisAlignment.start,
internMainAxisAlignment = MainAxisAlignment.start,

Checkbox parameters details

(@Required) means that the argument is required by the Widget to work properly

Important to know, there is only 3 required parameters for CheckboxGroup to work.
They are : 
    groupItemsAlignment,
    child,
    onNewChecked,

(@Optional) means that the argument is not required by the Widget to work

groupItemsAlignment (@Required);

(GroupItemsAlignment): The alignment of the CheckboxGroup Items. It can be GroupItemsAlignment.row for row alignment or GroupItemsAlignment.column for column alignment. Note that according to its value and the parent of the RadioGroup, you will have to play with both mainAxisAlignment and internalRadioAxisAlignment to make the RadioGroup be right place

child (@Required)

(Map<Text, bool)): The items of the CheckboxGroup.
here is short illustration. Note that you can add a Style to the Text.

onNewChecked (@Required)

A callback to notify that a new check box is checked Return a list of checked items. Note That only the item's label (String) is returned

padding (@Optional);

(EdgeInsetsGeometry): Empty space to inscribe inside the CheckboxGroup.

textBeforeCheckbox (@Optional)

(bool): tells if the items label must come before or after the checkbox. By default it's set to true. if you want the opposite, just set it to false

textBelowCheckbox (@Optional);

(bool): tells if the item's label must be below or above the checkbox. By default, it's set to true. If you want the opposite, just set it to false. One thing to take in consideration, the item's label can not be before and below the checkbox at the same time. it can only be (before of after the checkbox depending on the textBeforeCheckbox's value) or (below or above the checkbox depending on the textBelowCheckbox's value), so there is a priority to respect.

priority (@Optional)

(CheckboxPriority): tells if the [textBeforeCheckbox] is important or not than [textBelowCheckbox]. it can take two values (CheckboxPriority.textBeforeCheckbox or CheckboxPriority.textBelowCkeckbox). By default, textBeforeCheckbox is important than textBelowCheckbox

margin (@Optional)

(EdgeInsetsGeometry): Empty space to surround the the RadioGroup items.

mainAxisAlignment (@Optional)

(MainAxisAlignment): The main axis alignment of the CheckboxGroup. Depending on the container of the CheckboxGroup parent, you could need it or not.

internMainAxisAlignment (@Optional)

(MainAxisAlignment): the internal axis alignment of the CheckboxGroup. You can control the main axis alignment of the checkbox and its label. Depending on the CheckboxGroup parent, you can have to play with both mainAxisAlignment and this internalRadioAxisAlignment

focusColor (@Optional)

(Color): The color for the checkbox's [Material] when it has the input focus.

hoverColor (@Optional)

(Color): The color for the checkbox's [Material] when a pointer is hovering over it.

activeColor (@Optional)

(Color): The color to use when the checkbox is checked. Defaults to [ThemeData.toggleableActiveColor].

checkColor (@Optional)

Color) The color to use for the check icon when this checkbox is checked. Defaults to Color(0xFFFFFFFF)

Checkbox short illustration

 Center(
          child: CheckboxGroup(
              child: {
                Text("Choice 1"): false,
                Text("Choice 2"): true,
                Text("Choice 3"): false
              },
              groupItemsAlignment: GroupItemsAlignment.column,
              mainAxisAlignment: MainAxisAlignment.center,
              internMainAxisAlignment: MainAxisAlignment.center,
              priority: CheckboxPriority.textBeforeCheckbox,
              onNewChecked: (l) {
                print(l);
              })
      ),

This is the result of the code above

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_group_button

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_group_button: ^1.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_group_button/flutter_group_button.dart'; 

example/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_group_button/flutter_group_button.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter group button demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'RadioGroup demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);
  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Column(
        children: [
          Center(
              child: RadioGroup(
                  children: [
                    Text("Choice 1"),
                    Text("Choice 2"),
                    /// fell free to add a textStyle or change the Text to Cupertino
                    /// Text widget
                    Text("Choice 3")
                  ],
                  groupItemsAlignment: GroupItemsAlignment.column,
                  mainAxisAlignment: MainAxisAlignment.center,
                  internMainAxisAlignment: MainAxisAlignment.center,
                  /// In reality this is not needed
                  priority: RadioPriority.textBeforeRadio,
                  defaultSelectedItem: -1,
                  onSelectionChanged: (selection) {
                    print(selection);
                  })
          ),

          Center(
              child: CheckboxGroup(
                  child: {
                    Text("Choice 1"): false,
                    Text("Choice 2"): true,
                    Text("Choice 3"): false
                  },
                  onNewChecked: (l) {
                    print(l);
                  })
          ),
        ],
      ),
    );
  }
} 

Download Details:

Author: stMerlHin

Source Code: https://github.com/stMerlHin/flutter_group_button

#flutter #radio #button 

Alice Cook

Alice Cook

1614329473

Fix: G Suite not Working | G Suite Email not Working | Google Business

G Suite is one of the Google products, developed form of Google Apps. It is a single platform to hold cloud computing, collaboration tools, productivity, software, and products. While using it, many a time, it’s not working, and users have a question– How to fix G Suite not working on iPhone? It can be resolved easily by restarting the device, and if unable to do so, you can reach our specialists whenever you want.
For more details: https://contactforhelp.com/blog/how-to-fix-the-g-suite-email-not-working-issue/

#g suite email not working #g suite email not working on iphone #g suite email not working on android #suite email not working on windows 10 #g suite email not working on mac #g suite email not syncing