Enable Button on flutter only if Checkbox is " checked" - flutter

Question

Hello guys I have registration form with checkbox to be enabled in order to allow registration.
I need my user to do checkbox checked to have button enabled otherwise an tooltip will be shown.. like... " u need to accept terms and condition to register... "
This is the part of the CheckBox:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Theme(
data: ThemeData(unselectedWidgetColor: Colors.white,),
child: Checkbox(
focusColor: Colors.lightBlue,
activeColor: Colors.orange,
value: rememberMe,
onChanged: (newValue) {
setState(() {
rememberMe = (newValue);
});
},
),
),
RichText(
text: TextSpan(children: [
TextSpan(
text: 'Accetto le condizioni e ',
style: TextStyle(fontSize: 10),
),
TextSpan(
text: 'il trattamento dei dati personali ',
style: TextStyle(fontSize: 10,decoration: TextDecoration.underline,),
),
]),
)
],
),
and this the "registration Button"
ButtonTheme(
minWidth: 100,
height: 50.0,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 10,
onPressed: () async {
setState(() {
showSpinner = true;
});
try {
final newUser =
await _auth.createUserWithEmailAndPassword(
email: email, password: password);
if (newUser != null) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
}
setState(() {
showSpinner = false;
});
} catch (e) {
print(e);
}
},
color: Color(0xFF1f2032),
child: Text(
'SIGNUP',
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
),

Answer 1

There are certain things which I would like to give you an insight about. Which will help you surely, so follow along.
Pointers
Read upon Flutter Form and it's Validation, which answers your question on showing up the error message under your forms for the validations
One very useful widget to achieve what you want is Flutter Tooltip Unfortunately, you cannot bring up the tooltip which you wanted to do programmatically
Workaround: Do use any of these to show up you message
Snackbar Flutter
Flutter AlerDialog
Simply show up a text, like a validator for the form under the checkbox like I will demonstrate in the code for you
Now, I have demonstrated both of them in this code, but the code is not similar. It would be enough to you let you know the best practices you can do along with your tooltip message showcase
Please note: To make a tooltip like structure using Container(), you can follow this answer, will help you in a great extent
class _MyHomePageState extends State<MyHomePage> {
bool rememberMe = false;
// this bool will check rememberMe is checked
bool showErrorMessage = false;
//for form Validation
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: TextFormField(
validator: (value) {
// retiurning the validator message here
return value.isEmpty ? "Please enter the message" : null;
}
)
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Accept Terms & Conditions'),
SizedBox(width: 20.0),
Checkbox(
focusColor: Colors.lightBlue,
activeColor: Colors.orange,
value: rememberMe,
onChanged: (newValue) {
setState(() => rememberMe = newValue);
}
)
]
),
// based up on this bool value
showErrorMessage ?
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(80.0)
),
child: Padding(
padding: EdgeInsets.all(10.0),
child: Text('Please accept the terms and conditions to proceed...')
)
)
: Container(),
SizedBox(height: 20.0),
RaisedButton(
child: Text('Submit'),
onPressed: (){
// for your form validation
if(_formKey.currentState.validate()){
// do your success operation here!
// checking for the rememberValue
// and setting the message bool data
if(rememberMe != true)
setState(() => showErrorMessage = true);
else
setState(() => showErrorMessage = false);
}
}
)
]
)
)
);
}
}
How it works?
It will first check whether the form is empty, if it not, then checks whether the checkbox is empty or not
Fun Fact
You can use the above logic or bool showErrorMessage, to show anything, be it, SnackBar, AlertDialog or the message which I showed in the above code.
Result

Answer 2

You need to pass null to the onPressed of a Button to make it disabled. So you'll need to pass null to the onPressed of the RaisedButton when rememberMe is false.
ButtonTheme(
minWidth: 100,
height: 50.0,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5.0),
),
elevation: 10,
onPressed: rememberMe ? () async {
setState(() {
showSpinner = true;
});
try {
final newUser =
await _auth.createUserWithEmailAndPassword(
email: email, password: password);
if (newUser != null) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
}
setState(() {
showSpinner = false;
});
} catch (e) {
print(e);
}
} : null, // make it null if false
color: Color(0xFF1f2032),
child: Text(
'SIGNUP',
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
),