Flutter checkbox unwanted touch space

Question

I tried to create a login screen using flutter, there I added remember me checkbox, but I could not align it correctly,

Flutter checkbox took unwanted space around itself, for the provide good touch user experience.

This is the how my layout show,

Check below code,

        new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  new Row(
                    children: <Widget>[
                      new Checkbox(
                        activeColor: Colors.grey,
                        value: _isChecked,
                        onChanged: (bool value) {
                          _onChecked(value);
                        },
                      ),
                      new GestureDetector(
                        onTap: () => print("Remember me"),
                        child: new Text(
                          "Remember me",
                          style: new TextStyle(color: Colors.white70),
                        ),
                      )
                    ],
                  ),
                  new Text(
                    "Forgot password ?",
                    style: new TextStyle(color: Colors.white70),
                  )
                ],
              ),

Solution 1

EDIT

Short Answer

Checkbox(
   materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    ...
 )

..................

Long Answer

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 your custom 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),
         )
   

Solution 2

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

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

Solution 3

Try this then,

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.