Skip to content

Instantly share code, notes, and snippets.

@marcusedu
Created January 29, 2019 20:51
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save marcusedu/9d53751f3a382805e6f4bc302b260cd4 to your computer and use it in GitHub Desktop.
Save marcusedu/9d53751f3a382805e6f4bc302b260cd4 to your computer and use it in GitHub Desktop.
Flutter Checkbox com label
import 'package:flutter/material.dart';
class AppCheckbox extends StatelessWidget {
final String label;
final bool value;
final ValueChanged<bool> onChanged;
final TextStyle labelStyle;
const AppCheckbox(
{Key key, this.label, this.value, this.onChanged, this.labelStyle})
: super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
onChanged(!value);
},
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Checkbox(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
value: value,
onChanged: onChanged,
activeColor: Theme.of(context).primaryColor),
Text(label, style: labelStyle),
],
),
),
);
}
}
@devconductor125
Copy link

When click label, I want to add click event handler

@marcusedu
Copy link
Author

just add some color to the container in line 19

@wispborne
Copy link

wispborne commented Feb 25, 2024

Here is an updated version for Dart 3.

import 'package:flutter/material.dart';

class CheckboxWithLabel extends StatelessWidget {
  final String label;
  final bool value;
  final ValueChanged<bool?> onChanged;
  final TextStyle? labelStyle;

  const CheckboxWithLabel(
      {super.key, required this.label, required this.value, required this.onChanged, this.labelStyle});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        onChanged(!value);
      },
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Checkbox(materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, value: value, onChanged: onChanged),
          Padding(
            padding: const EdgeInsets.only(left: 8.0, bottom: 2),
            child: Text(label, style: labelStyle),
          ),
        ],
      ),
    );
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment