i want customized action button like second screen on flutter local push notification, getting first screen now - notifications

i want button with border and color like second screen
there i can use icon using AndroidBitmap but dont know how to add image to my icon.
.
![first screen i am getting button like second i want[][1]][1])
RemoteNotification? notification = message.notification;
AndroidNotification? android = message.notification?.android;
if (notification != null && android != null && !kIsWeb) {
flutterLocalNotificationsPlugin.show(
notification.hashCode,
notification.title,
notification.body,
NotificationDetails(
android: AndroidNotificationDetails(
channel.id,
channel.name,
channelDescription: channel.description,
// TODO add a proper drawable resource to android, for now using vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
// one that already exists in example app.
icon: 'launch_background',
actions: <AndroidNotificationAction>[
AndroidNotificationAction(
// selectedNotificationPayload!, navigationActionId!;
navigationActionId!, 'Accept',
showsUserInterface: true,
cancelNotification: false,
titleColor: Color.fromARGB(255, 0, 0, 255),
),
AndroidNotificationAction(channel.id, 'Reject'),
// AndroidNotificationAction('id_3', 'Action 3'),
],
),
),
);
}
}```
[1]: https://i.stack.imgur.com/9MVZ8.jpg

Related

player position is out of sync audio_service flutter

I have an audioplayer application which uses audio_service and just_audio plugins for playback. Everything seems fine but there are 2 issues that I am facing.
The player position is out of sync, the duration becomes the position but when I pause the audio it reflects the right position. This behaviour can be seen on the notifications and on the AudioService.positionStream which is updating the seek bar on Flutter UI.
Audio stops playing on lock screen out of the blue.
My code:
_playbackSubscription = _player.playbackEventStream.listen((event) {
setState(_player, event);
});
void setState(AudioPlayer _player, event) {
if (queue == null || queue.isEmpty) return;
var controls = [
MediaControl.skipToPrevious,
_player.playing ? MediaControl.pause : MediaControl.play,
MediaControl.skipToNext,
MediaControl.stop
];
AudioServiceBackground.setMediaItem(
queue.elementAt(_player.currentIndex).copyWith(
duration: _player.duration,
));
AudioServiceBackground.setState(
playing: _player.playing,
bufferedPosition: _player.bufferedPosition,
speed: _player.speed,
shuffleMode: _player.shuffleModeEnabled
? AudioServiceShuffleMode.all
: AudioServiceShuffleMode.none,
repeatMode:
AudioServiceRepeatMode.values.elementAt(_player.loopMode.index),
position: _player.position,
processingState: {
ProcessingState.idle: AudioProcessingState.none,
ProcessingState.loading: AudioProcessingState.connecting,
ProcessingState.buffering: AudioProcessingState.buffering,
ProcessingState.ready: AudioProcessingState.ready,
ProcessingState.completed: AudioProcessingState.completed,
}[_player.processingState],
systemActions: [
MediaAction.seekBackward,
MediaAction.seekTo,
MediaAction.seekForward
],
controls: controls,
updateTime: event?.updateTime ?? DateTime.now());
}
Code Block Summary: Basically setting the AudioService state whenever the player state changes.

React Native: Animation not working properly on android

I have been trying to fix issue for the past 2 days, it works fine on iOS
constructor(){
super();
this.animation = new Animated.Value(0)
this.state = {
expanded: false,
};
}
toggle(){
let initialValue = this.state.expanded? 1 : 0 ,
finalValue = this.state.expanded? 0 : 1
this.setState({
expanded: !this.state.expanded,
});
this.animation.setValue(initialValue)
Animated.timing(
this.animation,
{
toValue: finalValue,
}
).start();
}
render(){
return(
<Animated.View style={{{flex: 1, marginTop: 28, paddingLeft: 25, transform: [{ scale: this.animation }, {perspective: 1000 }]}}}>
....
</Animated.View>
);
}
This component is child , used in parent like this: <FeedBack ref={ref => this.feedback = ref}/> without any conditions to check to show or not (because animation scale is set to Zero in the constructor, so no need)
the toggle() method is being called from parent when a button pressed.
Now this works fine on iOS , when component loads, the view is not there until a button is pressed (then scaled). but on android when the component loads, the view already there. When I press the button, the animated view disappears and re-appears (with animation scaling) and subsequent toggles work fine. The problem in android is that even though initialValue of the scale is Zero, the view is still there when it first loads.
This has been an issue with react-native on the android side for a while now (sigh). It seems that setting the value to 0 strips it of its characteristics, basically deeming it as null and then reverting to using its actual value once it had animated to > 0
A work around is to set animation like so
this.animation = new Animated.Value(0.01);
You can follow the issue here

Greensock Animation Platform - is it possible to reverse nested timelines?

Is it possible to reverse a master timeline within GSAP? I know you can reverse a timeline that is not nested.
Here's the code:
// hide copy content divs
const hideCopyContentDivsTl = new TimelineMax()
hideCopyContentDivsTl.to(copyContentDivs, 1, {
height: 0,
width: 0,
autoAlpha: 0
})
// shrink copy wrapper div
const shrinkCopyWrapperTL = new TimelineMax()
shrinkCopyWrapperTL.to(copyWrapperDiv, 1, {
width: '2%',
height: '4%'
})
// fade remove bg and change to white
const fadeLargeBgImgTl = new TimelineMax()
fadeLargeBgImgTl.to(largeImage, 1, {
backgroundColor: "#fff"
})
// the master timeline to manage the parts
const masterTimeline = new TimelineMax({paused: true})
masterTimeline.add(hideCopyContentDivsTl)
.add(shrinkCopyWrapperTL)
.add(fadeLargeBgImgTl)
// assume that there is a mechanism to change the state of playVideo between true and false
if (this.state.playVideo === false) {
console.log("should play: ", masterTimeline)
masterTimeline.play()
} else {
console.log("should reverse: ", masterTimeline)
masterTimeline.reverse()
}
I can get it to play forwards, just not in reverse. Do I need to tell the browser where to start in the timeline so that it can play in reverse?
The problem is with my code and not with GSAP. I have new timelines created on every click. How will it reverse something that it doesn't have a previous reference to? The solution would be to create the timelines outside of the click event and then based on the state, play forward or reverse the animation.

TItanium JS: How to add active states to buttons int he header bar for iOS

I'm looking to add an active state to a systemButton in the header bar of an iOS app using Appcelerator Titanium.
I want to achieve the same result as the the Calendar with the list view activated in iOS8. As you can see the below the list icon has an active state, whereby it has an orange background.
Is there a way to achieve this using iOS System Buttons in the header of an app?
Thanks, Owen
You must manually keep track of the states of the button for a Toggle effect. This does not work with a systemButton.
example:
var button = Ti.UI.createButton({ title: 'Off', isOn: false });
button.addEventListener('click', function(e) {
if (e.source.isOn) {
e.source.title = 'Off';
e.source.isOn = false;
} else {
e.source.title = 'On';
e.source.isOn = true;
}
});

When will Sencha Touch Charts handle events on DrawComponent Sprites?

In the Sencha Touch Charts 2 beta distribution, the Drawing guide example code has an example of a Sprite listening for touch start. The code given fails to draw any sprites, because it fails to insert a canvas onto the DOM. However this can be fixed by replacing this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
items: drawComponent
});
with this:
//add the component to the panel
Ext.create('Ext.chart.Panel', {
fullscreen: true,
title: 'Yellow Circle',
chart: drawComponent
});
Now, I'd really like to get the event handling to work. The example code continues with:
// Add a circle sprite
var myCircle = drawComponent.surface.add({
type: 'circle',
x: 100,
y: 100,
radius: 100,
fill: '#cc5'
});
// Now do stuff with the sprite, like changing its properties:
myCircle.setAttributes({
fill: '#ccc'
}, true);
// Remember always to refresh the image
drawComponent.surface.renderFrame();
// or animate an attribute on the sprite
// no need to refresh the image when adding animations.
myCircle.fx.start({
fill: '#555'
});
// Add a touch listener to the sprite
myCircle.addListener('touchstart', function() {
alert('touchstarted!');
});
but that final alert never happens on touch. Any ideas?
drawComponent.addListener('touchstart'... works fine, but is of course not localised to the circle sprite.
--- after more investigation ---
I think the answer is simply that event handling on sprites his not implemented yet. e.g. in touch-charts/src/draw/engine/Canvas.js we have in the definition of Ext.draw.engine.Canvas,
getSpriteForEvent: function(e) {
return null; //TODO!!!
},
OK - time to change the question from 'how?' to 'when?':
'When will Sencha Touch support Sprite event handling?"