I am new to Flutter and I am trying to create a pop up menu. How can I make leading icon space? When I set null, the layout will be like the picture below. And when I try to set IconButton's icon null, the menu can't be opened.
The code is like this.
PopupMenuItem(
child: ListTile(
leading: null,
title: Text(
'Item3',
style: TextStyle(
color: Palette.whiteDarken1,
),
),
),
),
PopupMenuItem(
child: ListTile(
leading: IconButton(
icon: Icon(
Icons.exit_to_app,
color: Palette.whiteDarken1,
),
),
title: Text(
'Log In',
style: TextStyle(
color: Palette.whiteDarken1,
),
),
),
),
you can use a sizedbox with size as per your icon size for leading widget
Related
i want to remove the line under the list tile item like in the image :
..
note that my list tile is without ListView here is my code :
ListTile(
leading: ClipRRect(borderRadius: BorderRadius.circular(50),child:Image.memory(base64Decode(society['image'])
title: Text(society['Society_Name'] ),),
trailing: ElevatedButton(onPressed: (){
}, child: Icon(Icons.email_outlined, size: 25,), style: ElevatedButton.styleFrom(backgroundColor: green),),
),
Try below code and use Themes
Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child: ListTile(
title: Text(
'Hello, World!',
),
),
),
I am trying to use ListTile to create a list of options inside my drawer, written like this:
ListTile(
contentPadding: EdgeInsets.fromLTRB(15, 20, 0, 0),
leading: IconTheme(
data: Theme.of(context).iconTheme,
child: new Icon(FontAwesomeIcons.diceD6),
),
title: Text(
'FREE ASSETS',
style: Theme.of(context).textTheme.headlineMedium,
),
),
ListTile(
leading: IconTheme(
data: Theme.of(context).iconTheme,
child: new Icon(FontAwesomeIcons.folderOpen),
),
title: Text(
'RESOURCE COLLECTION',
style: Theme.of(context).textTheme.headlineMedium,
)),
ListTile(
leading: IconTheme(
data: Theme.of(context).iconTheme,
child: new Icon(FontAwesomeIcons.chalkboard),
),
title: Text(
'LESSONS',
style: Theme.of(context).textTheme.headlineMedium,
)),
ListTile(
leading: IconTheme(
data: Theme.of(context).iconTheme,
child: new Icon(FontAwesomeIcons.solidRectangleList),
),
title: Text(
'NEWSLETTER',
style: Theme.of(context).textTheme.headlineMedium,
)),
],
),
My issue is that the icons and text are not aligned with each other.
I have not added any padding or margins to the icon and I suspect its because its aligning it to the bottom however I am unsure. Is there a way for me to fix the alignment of the icons or text?
Thank you for the help!
Edit:
By adding horizontalTitleGap: 0 it reduces the space however they are still not aligned with each other.
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(...)
How to change default TextButton text color in flutter here is my code
TextButton(onPressed: null, child: Text('Add Item'))
Just add style property to Text constructor if you are not using a theme
TextButton(onPressed: null, child: Text('Add Item',
style: TextStyle(color: Colors.purple)))
If You are using the default theme in the main.dart file then it will pick the accentColor or u can manually also provide
TextButton(onPressed: null, child: Text('Add Item',
style: TextStyle(color: Theme.of(context).accentColor)))
TextButton(
style: TextButton.styleFrom(
backgroundColor: Colors."anyColour", // if you want to change button colour
),
child: Text('Your Text here',
style: TextStyle(
color: Colors."anyColour", // this is for your text colour
),
),
So your codes goes like this I believe
TextButton(onPressed: null,
child: Text('Add Item',
style: TextStyle(
color: Colors."anyColour",
),
),
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
],
),
),
),
),