How to cross out text through button click with Flutter - flutter

Hey I want to do a checklist, if you click on the check button, the line should be crossed out.
By now I figured the decoration out to which the Textstyle should change. I have now two problems I don't really know how to add the button in the body of the list tile, next to the text & I don't really understand how I could add the button functionality
style: TextStyle(decoration: TextDecoration.lineThrough))
This is the relevant code
body: ListTile(
title: Text(info.expandedValue, //here should the textstyle change based on the click
),
subtitle: Text("Drücke auf den Mülleimer, um diesen Abschnitt bis zum Neustart der App zu löschen"),
trailing: Icon(Icons.delete),
onTap: () {
setState(() {
infos.removeWhere((currentInfo) => info ==currentInfo);
});
},
),
Thanks for your suggestions!

Assuming your model has some boolean attribute completed you could use a ListTile witha CheckBox.
ListTile(
leading: Checkbox(
value: info.completed,
onChanged: (value) {
setState(() {
// Here you toggle the checked item state
infos.firstWhere((currentInfo) => info==currentInfo)..completed=value;
});}
),
title: Text(info.description,
style: TextStyle(decoration: info.completed?TextDecoration.lineThrough:null))),
),

Related

How to make a container as a radio button in Flutter and make sure it doesn't deselect

I have used a package group_button 4.2.1 but once i select the textfields the radio buttons deselect and i have to select again, i have tried using the controller property of the Widget but i didn't get it to work.
I was thinking if i can make a container from scratch that is a radio button and can retain the value once i finish filling the form to be submitted to my firestore database.
You can use List of button text and keep tract of selectedIndex.
Run on dartPad
int? _selectedValueIndex;
List<String> buttonText = ["ForSale", "For rent"];
Widget button({required String text, required int index}) {
return InkWell(
splashColor: Colors.cyanAccent,
onTap: () {
setState(() {
_selectedValueIndex = index;
});
},
child: Container(
padding: const EdgeInsets.all(12),
color: index == _selectedValueIndex ? Colors.blue : Colors.white,
child: Text(
text,
style: TextStyle(
color: index == _selectedValueIndex ? Colors.white : Colors.black,
),
),
),
);
}
Inside build method to use this,
Row(
children: [
...List.generate(
buttonText.length,
(index) => button(
index: index,
text: buttonText[index],
),
)
],
),

On web, how do I control the visibility icon that automatically appears on a focused TextFormField that has an obscureText property set to true?

