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.
Related
i had made a function that enabled the second button when i press the first one, everything is working fine but when the second button is enabled i want to go to another page when i press on the second one but i can t do that, how can I reach that. Here is my code:
child: MaterialButton(
elevation: 0,
// ignore: avoid_returning_null_for_void
onPressed: isDisable ? () => null : clickButton(),
child: Text(
'Done',
style: TextStyle(
fontSize: 16.sp, fontWeight: FontWeight.w400),
),
),
I want here on pressed to go to another page but i cant in this form how can i reach that? Thank in advance
I've tried with setState
You like provide null directly instead of method body. Use like.
onPressed: isDisable ? null:() => clickButton(),
Or can be
onPressed: isDisable ? null: clickButton, //depend on `clickButton`
This way, you will be able to see the disable state on ui.
So i set up a working Realtime Database, to which i can add entries. Now i want to notify the user whenever a new entry was added to the Database by adding a little Red Dot to the Icon in the BottomNavigationBar which disappears again when the user has clicked it. Any ideas on how to achieve this?
I recommend using the badge package to achieve this. You will have to ensure the state updates using your own state management. If the user goes to the notification screen, you will need to trigger an update to mark notifications as read.
return Badge(
showBadge: unreadNotifications > 0,
badgeContent: Text(
'$unreadNotifications',
style: kTextStyle,
),
position: const BadgePosition(
top: -3,
end: 3,
),
child: IconButton(
icon: const Icon(
Icons.notifications,
),
onPressed: () {
Navigator.pushNamed(context, NotificationScreen.id);
},
),
);
So, here is my detailDoaPage.dart that shown detailed item from a ListView.builder (based on my JSON local data) in previous page. In this detailed page, I want to create a button (Next button below) that change all attributes of this current data into next item. So the page isn't navigating, just changed the item inside it into the next data.
Anyone can help me to give me some advices for this problem? Here's my full code if you want to see it https://replit.com/join/nlmxirvq-nabilrei
Thank you :)
Your onPressed callback method in the button is empty, you need to implement it in order to trigger state change when the button is pressed.
Something like this:
Padding(
padding: const EdgeInsets.all(28),
child: Align(
alignment: Alignment.bottomRight,
child: FloatingActionButton.extended(
onPressed: () {
// here you would implement your logic,
// whether be it calling an Api to fetch data,
// or do some action on your data..Etc.
_functionToTriggerStateChange();
},
backgroundColor: Colors.white,
icon:
Icon(Icons.arrow_forward_ios_rounded, color: Colors.teal),
splashColor: Colors.teal.withOpacity(0.3),
label:
Text("Next", style: Style(styleColor: Colors.teal).body),
),
),
)
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,
),
),
How can we display a toast or snack-bar in flutter for web?
I have tried with many 3rd party lib but I couldn't achieve it.
Thanks in advance
Now yes, we can implement toasts, but with some restrictions.
Just tried simple toast library and oktoast.
The last one works only with using showToastWidget method.
use okToast package,
with this package you just need to wrap the app or parent widget with OKToast and call showToast Method like this :
OKToast(
child: Scaffold(
body: Center(
child: Container(
color:Colors.white;
child: RaisedButton(
elevation: 20.0,
color: Color(0xFFEE507A),
child: Text("Show Toast"),
onPressed: () {
setState(() {
showToast(
" Toast has been succefully showing!! ",
position: ToastPosition.bottom,
backgroundColor: Color(0xFFEE507A),
radius: 13.0,
textStyle: TextStyle(fontSize: 18.0,color:Colors.white),
animationBuilder: Miui10AnimBuilder(),);
});
}),
),
)
),
);