Flutter checkbox unwanted touch space Flutter checkbox unwanted touch space dart dart

Flutter checkbox unwanted touch space


Use SizedBox
The widget is basically made for resizing its child.

SizedBox(    width: 15,    height: 15,    child: Checkbox(value: false, onChanged: null))


Try this then,

demo

import 'package:flutter/material.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return new MaterialApp(      title: 'NonStopIO',      theme: new ThemeData(        primarySwatch: Colors.red,      ),      home: new MyHomePage(),    );  }}class MyHomePage extends StatefulWidget {  @override  _MyHomePageState createState() => new _MyHomePageState();}class _MyHomePageState extends State<MyHomePage> {  bool _rememberMeFlag = false;  @override  Widget build(BuildContext context) {    return new Scaffold(      appBar: new AppBar(        title: new Text('NonStopIO'),      ),      body: new Container(        color: Colors.black38,        child: new Column(          mainAxisAlignment: MainAxisAlignment.center,          children: <Widget>[            new Container(              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),              color: Colors.white70,              height: 50.0,            ),            new Container(              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),              color: Colors.white70,              height: 50.0,            ),            new Container(                margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 20.0),                child: new Row(                  mainAxisAlignment: MainAxisAlignment.spaceBetween,                  children: <Widget>[                    new Row(                      children: <Widget>[                        new GestureDetector(                          child: new Row(                            children: <Widget>[                              new Checkbox(                                value: _rememberMeFlag,                                onChanged: (value) => setState(() {                                      _rememberMeFlag = !_rememberMeFlag;                                    }),                              ),                              new Text(                                "Remember me",                                style: new TextStyle(color: Colors.white70),                              )                            ],                          ),                          onTap: () => setState(() {                                _rememberMeFlag = !_rememberMeFlag;                              }),                        ),                      ],                    ),                    new Container(                      margin: new EdgeInsets.only(right: 15.0),                      child: new Text(                        "Forgot password ?",                        style: new TextStyle(color: Colors.white70),                      ),                    )                  ],                )),            new Container(              margin: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 35.0),              color: Colors.orange,              height: 50.0,            ),          ],        ),      ), // This trailing comma makes auto-formatting nicer for build methods.    );  }}

Here, I have adjusted the margin to align the Checkbox and Forgot password Text.


You can achieve this by customising the Checkbox widget.

  1. Create a CustomCheckbox using the exact code from flutter/packages/flutter/lib/src/material/checkbox.dart.
  2. Add a new field to your CustomCheckbox widget

         final bool useTapTarget;
  3. Make sure to add the new field to your constructor with it default value set to true.

         this.useTapTarget = true
  4. Modify the build method in the _CheckboxState method. Add this block of code above the return call.

         Size noTapTargetSize = Size(CustomCheckbox.width,      CustomCheckbox.width);     final BoxConstraints additionalConstraints =      BoxConstraints.tight(widget        .useTapTarget? size : noTapTargetSize);
  5. Finally, use your CustomCheckbox widget in your code, and set yourcustom field to false to remove material padding. example

    Container(        margin: EdgeInsets.only(right: 15),        child:CustomCheckbox(            value: _checked,            materialTapTargetSize: null,            onChanged: _onCheckBoxChange,            useTapTarget: false,            activeColor: Colors.teal),      )

Screenshot