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