Flutter checkbox unwanted touch space - checkbox

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),
)
],
),

Answer 1

Use SizedBox
The widget is basically made for resizing its child.
SizedBox(
width: 15,
height: 15,
child: Checkbox(value: false, onChanged: null)
)

Answer 2

EDIT
Short Answer
Checkbox(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
...
)
..................
Long Answer
You can achieve this by customising the Checkbox widget.
Create a CustomCheckbox using the exact code from
flutter/packages/flutter/lib/src/material/checkbox.dart.
Add a new field to your CustomCheckbox widget
final bool useTapTarget;
Make sure to add the new field to your constructor with it default
value set to true.
this.useTapTarget = true
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);
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),
)

Answer 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.