I am wanting an action to happen when a specific icon is pressed. I am currently trying to do it by getting the icon data information and using an if statement:
child: new CircleButton(
onTap: () {
if(IconData==Icons.control_point){
print("hello");
}
},
iconData: _iconsDaily[index]
),
And I am declaring my icons:
#override
Widget build(BuildContext context) {
List<IconData> _iconsDaily = [
Icons.shopping_cart,
Icons.cake_rounded,
Icons.card_giftcard,
Icons.control_point,
];
However IconData==Icons.control_point are unrelated types and so I am unsure how to compare these. Any help would be appreciated thanks.
If you're trying to check the iconData that belongs to the CircleButton, you should do it like this
child: new CircleButton(
onTap: () {
if( _iconsDaily[index] == Icons.control_point){
print("hello");
}
},
iconData: _iconsDaily[index]
)
Related
The data unLockCard is properly created in the main class where the button is placed.
When I moved the button to a dialog in a different class - the unLockCard is lost. I receive the error message
What is the best way to pass on unLockCard[number] = tarots[0]; into a different widget or class.
Homepage
List<bool> flips = [false, false, false, false];
List tarots = [];
List unLockCard = [];
Widget _buildTarotCard(key, number, title) {
return Column(
children: [
FlipCard(
key: key,
flipOnTouch: true,
front: GestureDetector(
onTap: () {
tarots.shuffle();
key.currentState.toggleCard();
setState(() {
flips[number] = true;
});
unLockCard[number] = tarots[0];
tarots.removeAt(0);
},
Dialog
Widget _showDialog(BuildContext context) {
Future.delayed(Duration.zero, () => showAlert(context));
return Container(
color: Color(0xFF2C3D50),
);
}
void showAlert(BuildContext context) {
List unLockCard = [];
Dialogs.materialDialog(
color: colorTitle,
msg: 'Congratulations, you won 500 points',
msgStyle: TextStyle(color: Colors.white),
title: 'Congratulations',
titleStyle: TextStyle(color: Colors.white),
lottieBuilder: Lottie.asset('assets/lottie/spirituality.json',
fit: BoxFit.contain,
),
dialogWidth: kIsWeb ? 0.3 : null,
context: context,
actions: [
NeumorphicButton(
onPressed: () => Get.toNamed(Routes.DETAILS,
arguments: unLockCard.sublist(0, 4)),
margin: EdgeInsets.symmetric(horizontal: 8.0),
The code is a bit cluttered. You are building a new List unLockCard = []; in the showAlert() method even though you have one already in the HomePage. I suggest you create a CardController class that deals with everything card related and use it in all the views you need. One very elegant way I found is by using the GetX library (https://github.com/jonataslaw/getx). You can declutter your code using a GetView and a GetController (https://github.com/jonataslaw/getx#getview). However, if you don't want to add a new library to your project, you can achieve the same results by having a single point that deals with card actions (i.e. holds a single instance of the unlockCard list and updates it accordingly).
I'am trying to change an icon image onPressed here is my code. and based on the selected value before and after onPressed it should be working
Thanks for your help.
IconButton(
onPressed: () {
print(selected);
setState(() {
selected = true;
});
print(selected);
},
icon: CircleAvatar(
backgroundImage: NetworkImage(
'https://lh3.googleusercontent.com/zrvgBfLZl94O6yJ_BlEInCIopvsokkrrrpBmVcByKwLSmacEV6B1P-SJA6eKP84ibOjFpA=s26'),
child: selected == false
? Image.asset(
'assets/images/Icon ionic-ios-heart-empty.png')
: Image.asset(
'assets/images/Icon ionic-ios-heart.png'),
),
),
),
Make sure that your selected boolean is defined outside the Widget build method. Because it seems that it's not changing.
Also try changing selected =true => selected=!selected.
If the print statement is working, then it's most likely that you defined selected under Widget build.
Don't do this:
Widget build(BuildContext context) {
bool selected =false;
return IconButton(...etc
Do this:
bool selected =false;
Widget build(BuildContext context) {
return IconButton(...etc
my objective is this. When clicked on the title property I want to change its property.
I have attached a gif of the problem I am facing.
code demo
class _MyHomePageState extends State<MyHomePage> {
Icon _searchIcon = Icon(Icons.search, size: 40);
Icon _searchIcon2 = Icon(Icons.alarm, size: 40);
void _searchPressed() {
setState(() {
if (this._searchIcon.icon == Icons.search) {
this._searchIcon = _searchIcon2;
} else {
this._searchIcon = Icon(Icons.search);}});}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: _searchIcon,
onPressed: _searchPressed,
),
title: IconButton(
icon: _searchIcon,
onPressed: () => _searchPressed,),),);}}
As what #CopsOnRoad have suggested, it should be either
onPressed: _searchPressed
or
onPressed: () => _searchPressed()
The reason why onPressed: () => _searchPressed didn't work is beacause the anonymous function you just passed into onPressed property is only returning _searchPressed blueprint without actually running the function. So in essence, it's not doing anything other than just giving the onPressed property the blueprint of that _searchPressed function itself.
Hence why the code below work, because you actually put the function _searchPressed into the onPressed property correctly
onPressed: _searchPressed
In your title's IconButton,
Instead of
onPressed: () => _searchPressed
Use
onPressed: _searchPressed
or
onPressed: () => _searchPressed()
there's no named parameters to configure a single tap to trigger Tooltip,
my feeling about the default longPress interaction is that users cannot find this deep-buried function.
I tried to find some hint in tooltip source code but failed.
Tooltip(
message: 'this is something',
child: SizedBox(...),
)
First, define globalkey: GlobalKey _toolTipKey = GlobalKey();
Then wrap your tooltip:
GestureDetector(
onTap: () {
final dynamic _toolTip = _toolTipKey.currentState;
_toolTip.ensureTooltipVisible();
},
child: Tooltip(
key: _toolTipKey,
message: "Your message",
child: Icon(
Icons.info,
),
),
),
Easiest way is to use:
triggerMode: TooltipTriggerMode.tap
Here's an example:
Tooltip(
triggerMode: TooltipTriggerMode.tap,
message: 'this is something',
child: SizedBox(...),
)
The easiest way to get a functionality you need is to clone the original Tooltip widget (call it e.g. TooltipCustom) and change inner GestureDetector behavior.
Particularly replace onLongPress to onTap:
class TooltipCustom extends StatefulWidget {
/// Creates a tooltip.
...
#override
Widget build(BuildContext context) {
...
Widget result = GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: _handleLongPress,
excludeFromSemantics: true,
child: Semantics(
label: excludeFromSemantics ? null : widget.message,
child: widget.child,
),
);
...
return result;
}
}
P.S. It's possible to lose a tooltip hiding feature. Take a look at _handlePointerEvent(PointerEvent event) handler function and realize a proper call of _hideTooltip() method.
I'd like to use an IconPicker where the user can search for an Icon and select it.
If I search for "arrow" it would give me: arrow_upward, arrow_back, arrow_back_ios and so on.
Can you link me a library that can do this? or give an idea of how I can accomplish that?
I've looked everywhere, the only one I could find it was this: https://pub.dev/packages/flutter_picker.
But it doesn't have the search option.
I just published the exact package you need here:
https://pub.dev/packages/flutter_iconpicker
have fun :)
So this one does not have a search, but may help others looking for a icon picker in Flutter. This was something I was dreading making myself but ended up being relatively easy.
IconPicker Widget:
import 'package:flutter/material.dart';
class IconPicker extends StatelessWidget {
static List<IconData> icons = [
Icons.ac_unit,
Icons.access_alarm,
Icons.access_time,
// all the icons you want to include
];
#override
Widget build(BuildContext context) {
return Wrap(
spacing: 5,
children: <Widget>[
for (var icon in icons)
GestureDetector(
onTap: () => Navigator.pop(context, icon),
child: Icon(icon),
)
],
);
}
}
Example usage in a dialog:
Future<void> _showIconPickerDialog() async {
IconData iconPicked = await showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text(
'Pick an icon',
style: TextStyle(fontWeight: FontWeight.bold),
),
content: IconPicker(),
);
},
);
if (iconPicked != null) {
debugPrint('Icon changed to $iconPicked');
setState(() {
myObject.icon = iconPicked;
});
}
}
Here is a full list of all Flutter material icons in a list:
https://github.com/NedWilbur/FlutterIconList/blob/master/icons.dart