Flutter ListTile not aligning correctly - flutter

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.

Related

how to remove list tile separator flutter

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!',
),
),
),

How to place three entries in one line in the flutter (settings ui)

I have a page where I show my weight. The problem is that now I display the gross weight, packaging, net in the list. And I want to mark them in a line. Here is my code:
SettingsSection(
title: 'Weight',
tiles: [
SettingsTile(
leading: FaIcon(FontAwesomeIcons.weightHanging),
title: 'Gross',
subtitle: '490000',
subtitleTextStyle:TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.black)
),
SettingsTile(
leading: FaIcon(FontAwesomeIcons.weightHanging),
title: 'Packaging',
subtitle: '19000',
subtitleTextStyle:TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.black)
),
SettingsTile(
leading: FaIcon(FontAwesomeIcons.weightHanging),
title: 'Net',
subtitle: '30000',
subtitleTextStyle:TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.black)
),
SettingsTile(
leading: FaIcon(FontAwesomeIcons.weightHanging),
title: 'Gross'+' '+'Packaging'+' '+'Net',
subtitle: '490000'+' '+ '19000'+' '+ '30000',
subtitleTextStyle:TextStyle(fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.black)
),
],
),
This code shows how I display the weight (first 3 entries). But I want to display it in a line, as in the last version. But the problem is that when the weight changes (the number of symbols), everything starts to move and look wrong. Is it possible to make drinking so that nothing moves ??
My image:
Try below code hope its helpful to you.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.shopping_bag),
Expanded(
child: ListTile(
title: Text('Gross'),
subtitle: Text('490000'),
),
),
Expanded(
child: ListTile(
title: Text('Packaging'),
subtitle: Text('19000'),
),
),
Expanded(
child: ListTile(
title: Text('Net'),
subtitle: Text('30000'),
),
),
],
),
Your result screen->

How can I change the height of CupertinoNavigationBar in Flutter?

I want to increase CupertinoNavigationBar heigth. The code is like this:
child: CustomCupertinoNavigationBar(
padding: EdgeInsetsDirectional.zero,
backgroundColor: Colors.white,
middle: Semantics(
label: "dashboard-main-page-title",
child: Text(
"My Title",
style: TextStyles.HankenSans_Bold_18_PrimaryBlack,
key: Key('dashboard-main-page-title'),
),
),
leading: Semantics(
label: "dashboard-back-button",
child: Material(
color: Colors.white,
child: CustomBackButton(
onPressHandler: () {
Navigation().openMyAccountPage();
},
),
),
),
);
I tried creating my own custom cupertino. I copied the cupertino/nav_bar.dart and changed _kNavBarPersistentHeight parameter as const double _kNavBarPersistentHeight = 58.0; but it resulted at two navigation bars in IOS. Can anybody help me with this? Much appreciated.
I solved this problem as
appBar: PreferredSize(
preferredSize: Size.fromHeight(100.0),
child: Container(
height: 120,
child: CupertinoNavigationBar(
padding: EdgeInsetsDirectional.zero,
backgroundColor: Colors.white,
middle: Semantics(
label: "dashboard-main-page-title",
child: Text(
CustomerLoyaltyLocalizations.instance.dashboardMainPageTitle,
style: TextStyles.HankenSans_Bold_18_PrimaryBlack,
key: Key('dashboard-main-page-title'),
),
),
leading: Semantics(
label: "dashboard-back-button",
child: Material(
color: Colors.white,
child: CustomBackButton(
onPressHandler: () {
Navigation().openMyAccountPage();
},
),
),
),
),
),
),
First I used PreferredSize and then Container widget before CupertinoNavigationBar.

Flutter: leading letter instead of icon for ListTile

I think this image is self explanatory of what I want to archive:
ListTile(
// leading: Icon(Icons.attach_money), <-- this works but I need the currency icon dynamic
leading: Text(
"€",
style: TextStyle(
fontSize: 20,
),
),
title: Text(translate('options.currency')),
subtitle: Text(translate('options.currency_help')),
onTap: () {
showCurrencyPicker(
context: context,
searchHint: translate('options.search_currency'),
showFlag: true,
showCurrencyName: true,
showCurrencyCode: true,
onSelect: (Currency currency) {
print('Select currency: ${currency.name}');
},
favorite: [_options['currency']],
);
},
),
I can show it but I'm not sure how to center it properly
you can use PreferredSize, i am testing it and working
PreferredSize(
preferredSize: Size.fromHeight(100.0),
// here the desired height
child: Text("€", style: TextStyle(fontSize:30,height: 1.5),),
)
You can add a SizedBox, and put the text like this
ListTile(
leading: SizedBox(
height: 100.0, //desired height
width: 100.0, //desired width
child: Text("£", //any currency you want
style: TextStyle(
fontSize: 20,
),
),
),
title: ...,
subtitle: ...
),

Flutter: How can I make leading icon space?

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