Develop Reference

How to fix icons in AppBar when changing toolbarHeight in Flutter?

This is my app bar with one line text:
appBar: AppBar(
title: Text("Summer Trip"),
centerTitle: true,
actions: [
PopupMenuButton(
itemBuilder: (context){
return [
PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
],
),
And it gives the following result:
As you see the center of the row is about 25 pixels from screen border.
Now I need to add the second line to my title. This is my solution:
appBar: AppBar(
toolbarHeight: 70,
flexibleSpace: SafeArea(
child: Center(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 10),
child: Text('Summer Trip',
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w500, fontSize: 20.0)
),
),
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text('Step 1',
style: TextStyle(color: Colors.white54, fontWeight: FontWeight.normal, fontSize: 14.0)
),
),
],
),
),
),
actions: [
PopupMenuButton(
itemBuilder: (context){
return [
PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
],
),
And this is the result:
As you see, if we increase toolbarHeight of AppBar then arrow and menu buttons move down. However, I need them to stay at the same position. Could anyone say how to do it?

You can wrap your widgets with Align widget.
appBar: AppBar(
toolbarHeight: 70,
flexibleSpace: SafeArea(
child: Center(
child: Column(
children: const [
Padding(
padding: EdgeInsets.only(top: 10),
child: Text('Summer Trip',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 20.0)),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Step 1',
style: TextStyle(
color: Colors.white54,
fontWeight: FontWeight.normal,
fontSize: 14.0),
),
),
],
),
),
),
leading: Align(
alignment: Alignment.topCenter,
child: IconButton(
onPressed: () {},
icon: const Icon(
Icons.arrow_back,
),
),
),
actions: [
Align(
alignment: Alignment.topCenter,
child: PopupMenuButton(
itemBuilder: (context) {
return [
const PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
),
],
),
Output:

Thanks to #Pavel_K for correcting me, earlier I misunderstood the question.
Corrected Answer
Instead of using flexibleSpace, use title (for the main title) and bottom (for the subtitle). This approach will solve your query, and make the icons stay on top (along the center of the title).
appBar: AppBar(
centerTitle: true,
toolbarHeight: 70,
leading: const Icon(Icons.arrow_back),
title: Column(
children: const [
Text(
'Summer Trip',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
],
),
bottom: const PreferredSize(
preferredSize: Size(0, 14),
child: Padding(
padding: EdgeInsets.only(bottom: 8),
child: Text(
'Step 1',
style: TextStyle(
color: Colors.white54,
fontWeight: FontWeight.normal,
fontSize: 14.0,
),
),
),
),
actions: [
PopupMenuButton(
itemBuilder: (context) {
return [
const PopupMenuItem<int>(
value: 0,
child: Text("Test"),
),
];
},
),
],
),
Old (incorrect) Answer
I think you are using the flexibleSpace with the incorrect intent; it is meant to be used with FlexibleSpaceBar.
What you want to achieve can be simply achieved using title property of AppBar, and it will center the icon on it's own.
It will look like this:
appBar: AppBar(
centerTitle: true,
toolbarHeight: 70,
leading: const Icon(Icons.arrow_back),
title: Column(
children: const [
Padding(
padding: EdgeInsets.only(top: 10),
child: Text(
'Summer Trip',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w500,
fontSize: 20.0,
),
),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Text(
'Step 1',
style: TextStyle(
color: Colors.white54,
fontWeight: FontWeight.normal,
fontSize: 14.0,
),
),
),
],
),
),

Some some code crashes my application on flutter

Im new in flutter, so i follow someone's tutorial to make music player app, everything normal until my app suddenly crashed, i tried to re-run the app but still it's crashed and i try to remove the code that last time i create and the app run normal, so what's wrong with the code?, sorry for my bad english.
....////
Widget _buildWidgetArtistName(MediaQueryData mediaQuery) {
return SizedBox(
height: mediaQuery.size.height / 1.8,
child: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Stack(
children: <Widget>[
Positioned(
child: Text(
'Grande',
style: TextStyle(
color: Colors.white,
fontFamily: 'CoralPen',
fontSize: 72.0,
),
),
top: constraints.maxHeight - 100.0,
),
Positioned(
child: Text(
'Ariana',
style: TextStyle(
color: Colors.white,
fontFamily: 'CoralPen',
fontSize: 72.0,
),
),
top: constraints.maxHeight - 140.0,
),
Positioned(
child: Text(
'Tranding',
style: TextStyle(
color: Color(0xFF7D9AFF),
fontSize: 14.0,
fontFamily: 'Campton_Light',
fontWeight: FontWeight.w800,
),
),
top: constraints.maxHeight - 160.0,
),
],
);
},
),
),
);
}
#override
Widget build(BuildContext context) {
var mediaQuery = MediaQuery.of(context);
return Scaffold(
key: scaffoldState,
body: Stack(
children: [
_buildWidgetAlbumCover(mediaQuery),
_buildWidgetActionAppBar(mediaQuery),
_buildWidgetArtistName(mediaQuery), // This causing crash
],
),
);
}

