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),
),
),
)
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.
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.
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);
},
),
);
I'm trying to create a navigation drawer in my flutter app,however i want it to have a circle avatar image as icon instead of the default tree horizontal lines. Please is there a way to acheive this?? Any help is appreciated
leading: Builder(
builder: (BuildContext context) {
return IconButton(
// icon: const Icon(Icons.access_alarm_rounded),
icon: Container(
child: Hero(
tag: 'Profile Picture',
child: CircleAvatar(
backgroundImage: NetworkImage(
'googleUserUrl'),
),
),
),
onPressed: () {
Scaffold.of(context).openDrawer();
},
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
),
You should first google how to achieve this, then try it out yourself. If you encounter errors that you can't resolve by yourself, then you should come here to ask questions.
I will provide you some links or post to help you.
First, follow this post to learn how to add image to your project.
Then, this is the official documents for getting a circle avatar. Also, this is an already answered question about this issue
First of all, there are a lot of resources to help you this you may find out google to achieve this let me share some its up to you what image you want asset_Image or
network_image then you use this image into appbar widget takes action_widget as an argument and then use popupmenuButton and then use clipoval
Example
actions: <Widget>[
PopupMenuButton<String>(
icon: Container(
child: ClipOval(
child: Align(
heightFactor: 1,
widthFactor: 1,
child: Image.network(googleUserUrl),
),
)
),
I saved the google logo a as .png because I want to keep its colors. I am aware there are some packages for predefined sign-in buttons like google or with the google Icon(but I can't keep the colors obviously in this case), but I would like to know if I can somehow make so the .png image acts like an Icon.
You can use whatever button widget you like or you can create your custom button...
According to your image you can use outline button or flat button... then in your child parameter add Row with image and text
OutlineButton(child: Row(children: Image.asset(your_image_location), Text('Sign in with Google')))
body: Stack(
children: <Widget>[
Center(
child: IconButton(
icon: Image.asset('path/the_image.png'),
iconSize: 50,
onPressed: () {},
)
Positioned(
child: Container(
child: Center(child: Text('Sign in With Google')),
)),
],
)