In my application I use inkwell/flat button/ink response/Gesture Detector/RaisedButton, etc for my tap component. The application already in release Alpha channel (Android) and Test Flight (IOS). However the user is not satisfied with the result, because all the button is less responsive/sensitive compare to native button component (Android/iOS). Is there any alternative or another way in Flutter to create tapable widget or button that have responsiveness similar with native application?
Example code:
InkWell(
onTap: () => Navigator.of(context).pushNamed(
Routes.MEMBERSHIP,
arguments: membershipPlanModel),
child: Card(
margin: EdgeInsets.only(
right: 16,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(10))),
child: Container(...
Another code:
FlatButton(
onPressed: () async {
_cancelTransaction();
Navigator.of(context).pop(true);
Navigator.of(context).pop(true);
},
child: Text(
Labels.YES,
style: Fonts.GHOST,
),
),
Related
I'm using four persistentFooterButtons in my app to (1) turn on BLE scanning, (2) turn off BLE scanning, (3) disconnect BLE and (4) run a command sequence to join my bluetooth device to a WiFi network (I'm also using Flutter Reactive BLE). Here's an example of my button code:
Tooltip(
message: 'Turn BLE scanning on',
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.black,
foregroundColor: Colors.white,
),
onPressed: (scanning || running)
? null
: () {
if (connected) {
disconnect();
connected = false;
}
startScan();
},
child: scanning
? const Icon(Icons.bluetooth_searching)
: const Icon(Icons.bluetooth),
),
As you can see, I'm also using ternary expressions in my button code to perform some additional UI operations. The WiFi joining process involves some navigation through a handful of screens. At the very end of the process, I'd like to send the user back to the starting page which has the widget tree for the persistentFooterButtons.
I send the user back via a button press:
SizedBox(
width: 100.0,
height: 50.0,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
minimumSize: const Size(100.0, 30.0),
),
onPressed: (userMessage.contains('Success'))
? () {
Navigator.pushNamed(
context,
MyHomePage.routeName,
arguments: MyHomePageArguments(
resumeProcess,
connected,
scanning,
running,
statusUpdateAll,
statusUpdateVisibility,
wifiData,
wifiCredentials,
),
);
}
: null,
child: const Text('Home')),
),
I'm passing the arguments that are used in the ternary expressions that represent the state of the buttons. Since I'm wanting to update these buttons in the UI, I should be using setState but I don't know how to implement it in this use case. Can anyone tell me how to do this? Thank you.
I am pretty new to flutter/dart, so this might be a silly question...
I wanted to have a search bar, that when tapped the first time, displays a series of listview tiles (like pre-canned search terms). I wanted a subsequent tap to then open the soft keyboard for user input. As it stands now, a single tap opens the listview tiles, and also opens the soft keyboard.
After some looking around, I am thinking I would need to wrap the searchbar in a GestureDetector, and handle the tap / double-tap gestures through that. What I can't quite figure out, is how to tie the GestureDetector gestures, ontap and ondoubletap, to the child widget actions... I think when the searchbar gets focus (onTap), the soft keyboard opens, so not sure if that behavior can be (easily) uncoupled...
The flutter cookbook example uses this:
ScaffoldMessenger.of(context).showSnackBar(snackBar);
but the API docs say this only manages snackbars and MaterialBanners:
"Manages SnackBars and MaterialBanners for descendant Scaffolds."
Here is the framework I have so far:
Widget searchBar() {
//final FloatingSearchBarController searchBarController = FloatingSearchBarController();
return
GestureDetector(
onTap: () =>{},
onDoubleTap: () => {},
child: FloatingSearchBar(
controller: searchBarController,
hint: "search",
openAxisAlignment: 0.0,
width: 600,
axisAlignment: 0.0,
scrollPadding: const EdgeInsets.only(top: 16, bottom: 20),
elevation: 4.0,
onQueryChanged: (query) {
},
builder: (BuildContext context, Animation<double> transition) {
return ClipRRect(
child: Material(
color: Colors.white,
child: Container(
color: Colors.white,
child: Column(
children: [
ListTile(
title: const Text('Item 1'),
onTap: () {},
),
ListTile(
title: const Text('Item 2'),
onTap: () {},
),
ListTile(
title: const Text('Item 3'),
onTap: () {},
),
],
),
),
)
);
},
)
);
Any thoughts would be greatly appreciated!
Is there a way to close the flutter speedDial when tap on a label widget?. I did not use SpeedDial's child property, but it has that feature. Currently when I tap on a label widget it stays until I manually close the widget. Or even a way to change the child property of SpeedDial widget would be enough, while I want a custom shape like in the picture.
Navigator.pop() did not work
SpeedDial(
buttonSize: const Size(45, 45),
animatedIcon: AnimatedIcons.menu_close,
children: [
SpeedDialChild(
labelWidget: GestureDetector(
onTap: () async {
Feedback.forTap(context);
await _crudStorage.deleteAllTask();
},
child: Container(
height: 50.0,
decoration: BoxDecoration(
color:
Theme.of(context).cardColor,
border: Border.all(width: 2.0),
borderRadius:
BorderRadius.circular(30.0),
),
child: Row(
children: [
const Padding(
padding: EdgeInsets.only(
left: 12.0, right: 8.0),
child:
Text('Clear all tasks'),
),
Padding(
padding:
const EdgeInsets.only(
right: 8.0),
child: SvgPicture.asset(
'assets/svg/all.svg',
),
),
],
),
),
),
),
],
)
don't use async & await on tap use separate function to Call
https://tutorialmeta.com/question/how-to-call-async-function-with-ontap-flutter
refer the above link
It was so simple. Also the development team, provided how to implement this on their official extension page on pub.dev go to pub. I will mention the same documentation for your reference:
first you need to create a value notifier:
ValueNotifier<bool> isDialOpen = ValueNotifier(false);
Then set openCloseDial to isDialOpen in your SpeedDial:
SpeedDial(
...
openCloseDial: isDialOpen,
...
)
Now you can change the state of dial open:
isDialOpen.value = false;
Example: Just set the value to false inside the onTap callback :)
onTap: () async {
Feedback.forTap(context);
await _crudStorage.deleteAllTask();
isDialOpen.value = false;
},
use closeManually: false in SpeedDial Contructor. The widget will close automatically on select any function.
I'm trying to make a radio app, using the assets_audio_player library, it does fetch the radio stream from the link, and all is working, but when I try to make the Play/Pause button change icon accordingly, it just doesn't work, I tried two approaches:
1- Using the library builder:
assetsAudioPlayer.builderCurrent(
builder: (context, isPlaying){
return PlayerBuilder.isPlaying(
player: assetsAudioPlayer,
builder: (context, isPlaying) {
return RawMaterialButton(
constraints: BoxConstraints.expand(width: 70, height: 70),
fillColor: Constants.WHITE,
shape: CircleBorder(),
child: RadiantGradientMask(
child: Icon(isPlaying ? Icons.pause : Icons.play_arrow ,
size: 42,
color: Constants.WHITE,
),
gradient: gradient,
),
onPressed: (){
assetsAudioPlayer.playOrPause();
}
);
});
}
),
2- Using a normal button, and a bool value and setState:
RawMaterialButton(
constraints: BoxConstraints.expand(width: 70, height: 70),
fillColor: Constants.WHITE,
shape: CircleBorder(),
child: RadiantGradientMask(
child: Icon(isPlaying ? Icons.pause : Icons.play_arrow ,
size: 42,
color: Constants.WHITE,
),
gradient: gradient,
),
onPressed: (){
assetsAudioPlayer.playOrPause();
setState(() {
isPlaying = assetsAudioPlayer.isPlaying.value;
});
},
In the 1st method, the library starts streaming, but the icon doesn't change at all (pause/play), in the 2nd method, it does change, but after pressing the button several times, it glitches, and the 'play' becomes 'pause', and 'pause' becomes 'play' (reversed).
Any idea about how to get this to work properly?
The method call assetsAudioPlayer.playOrPause(); is Async, and the setState({}); is Sync.
You are checking if the status changed synchronously, but changing it async, you need to await for the the playOrPause() method.
What I am aiming for is that I have created around 5 stateful screens that are supposed to be navigated on button press. Now all the five buttons are same so I am using a for loop to assign those widgets and then add them to Column Widget list as shown below:
for(int i=0;i<ButtonTexts.length;i++)
{
NavigatorS.add(Container(
width: 300,
height: 40,
child: RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(NavigatorRadius),
side: BorderSide(color: NavigatorBorderColour)),
onPressed: (context)=>functionCalls[i],
color: NavigatorBarColour,
textColor: NavigatorTextColour,
child: Text(ButtonTexts[i],
style: TextStyle(fontSize: 20)),
),
));
}
Now the issue is that I have created a list of functions as shown below:
List functionCalls =[buildContext(context),buildContext2(context),buildContext3(context),buildContext4(context),buildContext5(context)];
But these functions need context to navigate to a different screen as the functions are defined as follows:
void buildContext(context)
{Navigator.push(context,MaterialPageRoute(builder: (context) => BirthdayCard()),);
}
Someone please help me with this, also I can't use route pages as I am operating on classes, my each screen dart file is nothing but a class of stateful widget. What I want is to avoid repetative coding and pass function definitions in the onpressed option.
Didn't get the exact problem that you are facing, anyway check this
void buildContext(context,screen)
{
Navigator.push(context,MaterialPageRoute(builder: (context) => screen),);
}
Widget getButton(onPressed) {
return RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(NavigatorRadius),
side: BorderSide(color: NavigatorBorderColour)),
onPressed: onPressed,
color: NavigatorBarColour,
textColor: NavigatorTextColour,
child: Text(ButtonTexts[i],
style: TextStyle(fontSize: 20)),
),
}
And in your code, you can call this,based on the conditions
getButton((){
buildContext(context,BirthdayCard());
}
);