I just started learning dart(flutter) using Angela's course, but unfortunately it seems outdated so I cant seem to understand how to do this from there.
I need to move the title to the center (I have it on the right just to test it, but even that didn't work):
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("I am Rich",textAlign:TextAlign.right),
),
),
));
}
The title property in the AppBar is centred by default. If you don't want that, you can set the 'centreTitle' property of the AppBar to false.
appBar: AppBar(
title: Text("Your title"),
),
appBar: AppBar(
centerTitle: false,
title: Text("Your title"),
),
On devices with text direction left to right, the title will be to the left it centerTitle is set it to false. If you really want to set it to the right, wrap your title widget with a Row Widget and set its mainAxisAlignment to mainAxisAlignment.end like this:
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text("Your title"),
],
),
),
On AppBar use centerTitle: true,
AppBar(
centerTitle: true,
title: Text("Chalo"),
),
does it solve on your case?
Related
The AppBar in iOS has an extra space above, and so the icon doesn't look like it's aligned vertically, how do you remove the extra space above? Thanks! Please refer to screenshots below:
Code:
Scaffold(
appBar: AppBar(
toolbarHeight: 70,
backgroundColor: Colors.white,
title: SvgPicture.asset(
Assets.mainLogo,
width: 7.w,
),
centerTitle: true,
),
);
just remove toolbarHeight:70 this line
You need to use PreferredSize
appBar: PreferredSize(
preferredSize: Size.fromHeight(50.0), // here the desired height
child: AppBar(
// ...
)
),
Hi There I am working on a app where i need to use two sections in appbar one upper
1->section with logo and some Icons
2-> Search input field below the Title Section.
UI images are attached for better understanding.
you can customize the size of app bar by using toolbarHeight: 120.0 // set value
then use flexibleSpace to add column or rows
it will look something like this
import 'package:flutter/material.dart';
void main() => runApp(App());
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
toolbarHeight: 120.10, //set your height
flexibleSpace: SafeArea(
child: Container(
color: Colors.blue, // set your color
child: Column(
children: [
Row(
children: [Text("Logo")],
),
Text("data"), // set an icon or image
IconButton(
icon: Icon(Icons.search),
onPressed: () {}) // set your search bar setting
],
),
),
),
),
),
);
}
}
Just simply create your AppBar as intended, in your screenshot, you don't actually need a second Row. A TextFormField will be enough (you will actually need to customise the InputDecoration as well):
return AppBar(
title: Column(children: [
Row(children: [
Icon(Icons.menu),
Text('First row'),
const Spacer(),
Icon(Icons.person),
]),
TextFormField(),
]),
);
You can use the bottom property from the AppBar widget.
AppBar(
title: YourFirstRowWidget(),
centerTitle: true,
bottom: PreferredSize(
child: YourSearchBarWidget(),
preferredSize: null),
)
But you may want to create your own AppBar widget for a perfect result.
Is there any way of increasing height of app bar according to safe area in flutter cause the text in Center looks weird.
you can use toolbarHeight
AppBar(
toolbarHeight: 100,
title: Text('Main Page')
)
Yes you can do this like using below code. Put PreferredSize widget as a parent of AppBar and set a height.
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
title: Text('appbar'),
),
),
How do I achieve this effect? I wanted to expand my AppBar after clicking on the dates.
The simplest way is to bring toggle a veriable then change the height of the bottom widget.
Scaffold(
appBar: AppBar(
title: Text(widget.title),
actions: [IconButton(icon: Icon(Icons.place),onPressed: (){
setState((){
isOpen = !isOpen;
});
})],
bottom: PreferredSize(child: isOpen? Container(color:Colors.red, height: 100):Container(),preferredSize:Size.fromHeight(isOpen? 100:0) ,)
),)
How can I remove title bar on flutter bar?
displayMap() {
mapView.show(new MapOptions(
mapViewType: MapViewType.normal,
initialCameraPosition:
new CameraPosition(new Location(11.052992, 106.681612), 3.0),
showUserLocation: false,
title: 'Google Map'));
.....
}
I tried add Container(height: 0.0) and remove title: 'Google Map' but it only remove 'Google Map' text.
Edited:
My Scaffold
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Demo App'),
),
body: new Center(
child: Container(
child: RaisedButton(
child: Text('Touch'),
color: Colors.blue,
textColor: Colors.white,
elevation: 7.0,
onPressed: displayMap,
),
),
),
);
}
In some cases it is necessary to work with the AppBar but without displaying the title and one of these cases is when we have AppBar and TabBar together.
In this case you will need to remove the AppBar title and include the following property: toolbarHeight: 0
DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
bottom: TabBar(
isScrollable: false,
indicatorColor: Colors.blue,
onTap: (index) { },
tabs: [
Tab(text: "Pending"),
Tab(text: "Done"),
],
),
//this property
toolbarHeight: 0,
), body: TabBarView(...)
)
)
in your Scaffold you need to remove your appBar property:
return Scaffold(
//delete your appBar property in your related Scaffold.
body: YourBodyWidget(),
);
Edit : it is related with the map_view plugin
MapOptions(
{this.showUserLocation: false,
this.showMyLocationButton: false,
this.showCompassButton: false,
this.hideToolbar = false,
this.initialCameraPosition: _defaultCamera,
this.title: "",
this.mapViewType: MapViewType.normal});
these are the default MapOptions may be you can try to set hideToolbar:true but it is not what you want I think,
I think they are not provide a parameter to close appBar,
Lastly I would recommend to use google_maps_flutter plugin, this plugin only render the map and developed by Flutter Team so you can easily configure other staff in your page/scaffold.