Reduce padding in app bar buttons in flutter - flutter

How can I reduce spacing between button ?
You can see four buttons on app bar takes so much space, I have tried Rows. but not worked
Below is my code --
AppBar(
backgroundColor: Colors.deepOrange,
iconTheme: new IconThemeData(color: Colors.white),
title: Text(
titleString,
style: TextStyle(color: Colors.white),
),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
IconButton(
icon: Icon(
Icons.notifications_none,
color: Colors.white,
),
// iconSize: 20,
onPressed: null,
),
//Add more icon here
],
);

You can use VisualDensity and padding arguments together to reduce things:
actions: <Widget>[
IconButton(
visualDensity: VisualDensity(horizontal: -4.0, vertical: -4.0),
padding: EdgeInsets.zero,
icon: Icon(
Icons.search,
color: Colors.white,
),
//iconSize: 20,
onPressed: null,
),
//Add more icon here
],
This worked in my app at least. Hope it's helpful!

The problem is with the IconButton Widget. by default IconButton has a size of 48x48 pixels size and you can read about it in the top answer of this question.
A workaround would be to use the GestureDetector widget to handle your onPressed() method. Below is an example.
actions: <Widget>[
GestureDetector(
onTap: (){
//your code
},
child: Icon(Icons.search)
),
GestureDetector(
onTap: (){},
child: Icon(Icons.notifications)
)
//Add more icon here
],

Try using sizedbox
Example
Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox.fromSize(
size: Size(25, 20), // button width and height
child: InkWell(
splashColor: Colors.white, // splash color
onTap: () {}, // button pressed
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.search), // icon
],
),
),
),
),

Related

How to customize SlidableAction to look like a round button in flutter?

I was able to add rounded corners but could not figure out how to reduce the default padding and make it a round button.
SlidableAction(
onPressed: (context) {
// do something
},
autoClose: true, // I need this functionality
icon: FeatherIcons.copy,
),
Current Output (SlidableAction)
Required Output(Container in Slidable children)
There's multiple ways to achieve that
You can use the shape: CircleBorder()
MaterialButton(
onPressed: () {},
color: Colors.blue,
textColor: Colors.white,
child: Icon(
Icons.camera_alt,
size: 24,
),
padding: EdgeInsets.all(16),
shape: CircleBorder(),
)
OR
You can use circle avatar
CircleAvatar(
backgroundColor: Colors.blue,
radius: 20,
child: IconButton(
padding: EdgeInsets.zero,
icon: Icon(Icons.add),
color: Colors.white,
onPressed: () {},
),
),
You could try and use ElevatedButton instead of Slidable Action , I will share example code
ActionPane(
motion: ScrollMotion(),
children: [
Builder(
builder: (cont) {
return ElevatedButton(
onPressed: () {
Slidable.of(cont)!.close();
},
style: ElevatedButton.styleFrom(
shape: CircleBorder(),
backgroundColor: Colors.red,
padding: EdgeInsets.all(10),
),
child: const Icon(
Icons.delete,
color: Colors.white,
size: 25,
),
);
},
),
],
),

Expandable Floating Action button in bottom navigation bar - Flutter

I am trying to implement the below design
When I add the expandable floating button to the notch in bottom navigation bar it break the design of bottom navigation bar.
I tried AnchorOverlay but didn't help. Below is the code of my main screen where the expandable widget is notched in the bottom app bar
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: kPrimaryColor,
floatingActionButton: ExpandableFab(
distance: 112.0,
children: [
ActionButton(
onPressed: () {},
icon: const Icon(Icons.format_size),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.insert_photo),
),
ActionButton(
onPressed: () {},
icon: const Icon(Icons.videocam),
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
//bottom navigation bar on scaffold
color: Colors.redAccent,
shape: const CircularNotchedRectangle(), //shape of notch
notchMargin:
5, //notche margin between floating button and bottom appbar
child: Row(
//children inside bottom appbar
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: const Icon(
Icons.menu,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.search,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.print,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.people,
color: Colors.white,
),
onPressed: () {},
),
],
),
),
);
}
Please refer this https://codewithandrea.com/articles/adding-animated-overlays-to-your-app/ maybe your issue will fixed.

Visibility on Flutter Speed Dial Children?

