I am trying to make an app bar looks like this:
I hope to collapse the big image using SilverAppBar, but I am having hard time to insert AssetImage (or Image.asset'). I almost exactly followed the code from the [official Flutter website][2], and unfortunately, both AssetImageandImage.asset` cannot be used as shown below:
Is there any way to do this?
Wrap Image.asset with Container widget
Stack(
fit: StackFit.expand,
children: <Widget>[
Container(
child: Image.asset('name'),
)
],
),
maybe you can use background like this:
SliverAppBar(
...
...
background: Image(
image: NetworkImage(recipeDetails.coverPhoto),
fit: BoxFit.cover,
),
),
Please add background_app_bar: ^1.0.0
dependency.
import 'package:background_app_bar/background_app_bar.dart';
...
SliverAppBar(
backgroundColor: Colors.white,
pinned: true,
snap: true,
floating: true,
expandedHeight: 160.0,
flexibleSpace: new BackgroundFlexibleSpaceBar( // Add this
title: new Text('title'),
centerTitle: false,
titlePadding: const EdgeInsets.only(left: 5.0, bottom: 5.0),
background: Image.asset('url'),
),
),
Related
for now I have mock of view as presented. I want this app bars title to be twice as big when I'm on the top of the screen with no buttons, and scale smoothly back to current form with two buttons when I scroll down. I tried to experiment with sliverappbar but without effect. I use here scaffold with standard app bar. Is there a convenient way to achieve it, or I have to write it myself. I'd be thankful for any advice.
EDIT: Something like showed here gif
You can use CustomScrollView with Slivers to achieve your desired result. I'm sharing an example for this you can customize it as per your need.
CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
expandedHeight: 120,
flexibleSpace: FlexibleSpaceBar(
title: Text("Barb's Latest",style: TextStyle(fontSize: 30),),titlePadding: EdgeInsets.all(15),
),automaticallyImplyLeading: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) => Container(
height: 100,
margin: EdgeInsets.only(bottom: 10),
color: Colors.red,
),
childCount: 50))
],
)
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,
),
)
],
),
),
);
}
I'm currently working on a screen that includes a Flutter Stepper within a CustomScrollView. There is a SliverAppBar and the Stepper is wrapped in a SliverToBoxAdapter and a Padding. Unfortunately, there is a blank space above the Stepper that doesn't seem to belong to the Padding or the Box Adapter. If I add the Stepper to a normal Scaffold, this space is not visible. Please see the attached screenshots. Does anyone know how to solve that? Thanks in advance!
Here is the code:
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
pinned: true,
snap: false,
floating: false,
automaticallyImplyLeading: false,
expandedHeight: 250,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20))),
flexibleSpace: FlexibleSpaceBar(...),
),
SliverPadding(
padding: const EdgeInsets.all(10),
sliver: SliverToBoxAdapter(
child: Stepper(...),
),
)
],
),
);
}
And here are some screenshots:
Screen Layout
Screen Layout with Debug Paint
I read about this in another thread just with a ListView instead of a Stepper. The solution is to wrap the Stepper with MediaQuery.removePadding(...) and set the removeTop attribute to true.
SliverPadding(
padding: const EdgeInsets.all(10),
sliver: SliverToBoxAdapter(
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: Stepper(...)
)
)
)
I have an App-Bar , where i need to place an Text below the Image in the App-Bar. The text should align directly below the below. I have tried many ways but i cannot find a way to do it. [Image of the Output i am getting now][1]
appBar:
new PreferredSize(
preferredSize: const Size.fromHeight(240.0),
child: new AppBar(
centerTitle: true,
title: Row(),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [reddish, blushish],
),
),
),
bottom: new PreferredSize(
child: new Container(
child: new Image.asset('assets/rewahub_icon.png'),
padding: const EdgeInsets.all(80.0),
),
preferredSize: const Size.fromHeight(100.0)),
),
),
I am not able to place a text below the Png file that is image file. I would like to place a text below the Image file. Please do help me with this.
[1]: https://i.stack.imgur.com/P45ya.jpg
You can wrap your image in a column and add a text widget in this column.
child: Column(
children: <Widget>[
new Image.asset('assets/rewahub_icon.png'),
Text('I got my text here'),
],
)
you can but all widgets you want to start at the same align in a column
and use MainAxisAlignment property like: MainAxisAlignment.start
you can use padding if you want some spaces around too ..
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(
...