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.
Related
I designed a project for weighing, in the flutter app I display the weight in real time (via sockets). The answer I get through the socket I would like to see instantly in the application. But the problem is that the weight does not change in real time (although in the terminal I see the actual weight coming). Here's how I gain weight through sockets:
getWeight() async {
Socket socket = await Socket.connect('192.168.0.1', 4005);
print('connected');
// send hello
socket.add(utf8.encode('pass'));
socket.listen((List<int> event) {
weightSO = utf8.decode(event);
print(utf8.decode(event));
});
socket.add(utf8.encode('pass'));
await Future.delayed(Duration(seconds: 10));
socket.close();
}
}
My Widget:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(height: 35.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
FlatButton(
disabledColor: Colors.pink,
textColor: Colors.blueGrey,
color: Colors.transparent,
child: Text('Weight', textScaleFactor: 2),
onPressed:
getWeight,
padding: EdgeInsets.fromLTRB(30.0, 10.0, 30, 10.0),
),
],
),
Container(
child: Text(('$weightSO' ), style: TextStyle(fontSize: 45.0, color: Colors.blueGrey)),
padding: EdgeInsets.fromLTRB(0, 0.0, 0, 20.0),
),
]),
);
}
Does anyone know how to make it display in real time in the variable weightSO, I will be grateful for help.
In flutter there is something called state managment.
Streams,StreamController also you have many libraries you can use based on stream like GetX,Provider,etc...
When the vairable Change sink to the stream when the stream get updated with new variable use streambuilder in the Ui to inform it with the new value to rebuild the widget .
I have this issue of rebuilding widget when The keyboards shows up. I tried to use the sizer package but never could figure out how to get it to work
when I go back from this screen everything in the previous screen will rebuild, Please note: If I don't click on the typeaheadwidget such that the keyboard doesn't show up the state is preserved in the previous screen but as soon as the keyboard pops up the widgets get rebuilt
Could you please check ?
class SearchScreen extends StatefulWidget {
#override
_SearchScreenState createState() => _SearchScreenState();
}
class _SearchScreenState extends State<SearchScreen> {
TextEditingController pickUpTextEditingController = TextEditingController();
TextEditingController dropOffTextEditingController = TextEditingController();
#override
void initState() {
super.initState();
}
#override
#mustCallSuper
Widget build(BuildContext context) {
String placeAddress =
Provider.of<AppData>(context).pickUpLocation.placeName ?? "";
pickUpTextEditingController.text = placeAddress;
return Scaffold(
resizeToAvoidBottomInset: false,
body: Stack(
children: [
Container(
height: 250.0,
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black,
blurRadius: 6.0,
spreadRadius: 0.5,
offset: Offset(0.7, 0.7),
)
],
),
child: Padding(
padding: EdgeInsets.only(
left: 25.0, top: 30.0, right: 25.0, bottom: 20.0),
child: Column(
children: [
SizedBox(height: 5.0),
Stack(
children: [
GestureDetector(
onTap: () {
Navigator.pop(
//send back data
context,
dropOffTextEditingController.text);
},
child: Icon(Icons.arrow_back)),
Center(
child: Text(
"Set Drop Off",
style: TextStyle(
fontSize: 18.0, fontFamily: "Brand-Bold"),
),
)
],
),
SizedBox(height: 16.0),
Row(
children: [
Image.asset("images/images/pickicon.png",
height: 16.0, width: 16.0),
SizedBox(width: 18.0),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(5.0),
),
child: Padding(
padding: EdgeInsets.all(3.0),
child: TextField(
controller: pickUpTextEditingController,
decoration: InputDecoration(
hintText: "PickUp Location",
fillColor: Colors.grey[400],
filled: true,
border: InputBorder.none,
isDense: true,
contentPadding: EdgeInsets.only(
left: 11.0, top: 8.0, bottom: 8.0),
),
),
),
))
],
),
SizedBox(height: 10.0),
Row(
children: [
Image.asset("images/images/desticon.png",
height: 16.0, width: 16.0),
SizedBox(width: 18.0),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.grey[400],
borderRadius: BorderRadius.circular(5.0),
),
child: Padding(
padding: EdgeInsets.all(3.0),
child: TypeAheadField(
itemBuilder: null,
onSuggestionSelected: null,
suggestionsCallback: null,
),
),
),
),
],
),
],
),
),
),
],
),
);
}
}
You should not try to control when the build method is called. Flutter will call build when it decides it needs to (e.g. keyboard appears, device rotated, parent rebuilds, etc).
Instead, you should make sure that your build method is a "pure" function. In Flutter specifically, this means that you should not perform any action with "side-effects" (basically anything which modifies the state of the app).
For example:
Widget build(BuildContext context) {
final x = 2 + 3; // fine, nothing else is modified
final state = context.watch<MyModel>(); // also fine, only reading data
controller.text = "hello"; // BAD, modifies the state of the app
return ...;
}
Instead, you should move your logic with side effects into other lifecycle methods (e.g. initState(), didChangeDepencencies(), etc).
For example, if you want to set your text field to a particular string when it first appears, you can use initState:
class _SearchScreenState extends State<SearchScreen> {
#override
void initState() {
super.initState();
final data = context.read<AppData>();
controller.text = data.pickUpLocation.placeName ?? "";
}
Widget build(BuildContext context) {
// ...
}
}
Now build() can be called whenever it has to be, without resetting the state of your text field.
Note that, even if there was some way to prevent your widget from being rebuilt, this is also likely not what you want, since the UI would not update to accommodate the keyboard.
the only reason why your widgets got rebuilds after keyboard pop up.
is that one or more of your widgets size depends on MediaQuery.
you can try to ge your screen size from LayoutBuilder as an alternative for MediaQuery.
Give the textfield an initial value like this:
initvalue:Provider.of<AppData>(context).pickUpLocation.placeName ?? ""
and use onchange method in text field instead of text editing controller like this:
onchange(value){
Provider.of<AppData>(context).pickUpLocation.placeName=value;}
I am also facing the same issue, My blocBuidler is getting rebuilt every time when click on textfield or keyboard is appear.
In my case, I was calling the event in parent BlocBuilder so whenever I pressed on textfields the parent BlocBuilder is called the event, so it builds state of child BlocBuilder
Make sure you are also doing the same thing. If you are doing the same thing please check the state whether it is already built or not.
(BlocProvider.of<YourBlocName>(context).state is YouBlocState) ? Print('do nothing'): BlocProvider.of<YourBlocName>(context).add(youBlocEvent);
When you tap the TextField widget, it makes the keyboard show up. And when the keyboard shows up, your screen size changes. This causes the rebuild
I have created the following RaisedButton in Flutter:
The problem is, the button's highlightElevation triggers when you press and hold the button for approximately 1 second when I have the image shown on the left of it, but when I remove the image, it works as intended.
Is there a way to fix this while keeping the image?
here is my code:
Widget systems(String systemName, String systemTitle, Image img) {
return Center(child:
Container( width:width-20,height:110,child:
Column( children: <Widget>[
SizedBox(height: 10),
RaisedButton( elevation: 10,splashColor: Colors.transparent,highlightElevation: 0, shape:
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
),
color: Colors.white,
onPressed: () {},
child: Padding(
padding: EdgeInsets.only(left:0,top:15,bottom:15),
child: Row(children: [
img,Container(width:width-120,child:
Align(
alignment: Alignment.center,
child: Column(
children: [
Text(systemName, style: TextStyle(fontSize: 18)),
],
),
),)
])))
])));
}
PS: I have called this widget 9 times within a for loop in another widget, and when I reduce the number of the loop to 5 or lower, the button works as intended as well.
According to Flutter SDK highlightElevation is for the button's Material when the button is enabled and pressed.
Please refer https://api.flutter.dev/flutter/material/RawMaterialButton/highlightElevation.html
highlightElevation property :
The elevation for the button's Material when the button is enabled and pressed.
I have two rowCell's inside a Row widget in my app and I want to assign them different pages. I've tried putting the rowCell's in a GestureDetector, a FlatButton but neither of them have worked (as they should be linked to the Row widget and they need separate links for separate pages.)
Here is the part of my code:
...
new Divider(
height: _height / 20,
color: Colors.grey,
),
new Row(
children: <Widget>[
rowCell(10250, 'MEETUPS'),
rowCell(1520, 'FRIENDS'),
],
),
new Divider(height: _height / 20, color: Colors.grey),
...
Any solutions?
Just wrap the rowCell with GestureDetectorthen you will get separate onTap function with the same design.
Otherwise, you can use GestureDetector inside the rowCell(). And pass a function to the rowCell() to attach to the GestureDetector.
Widget rowSell(<your parameters>, Function onTapFunction) {
return GestureDetector(
onTap: onTapFunction,
child: <Your child>
),
}
And pass the function like:
new Row(
children: <Widget>[
rowCell(10250, 'MEETUPS', (){ <on Tap code> }),
rowCell(1520, 'FRIENDS', (){ <on Tap code> }),
],
),
The GestureDetector probably isn't working because you're wrapping it around the text and in that scenario, it's rare that it will work because you the onTap space is relative to space the text covers on the screen.
Try giving some padding inside the rowCell and then wrap it in a gesture detector, it will probably break your layout but at least you will know the problem and adjust accordingly.
Please try this...
If rowCell is return widget then wrap rowCell with GestureDetector and get click of that...
...
new Divider(
height: _height / 20,
color: Colors.grey,
),
new Row(
children: <Widget>[
GestureDetector(onTap: () {}, child: rowCell(10250, 'MEETUPS')),
GestureDetector(onTap: (){},child: rowCell(1520, 'FRIENDS')),
],
),
new Divider(height: _height / 20, color: Colors.grey),
...
From the comment from above you mention, I assume your rowCell function returns an Expanded widget.
So in rowCell function, inside Expanded widget add Inkwell widget. Also add one more argument which tells the page that you want to navigate to (onTap).
Widget rowCell(int count, String title, Widget navTo){
return Expanded(
child: Inkwell(
onTap: () => _navToPage(navTo)
child: .... //Your child widget
),
);
}
void _navToPage(Widget navTo){
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => navTo,
),
);
}
new Divider(height: _height / 20, color: Colors.grey),
new Row(
children: <Widget>[
GestureDetector(onTap: () {}, child: rowCell(10250, 'MEETUPS', MeetupsPage())),
GestureDetector(onTap: (){},child: rowCell(1520, 'FRIENDS', FriendsListPage())),
],
),
new Divider(height: _height / 20, color: Colors.grey),
I want to have a row of IconButtons, all next to each other, but there seems to be pretty big padding between the actual icon, and the IconButton limits. I've already set the padding on the button to 0.
This is my component, pretty straightforward:
class ActionButtons extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.lightBlue,
margin: const EdgeInsets.all(0.0),
padding: const EdgeInsets.all(0.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
IconButton(
icon: new Icon(ScanrIcons.reg),
alignment: Alignment.center,
padding: new EdgeInsets.all(0.0),
onPressed: () {},
),
IconButton(
icon: new Icon(Icons.volume_up),
alignment: Alignment.center,
padding: new EdgeInsets.all(0.0),
onPressed: () {},
)
],
),
);
}
}
I want to get rid of most of the light blue space, have my icons start earlier on the left, and closer to each other, but I can't find the way to resize the IconButton itself.
I'm almost sure this space is taken by the button itself, 'cause if I change their alignments to centerRight and centerLeft they look like this:
Making the actual icons smaller doesn't help either, the button is still big:
thanks for the help
Simply pass an empty BoxConstrains to the constraints property and a padding of zero.
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
)
You have to pass the empty constrains because, by default, the IconButton widget assumes a minimum size of 48px.
Two ways to workaround this issue.
Still Use IconButton
Wrap the IconButton inside a Container which has a width.
For example:
Container(
padding: const EdgeInsets.all(0.0),
width: 30.0, // you can adjust the width as you need
child: IconButton(
),
),
Use GestureDetector instead of IconButton
You can also use GestureDetector instead of IconButton, recommended by Shyju Madathil.
GestureDetector( onTap: () {}, child: Icon(Icons.volume_up) )
It's not so much that there's a padding there. IconButton is a Material Design widget which follows the spec that tappable objects need to be at least 48px on each side. You can click into the IconButton implementation from any IDEs.
You can also semi-trivially take the icon_button.dart source-code and make your own IconButton that doesn't follow the Material Design specs since the whole file is just composing other widgets and is just 200 lines that are mostly comments.
Wrapping the IconButton in a container simply wont work, instead use ClipRRect and add a material Widget with an Inkwell, just make sure to give the ClipRRect widget enough border Radius 😉.
ClipRRect(
borderRadius: BorderRadius.circular(50),
child : Material(
child : InkWell(
child : Padding(
padding : const EdgeInsets.all(5),
child : Icon(
Icons.favorite_border,
),
),
onTap : () {},
),
),
)
Instead of removing a padding around an IconButton you could simply use an Icon and wrap it with a GestureDetector or InkWell as
GestureDetector(
ontap:(){}
child:Icon(...)
);
Incase you want the ripple/Ink splash effect as the IconButton provides on click wrap it with an InkWell
InkWell(
splashColor: Colors.red,
child:Icon(...)
ontap:(){}
)
though the Ink thrown on the Icon in second approach wont be so accurate as for the IconButton, you may need to do some custom implementation for that.
Here's a solution to get rid of any extra padding, using InkWell in place of IconButton:
Widget backButtonContainer = InkWell(
child: Container(
child: const Icon(
Icons.arrow_upward,
color: Colors.white,
size: 35.0,
),
),
onTap: () {
Navigator.of(_context).pop();
});
I was facing a similar issue trying to render an Icon at the location the user touches the screen. Unfortunately, the Icon class wraps your chosen icon in a SizedBox.
Reading a little of the Icon class source it turns out that each Icon can be treated as text:
Widget iconWidget = RichText(
overflow: TextOverflow.visible,
textDirection: textDirection,
text: TextSpan(
text: String.fromCharCode(icon.codePoint),
style: TextStyle(
inherit: false,
color: iconColor,
fontSize: iconSize,
fontFamily: icon.fontFamily,
package: icon.fontPackage,
),
),
);
So, for instance, if I want to render Icons.details to indicate where my user just pointed, without any margin, I can do something like this:
Widget _pointer = Text(
String.fromCharCode(Icons.details.codePoint),
style: TextStyle(
fontFamily: Icons.details.fontFamily,
package: Icons.details.fontPackage,
fontSize: 24.0,
color: Colors.black
),
);
Dart/Flutter source code is remarkably approachable, I highly recommend digging in a little!
A better solution is to use Transform.scale like this:
Transform.scale(
scale: 0.5, // set your value here
child: IconButton(icon: Icon(Icons.smartphone), onPressed: () {}),
)
You can use ListTile it gives you a default space between text and Icons that would fit your needs
ListTile(
leading: Icon(Icons.add), //Here Is The Icon You Want To Use
title: Text('GFG title',textScaleFactor: 1.5,), //Here Is The Text Also
trailing: Icon(Icons.done),
),
I like the following way:
InkWell(
borderRadius: BorderRadius.circular(50),
onTap: () {},
child: Container(
padding: const EdgeInsets.all(8),
child: const Icon(Icons.favorite, color: Colors.red),
),
),
enter image description here
To show splash effect (ripple), use InkResponse:
InkResponse(
Icon(Icons.volume_up),
onTap: ...,
)
If needed, change icons size or add padding:
InkResponse(
child: Padding(
padding: ...,
child: Icon(Icons.volume_up, size: ...),
),
onTap: ...,
)