This is an example of the header in the Grailed App, there's a title in the top left, and when the page is scrolled down the title shows in the top centre:
This is what I have so far:
class AccountPageHeader extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SliverAppBar(
backgroundColor: kMainBG,
expandedHeight: 90,
toolbarHeight: 50,
pinned: true,
elevation: 0,
automaticallyImplyLeading: false,
flexibleSpace: FlexibleSpaceBar(
centerTitle: false,
title: Text(
"Account",
style: TextStyle(color: Colors.white, fontWeight: FontWeight.w800),
),
titlePadding: EdgeInsets.all(kDefaultPadding),
),
actions: [],
);
}
}
My title is in the flexible space and just sort of transitions on to the top left whe scrolled down on the page.
If anyone could lead me to the right place on how to achieve the app bar on the Grailed example I would appreciate it! TYIA!
We can get this effect using CupertinoSliverNavigationBar.
CupertinoSliverNavigationBar(
largeTitle: Text("Account"),
),
Related
The image above shows how I enabled the immersive mode.
This is how the AppBar looks without any modification.
And this is how it looks like, when I set the toolbarHeight to 10.
Here is the code from the image:
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
backgroundColor: const Color(0xFF892D89),
toolbarHeight: 10,
centerTitle: true,
title: Container(
height: 30,
child: Image.asset('assets/fontlogo.png'),
),
),
);
}
I tried various of ways to solve this problem, but couldn't do it. One of those ways was to set resizeToAvoidBottomInset to true.
Scaffold(
resizeToAvoidBottomInset: true,
),
Or to use titleSpacing.
AppBar(
titleSpacing: 50,
title: Text('SignShine'),
),
If someone knows the solution, I would appreciate the reply and thank them in advance.
I have a fairly complicated screen I am trying to implement in Flutter.
It's a scrollview with a parallax background and...kind of a collapsing toolbar.
I know I have to probably use a NestedScrollView and SliverAppBar(?), but not sure where to start on implementing. I think a picture would best show what I am trying to accomplish:
The list starts below a Container. As you scroll the list, the Container shrinks to a smaller Container and is pinned to the top. Does that make sense? Any help would be greatly appreciated!
This is using SliverAppBar with expandedHeight. I will encourage checking this video.
#override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) => CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
expandedHeight: constraints.maxHeight * .3,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("Title"),
background: Container(
color: Colors.pink,
),
),
),
SliverToBoxAdapter(
child: Container(
height: constraints.maxHeight * 4,
color: Colors.deepOrange,
),
)
],
),
),
);
}
How to create vertical tab navigation for dashboard in flutter web and whats it the best way?
You can you a NavigationRail to get this look. It was added to flutter this year. It works almost like the bottom tab bar.
I believe you want something similiar to what is shown in the screenshot right?
If so, I would recommend you to use the Scaffold Widget and making use of the attributes appBar and drawer.
For further information about the Scaffold Widget please check this link.
Here a simple example:
In your main Widget modify the build function like this.
#override
Widget build(BuildContext context) {
GlobalKey<ScaffoldState> key = GlobalKey();
return Scaffold(
key: key,
drawer: Padding(
padding: const EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Container(
color: Colors.red,
width: 300,
child: Column(children: [Text("1"), Text("2"), Text("3")])),
),
appBar: AppBar(
toolbarHeight: 70,
elevation: 5,
centerTitle: true,
backgroundColor: Colors.black,
leading: RawMaterialButton(
child: Icon(Icons.menu),
onPressed: () => key.currentState.openDrawer(),
),
title: Container(child: Text("Title Widget")),
),
body: Container(
child: Text("Main Widget"),
));
}
The result would look like this:
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.
I'm trying to display a flexible SliverAppBar below a custom app bar (let's say it's a container with a height of 80.0).
When making the SliverAppBar the top element, it works fine, but when it's the second one, there is a top-padding as big as the Android UI interface.
Scaffold(
body: Column(children: <Widget>[
Container(height: 80.0),
Expanded(child: _content())
]),
);
_content()
return CustomScrollView(slivers: <Widget>[
SliverAppBar(
backgroundColor: Colors.red,
leading: PopContentButton(),
title: Text('Test'),
snap: true,
pinned: true,
floating: true,
bottom: TabBar(
tabs: _tabs(),
controller: TabControllerExtended(length: 4, vsync: this),
),
),
SliverList(delegate: new SliverChildListDelegate(buildTextViews(50)))
]);
This is not how it should look:
(source: bilder-upload.eu)
It should look like:
(source: bilder-upload.eu)
Wrap you - SliverAppBar with MediaQuery.removePadding.
Updated Code :
....
MediaQuery.removePadding(
context: context,
removeTop: true,
child: SliverAppBar(
...