Here's my code for the password field:
TextFormField(
obscureText: isObscure,
decoration: InputDecoration(
suffix: TextButton(
child: isPasswordObscure
? Text(
'Show',
style: TextStyle(color: Colors.grey),
)
: Text(
'Hide',
style: TextStyle(color: Colors.grey),
),
onPressed: () {
setState(() { isObscure = !isObscure; });
},
),
),
)
If I run it, the password field would look like this:
If you review my code, I only specified a text button and not an icon as the suffix. The visibility icon was added by Flutter Edge and when I click on it, it only changes its icon and does not unobscure or obscure the text field.
What I want to know is how do I change or remove the icon? And maybe also give it a callback so it knows what to do when I click on it.
The problem doesn't exist on mobile, only on browsers desktop Edge.
Edit:
I tried setting suffix and suffixIcon to null but the visibility icon is still showing.
Update: I've discovered that the problem only exists on MS Edge.
If you wants to turn off the visibility icon set onPressed: () {},
also if you want to remove the visibility icon form overview wrap it with opacity widget
Opacity(
opacity: 0.0,
child: textButton(),
Please find the below code sample to include the visibility option for the textField. by including a variable _isObscured in a stateful widget. we have implemented it with the auto obscure after 2 second delay.
Center(child: TextField(
obscureText: _isObscured,
decoration : InputDecoration(
suffix:InkWell(
onTap: (){
setState(() => this._isObscured =
!this._isObscured);
Future.delayed(Duration(seconds: 2), (){
setState(() => this._isObscured =
!this._isObscured);
});
},
child: Icon( Icons.visibility),
),
),
),
),
),
I found a solution:
// the magic function
void fixEdgePasswordRevealButton(FocusNode passwordFocusNode) {
passwordFocusNode.unfocus();
Future.microtask(() {
passwordFocusNode.requestFocus();
js.context.callMethod("fixPasswordCss", []);
});
}
// widget code
child: TextField(
onChanged: (_) async {
fixEdgePasswordRevealButton(passwordFocusNode);
},
focusNode: passwordFocusNode,
obscureText: true,
// end of index.html
window.fixPasswordCss = () => {
let style = document.createElement('style');
style.innerHTML = '::-ms-reveal { display: none; }';
document.head.appendChild(style);
}
</script>
</body>
Also posted on the relevant issue.

Flutter: How can I change the Alignment of a Text in a Textfield programmatically via buttons?

I am new to flutter and trying to build some basic text editing options like in word. That means, bold, italic, underlined and so on...
I am currently struggling building those three buttons for left, centered and right text alignment.
I´ve tried to build them the same way as I did with bold and so one;
bool isBold = false;
Button:
_NoteButton(Icons.format_bold, Colors.green, () => setState(() => isBold = !isBold)),
In the TextField:
style: new TextStyle(fontWeight: isBold ? FontWeight.bold : FontWeight.normal),
the problem I have is that i only have "one" TextAlignment line for three Alignments, so it´s not possible to do it exactly the same way as with bold or italic.
It would really help if you could share your code of three buttons to align the text on the left, in the center and on the right in a textfield.
Thank you!
Declare a variable,
TextAlign _align;
Then use three buttons in a row,
Row(
children: <Widget>[
FlatButton(
onPressed: () {
setState(() {
_align = TextAlign.left;
});
},
child: Text('Align left'),
),
FlatButton(
onPressed: () {
setState(() {
_align = TextAlign.center;
});
},
child: Text('Align center'),
),
FlatButton(
onPressed: () {
setState(() {
_align = TextAlign.right;
});
},
child: Text('Align right'),
),
],
);
Then in your Text widget,
Text('Align right', textAlign: _align)

Remove Switch Toggle padding in Flutter

I would like to remove switch toggle paddings (left and right) in Flutter but I don't find the class property.
Do you have an idea how to do it ?
see toggle button
ListTile(
leading: Switch(
value: _con.user.isAvailable,
onChanged: (bool value) {
setState(() {
_con.user.isAvailable = value;
updateAvailability(_con.user);
});
},
),
title: Text(
(_con.user.isAvailable)
? S.of(context).availability
: S.of(context).unavailability,
style: Theme.of(context).textTheme.subhead,
),
),
Thank you.
I can't see any padding there but can you try this
MediaQuery.of(context).removePadding()
For ListTile you can try
ListTile(
contentPadding: EdgeInsets.zero,
)

set custom height and width to sweat-alert

I have applied sweetalert in my project my application is in landscape direction and sweetalert take the full screen I want to set custom width and height to sweetalert.
SweetAlert.show(context,
title: "Just show a message",
subtitle: "Sweet alert is pretty",
style: SweetAlertStyle.confirm,
showCancelButton: true, onPress: (bool isConfirm) {
if (isConfirm) {
SweetAlert.show(context,style: SweetAlertStyle.success,title: "Success");
// return false to keep dialog
return false;
}
});
There is no any option according to my assessment for your question. but I think rflutter_alert is the best option to use instead of sweetalert here you can use the width and height to customize it. Hope that will help you. you can add multiple buttons in buttons: [],
import 'package:rflutter_alert/rflutter_alert.dart';
Alert(
context: context,
type: AlertType.error,
title: "RFLUTTER ALERT",
desc: "Flutter is more awesome with RFlutter Alert.",
buttons: [
DialogButton(
child: Text(
"COOL",
style: TextStyle(color: Colors.white, fontSize: 20),
),
onPressed: () => Navigator.pop(context),
width: 120,
)
],
).show();
Okay, wrap your string with three quote (''' String '''), Add space or new lines what you want base on your expected height.
https://api.dartlang.org/stable/2.5.0/dart-core/String-class.html
SweetAlert.show(
context,
title: '''
Just show a message
''',
subtitle: '''
Sweet alert is pretty
''',
style: SweetAlertStyle.confirm,
showCancelButton: true,
onPress: (bool isConfirm) {
if (isConfirm) {
SweetAlert.show(context,
style: SweetAlertStyle.success, title: "Success");
// return false to keep dialog
return false;
}
},
);