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: ...
),
Related
I've tried to change the child from column to other types but still it didn't work. I'm not sure what's causing the error here but I'm suspecting its the screens[_currentindex] placement. Also when i click on one of the items in the bottom bar. The background color (dark blue) doesn't change to the color of my desired page. but current content disappears.
class _MyStatefulWidgetState extends State<focalPointProfile> {
**int _currentIndex = 0;**
Widget build(BuildContext context) {
**final List<Widget> screens = [
dashboardScreen(),
focalPointProfile(),
mentorRegistrationScreen(), ];**
return Scaffold(
resizeToAvoidBottomInset: false,
endDrawer: drawer(),
appBar: AppBar(
actions: [
Builder(
builder: (context) => IconButton(
icon: Icon((Icons.settings), color: Colors.green,),
onPressed: () => Scaffold.of(context).openEndDrawer(),
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
),
),
],
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
elevation: 1,
),
backgroundColor: Colors.blueGrey[800],
body: SafeArea(
minimum: const EdgeInsets.only(top: 100),
child: Column(
children: <Widget>[
Text(
name,
style: TextStyle(
fontSize: 40.0,
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: "Source Sans Pro",
),
),
Text(
position,
style: TextStyle(
fontSize: 30,
color: Colors.blueGrey[200],
letterSpacing: 2.5,
fontWeight: FontWeight.bold,
fontFamily: "Source Sans Pro"),
),
SizedBox(
height: 20,
width: 200,
child: Divider(
color: Colors.white,
),
),
// we will be creating a new widget name info carrd
buildTextField(email, Icons.web),
**screens[_currentIndex],**
],
),
),
**bottomNavigationBar: NavigationBar(
height: 50,
selectedIndex: _currentIndex,
onDestinationSelected: (index) => setState(() => _currentIndex = index),
destinations: const [
NavigationDestination(icon: Icon(Icons.home), label: 'home'),
NavigationDestination(icon: Icon(Icons.person), label: 'profile'),
NavigationDestination(icon: Icon(Icons.add), label: 'Add Mentor'),
],
),**
);
}
class _MyStatefulWidgetState extends State<focalPointProfile>
cant be the same as here
**final List<Widget> screens = [
dashboardScreen(),
focalPointProfile(),
mentorRegistrationScreen(), ];
You can read it here.
https://api.flutter.dev/flutter/widgets/StatefulWidget-class.html
I want to floating action button is front of the alert dialog, I tried add elevation to floatingactionbutton and alertdialog but still not working. is it possible to make floatingactionbutton overlapping all layout including alertdialog?
this my alertdialog using lib rflutter_alert
var alertStyle = AlertStyle(
// animationType: AnimationType.fromTop,
alertElevation: 1,
isCloseButton: false,
isOverlayTapDismiss: false,
descStyle: TextStyle(fontSize: textBody3),
descTextAlign: TextAlign.center,
titleStyle: TextStyle(
color: Colors.red,
fontSize: textHeader1,
fontWeight: FontWeight.bold),
alertAlignment: Alignment.center,
);
Alert(
context: context,
style: alertStyle,
content: Column(
children: <Widget>[
const SizedBox(
height: 30,
),
Text(msg),
const SizedBox(
height: 30,
),
Text(jam)
],
),
buttons: [
DialogButton(
child: Text(
"OK",
style: TextStyle(color: Colors.white, fontSize: textButton1),
),
onPressed: () => Navigator.pop(context),
color: Palette.color_primary,
radius: BorderRadius.circular(0.0),
),
],
image: flag == "OK"
? Image.asset(
"assets/images/success.png",
height: 50,
width: 50,
)
: Image.asset(
"assets/images/error.png",
height: 50,
width: 50,
),
).show();
and this the floatingactionbutton using lib DraggableFab
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: DraggableFab(
child: FloatingActionButton.extended(
elevation: 10,
onPressed: () {
getLocation();
},
label:ValueListenableBuilder(
valueListenable: notifierLocFab,
builder: (BuildContext context, bool value,Widget? child) {
return Column(
children: [
Text(latitudeFab.toStringAsFixed(7)),
Text(longitudeFab.toStringAsFixed(7)),
],
);
}),
),
),
);
}
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 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.
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