How to use column inside single child scroll view flutter

I have a column inside a single child scroll view. I need to make my login screen scroll when I type using the keyboard because the keyboard hides the password text field.
class UserRegistration extends StatefulWidget {
#override
_UserRegistrationState createState() => _UserRegistrationState();
}
class _UserRegistrationState extends State<UserRegistration> {
#override
Widget build(BuildContext context) {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Color(0xFF6C62FF)
));
return SafeArea(
child: GestureDetector(
onTap: () => FocusScope.of(context).requestFocus(FocusNode()),
child: Scaffold(
resizeToAvoidBottomInset: false,
resizeToAvoidBottomPadding: false,
backgroundColor: Color(0xFF6C62FF),
body: SingleChildScrollView(
padding: EdgeInsets.symmetric(horizontal: 30),
child: Column([![enter image description here][1]][1]
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Center(child: FittedBox(child: Text('Welcome', style: TextStyle(fontFamily: 'SourceSans', fontSize: 50, fontWeight: FontWeight.w600, color: Color(0xFFFFD700)),))),
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Register', style: TextStyle(fontFamily: 'SourceSans', fontSize: 40, fontWeight: FontWeight.w600, color: Colors.white)),
SizedBox(height: 5,),
Text('Start from today', style: TextStyle(fontFamily: 'SourceSans', fontSize: 25, letterSpacing: 1.5,fontWeight: FontWeight.w600, color: Colors.white), overflow: TextOverflow.ellipsis,),
],
),
),
Form(
child: Column(
children: [
EditTextNormal(hintText: 'Email', iconData: Icons.email, textInputType: TextInputType.emailAddress, validate: false, errorText: 'Enter your email',),
SizedBox(height: 20,),
EditTextObscure(hintText: 'Password', iconData: Icons.lock, textInputType: TextInputType.text, validate: false, errorText: 'Enter your password',),
SizedBox(height: 50,),
Container(
height: 50,
width: 180,
child: FlatButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8)
),
onPressed: () {},
color: Colors.white,
child: Text('Register', style: TextStyle(color: Color(0xFF6C62FF), fontSize: 20), overflow: TextOverflow.ellipsis,),
),
)
],
),
),
Center(
child: RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'Login', style: TextStyle(color: Color(0xFFFFD700), letterSpacing: 1, wordSpacing: 1.5))
],
text: 'Have an account? ',
style: TextStyle(fontSize: 18, fontFamily: 'SourceSans', fontWeight: FontWeight.bold, letterSpacing: 1, wordSpacing: 1.5)
),
),
),
],
),
),
),
),
);
}
}
This is my code but here when I use a column inside a single child scroll view space evenly does not work. Please give me a solution.
My output:
Expected Output:

Try This
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: MediaQuery.of(context).size.height,
),
child: IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
// CONTENT HERE
],
),
),
),
),
);
}