I'm using the Flutter Speed Dial plugin within a container. I need to toggle the visibility of just one of its children (SpeedDialChild);
child: Container(
width: 165,
height:400,
child:
SpeedDial(
overlayOpacity: 0.4,
icon: Icons.add,
activeIcon: Icons.expand_less,
buttonSize: 60.0,
backgroundColor: Color(0x00000000),
overlayColor: Color(0x00000000),
foregroundColor: Colors.white,
children: [
SpeedDialChild(
child: Icon(Icons.block),
backgroundColor: Colors.brown,
labelBackgroundColor: Colors.white,
label: 'abuse',
labelStyle: TextStyle(fontSize: 14.0),
onTap: () => print('rude'),
),
SpeedDialChild(
child: Icon(TriangleAll.edit_3),
backgroundColor: Colors.deepPurple[200],
labelBackgroundColor: Colors.white,
label: 'edit',
labelStyle: TextStyle(fontSize: 14.0),
onTap: () {},
onLongPress: () {},
),
],
),
),
I tried wrapping the Visibility widget on the icon but then I get a blank white icon where there should be an empty space.
The SpeedDialChild itself can't be wrapped with the Visibility Widget. So I need another option.
Anyone know another way to accomplish this?
Here's the answer from the issues queue at Github;
if (thisid==thatid) SpeedDialChild(...)

In flutter Chip Widget, how can I move the deleteIcon to be before the label

I am trying to create a chip where the close button (deleteIcon) is on the left side of the chip label (label).
how can i do that.
here is the unwantted result:
and i want to move the X to the left side of "Hagai"
like this:
Chip(
deleteIcon: Icon( Icons.close, ),
onDeleted: () {setState(() {print("bla");}); }
label: Text("bla",),
),
An update:
after the suggestions answers here is my new code (still dosent work):
Widget build(BuildContext context) {
return Container(
child:
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
),
);
}
There is no way to change the direction of Chip Widget. But we can customize the Chip
Chip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
),
another solution is given by ibhavikmakwana
Additions
as in the above view are visible the same as per requirement but onTap is not working I am working on finding the reason why it's not working.
I have created the custom chip View, for mean while you can use it its working fine
Wrap(
children: <Widget>[
Container(
padding: const EdgeInsets.fromLTRB(5.0, 5.0, 5.0, 5.0),
decoration: BoxDecoration(
color: Color(0xffDBDBDB),
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(20.0),
),
child: Wrap(
alignment: WrapAlignment.center,
crossAxisAlignment: WrapCrossAlignment.center,
runSpacing: 10,
children: <Widget>[
InkWell(
onTap: () {
print("bla");
},
child: Icon(
Icons.close,
),
),
Padding(padding: const EdgeInsets.all(5.0)),
Text(
"bla",
),
],
),
)
],
),
You can either use a RawChip, Chip,
and in avatar field pass your delete icon.
You can wrap your delete icon with InkeWell or GestureDetector to get the onTap event.
RawChip(
label: Text(
"bla",
),
avatar: InkWell(
onTap: () {},
child: Icon(
Icons.close,
),
),
)
Using delete in Avatar doesn't allow tap events, even with Inkwell or GestureDetector.
Use the Directionality widget instead
Directionality(
textDirection: TextDirection.rtl,
child: Chip(
deleteIcon: Icon( Icons.close, ),
onDeleted: () {setState(() {print("bla");}); }
label: Text("bla",),
),
);

Analog for TagView in flutter

I want to have UI like this:
With native Android it can be done with libraries like https://github.com/whilu/AndroidTagView, how can it be done with flutter?
you can make the same UI by combining the Wrap and Chip widget as #wasyl montioned . but this is a full example about what you need
Notes :
you can adjust the space between the chips inside the Wrap widget
using spacing
the deleteIcon is only in the right but you can use the avatar to show an icon in the left
you can set the Chip Border Color and width using the Shape property
new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Wrap(
children: <Widget>[
Chip(
label: new Text("Java"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
Chip(
label: new Text("C++"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
Chip(
label: new Text("Python"),
onDeleted: () {},
labelPadding: EdgeInsets.all(2.0),
deleteIcon: Icon(Icons.clear),
),
],
),
new SizedBox(
height: 10.0,
),
new Wrap(
spacing: 5.0,
children: <Widget>[
Chip(
label: new Text("China"),
backgroundColor: Colors.pinkAccent,
),
Chip(
label: new Text("USA"),
backgroundColor: Colors.greenAccent,
),
Chip(
label: new Text("Austria"),
backgroundColor: Colors.purpleAccent,
),
],
),
new SizedBox(
height: 10.0,
),
new Wrap(
textDirection: TextDirection.rtl,
spacing: 5.0,
children: <Widget>[
Chip(
label: new Text("نجربة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
Chip(
label: new Text("كتابة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
Chip(
label: new Text("مختلفة"),
avatar: Icon(Icons.clear),
backgroundColor: Colors.transparent,
shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
],
),
],
),
You will want to use:
a Wrap widget to have your chips (tags) be positioned one by one, overflowing to the next row
a Chip widget for a material-design chip with text, optional delete button, delete callback etc.
Seems like the border width can't be easily set for a Chip, though, but the overall functionality is readily available