How can I customise the flexibleSpace property in SliverAppBar in Flutter?
0
Instead of using FlexibleSpaceBar in the flexibleSpace property of SliverAppBar I want to use a custom widget tree, when expanded, but upon scrolling, I want to display a custom text, and not the widget tree.
I have created a custom widget tree which shall be assigned to the flexibleSpace property, but I don't know how to display custom text on scrolling, and hide the widget tree.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
dart
flutter asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
add a comment |
0
Instead of using FlexibleSpaceBar in the flexibleSpace property of SliverAppBar I want to use a custom widget tree, when expanded, but upon scrolling, I want to display a custom text, and not the widget tree.
I have created a custom widget tree which shall be assigned to the flexibleSpace property, but I don't know how to display custom text on scrolling, and hide the widget tree.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
dart
flutter asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
add a comment |
0
0
0
Instead of using FlexibleSpaceBar in the flexibleSpace property of SliverAppBar I want to use a custom widget tree, when expanded, but upon scrolling, I want to display a custom text, and not the widget tree.
I have created a custom widget tree which shall be assigned to the flexibleSpace property, but I don't know how to display custom text on scrolling, and hide the widget tree.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
dart
flutter asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
Instead of using FlexibleSpaceBar in the flexibleSpace property of SliverAppBar I want to use a custom widget tree, when expanded, but upon scrolling, I want to display a custom text, and not the widget tree.
I have created a custom widget tree which shall be assigned to the flexibleSpace property, but I don't know how to display custom text on scrolling, and hide the widget tree.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
dart
flutter dart
flutter asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
asked Dec 28 '18 at 17:53
Ayush ShekharAyush Shekhar
328
328
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
You may want to wrap your widget tree inside a FlexibleSpaceBar widget and add your widget tree as background. I hope I understood your question right. Check this gif.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
),
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
Thank you. This solves a part of my problem which is that I can hide my custom widget tree on scrolling. The second part is that I also want to be able to display some text on the app bar while its pinned, and the user is scrolling, currently, its just blank with the red background.
– Ayush Shekhar
Dec 29 '18 at 1:35
Hey, I just saw your comment. Let me think and give you answer if it's not resolved yet.
– westdabestdb
Dec 29 '18 at 12:58
Sure. Please do. Thanks.
– Ayush Shekhar
Dec 30 '18 at 10:39
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53962444%2fhow-can-i-customise-the-flexiblespace-property-in-sliverappbar-in-flutter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
You may want to wrap your widget tree inside a FlexibleSpaceBar widget and add your widget tree as background. I hope I understood your question right. Check this gif.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
),
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
Thank you. This solves a part of my problem which is that I can hide my custom widget tree on scrolling. The second part is that I also want to be able to display some text on the app bar while its pinned, and the user is scrolling, currently, its just blank with the red background.
– Ayush Shekhar
Dec 29 '18 at 1:35
Hey, I just saw your comment. Let me think and give you answer if it's not resolved yet.
– westdabestdb
Dec 29 '18 at 12:58
Sure. Please do. Thanks.
– Ayush Shekhar
Dec 30 '18 at 10:39
add a comment |
2
You may want to wrap your widget tree inside a FlexibleSpaceBar widget and add your widget tree as background. I hope I understood your question right. Check this gif.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
),
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
Thank you. This solves a part of my problem which is that I can hide my custom widget tree on scrolling. The second part is that I also want to be able to display some text on the app bar while its pinned, and the user is scrolling, currently, its just blank with the red background.
– Ayush Shekhar
Dec 29 '18 at 1:35
Hey, I just saw your comment. Let me think and give you answer if it's not resolved yet.
– westdabestdb
Dec 29 '18 at 12:58
Sure. Please do. Thanks.
– Ayush Shekhar
Dec 30 '18 at 10:39
add a comment |
2
2
2
You may want to wrap your widget tree inside a FlexibleSpaceBar widget and add your widget tree as background. I hope I understood your question right. Check this gif.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
),
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
You may want to wrap your widget tree inside a FlexibleSpaceBar widget and add your widget tree as background. I hope I understood your question right. Check this gif.
SliverAppBar(
expandedHeight: 180.0,
backgroundColor: const Color(0xFF9e0118),
iconTheme: IconThemeData(color: Colors.white),
floating: true,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
collapseMode: CollapseMode.pin,
centerTitle: true,
background: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'Some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontStyle: FontStyle.italic,
fontSize: 16.0),
)),
Container(
margin: EdgeInsets.only(top: 16.0),
padding: EdgeInsets.only(left: 32.0, right: 32.0),
child: Text(
'some text',
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontFamily: 'PlayfairDisplay',
fontSize: 16.0),
)),
],
),
),
),
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
answered Dec 28 '18 at 18:38
westdabestdbwestdabestdb
1,221316
1,221316
Thank you. This solves a part of my problem which is that I can hide my custom widget tree on scrolling. The second part is that I also want to be able to display some text on the app bar while its pinned, and the user is scrolling, currently, its just blank with the red background.
– Ayush Shekhar
Dec 29 '18 at 1:35
Hey, I just saw your comment. Let me think and give you answer if it's not resolved yet.
– westdabestdb
Dec 29 '18 at 12:58
Sure. Please do. Thanks.
– Ayush Shekhar
Dec 30 '18 at 10:39
add a comment |
Thank you. This solves a part of my problem which is that I can hide my custom widget tree on scrolling. The second part is that I also want to be able to display some text on the app bar while its pinned, and the user is scrolling, currently, its just blank with the red background.
– Ayush Shekhar
Dec 29 '18 at 1:35
Hey, I just saw your comment. Let me think and give you answer if it's not resolved yet.
– westdabestdb
Dec 29 '18 at 12:58
Sure. Please do. Thanks.
– Ayush Shekhar
Dec 30 '18 at 10:39
Thank you. This solves a part of my problem which is that I can hide my custom widget tree on scrolling. The second part is that I also want to be able to display some text on the app bar while its pinned, and the user is scrolling, currently, its just blank with the red background.
– Ayush Shekhar
Dec 29 '18 at 1:35
Thank you. This solves a part of my problem which is that I can hide my custom widget tree on scrolling. The second part is that I also want to be able to display some text on the app bar while its pinned, and the user is scrolling, currently, its just blank with the red background.
– Ayush Shekhar
Dec 29 '18 at 1:35
Hey, I just saw your comment. Let me think and give you answer if it's not resolved yet.
– westdabestdb
Dec 29 '18 at 12:58
Hey, I just saw your comment. Let me think and give you answer if it's not resolved yet.
– westdabestdb
Dec 29 '18 at 12:58
Sure. Please do. Thanks.
– Ayush Shekhar
Dec 30 '18 at 10:39
Sure. Please do. Thanks.
– Ayush Shekhar
Dec 30 '18 at 10:39
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53962444%2fhow-can-i-customise-the-flexiblespace-property-in-sliverappbar-in-flutter%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