Add Container inside SingleChildScrollView and assign it height based on your keyboard open or not.
Add Dependency:
dependencies:
keyboard_visibility: ^0.5.6
Initialize keyboard listener in initState() for callback
bool _isKeyBoardShown = false;
#protected
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool visible) {
setState(() {
_isKeyBoardShown = visible;
});
},
);
}
Based on _isKeyBoardShown value decide whether to add additional height on the screen or not.
Container(
width: MediaQuery.of(context).size.width,
height: _isKeyBoardShown
? MediaQuery.of(context).size.height +
MediaQuery.of(context).size.height / 2
: MediaQuery.of(context).size.height,
child: Column(....)
)
Note: Use MediaQuery to decide additional height don't use hard-coded values
here I used MediaQuery.of(context).size.height / 2

Flutter padding issues on Android devices

I have the following widget in my Flutter app, which is pretty basic but for some reason, the padding is not working on some Android devices attached screenshot and code.
Code:
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
centerTitle: true,
title: Column(children: [
Text(
'register',
style: new TextStyle(
fontSize: 24.0,
color: Colors.white,
),
),
Text(
'Availability results',
style: new TextStyle(
fontSize: 18.0,
color: Colors.white,
),
),
]),
),
body: ListView(
children: <Widget>[
Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 12.0, bottom: 6.0),
child: Text(
'Showing results for',
style: Theme.of(context).textTheme.headline,
),
),
Padding(
padding: EdgeInsets.only(bottom: 12.0),
child: Text(
'"${_availabilityRespose.query}"',
style: Theme.of(context).textTheme.title,
),
),
It's bascially the padding in the list view

instead of using static values you should use dynamic values with
MediaQuery.of(context).size.width
MediaQuery.of(context).size.height
which may solve your problem but it is not a good solution. try to use Expanded with flex
Expanded(flex: 1, child: yourChild())
and you can test on device or emulator with different size and densities

Icons Won't Show Up Correctly Flutter

More often than not, the icons I select to display will not show up (or will show up incorrectly) throughout my entire application. I'm not importing any new icons, all of the ones I use are selected from Flutter's default library.
On Android devices it is pretty much hit-or-miss; either all of the icons show up correctly, or they all give the same error placeholder. Like I said its much more often that they do not show.
iOS is a different story, while they still usually don't work correctly, it sometimes gives random emojis instead of the correct icon or error boxes. As you can see in the second picture, it placed a forward arrow emoji in place of what should have been the list-like icon to open the Drawer. Previously, the Close icon inside the Drawer was displaying as the strong arm emoji.
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.format_align_center),
onPressed: () => _scaffoldKey.currentState.openDrawer(),
),
title: Text(
"INFORMATION",
style: TextStyle(
fontFamily: 'Titillium SemiBold',
fontSize: 37.0,
),
),
centerTitle: false,
backgroundColor: Colors.white,
elevation: 0.5,
),
drawer: Drawer(
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 150.0,
color: Colors.white.withRed(191).withGreen(194).withBlue(200),
child: FittedBox(
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 8.0),
child: Text(
"VITALITY PRO",
style: TextStyle(
color: Colors.white
),
),
)
)
),
SizedBox(height: 10.0),
ListTile(
title: Text(
"TERMS & CONDITIONS",
style: TextStyle(
fontSize: 18.0,
),
),
onTap: () => Navigator.pushNamed(context, '/terms'),
),
Divider(),
ListTile(
title: Text(
"PRIVACY POLICY",
style: TextStyle(
fontSize: 18.0
),
),
onTap: () => Navigator.pushNamed(context, '/privacy'),
),
Divider(),
SizedBox(height: 10.0),
ListTile(
title: Text(
"CLOSE",
style: TextStyle(
fontSize: 18.0
),
),
trailing: Icon(Icons.clear),
onTap: () => Navigator.pop(context),
),
SizedBox(height: 10.0),
Divider(),
Flexible(
fit: FlexFit.loose,
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text(
"LOGOUT",
style: TextStyle(
color: Colors.black38,
),
),
onPressed: () => Navigator.pushNamed(context, '/origin'),
),
Text("#Copyright 2018, ISPA Technology, LLC"),
],
),
),
),
],
),
),
),

That's a known issue that was fixed since.
Run
flutter upgrade
to get a newer Flutter version where this fix is included.