Slide widgets off screen in flutter
I currently have a Widget that has three elements -- two buttons and a text input. On text input focus I would like to slide the buttons off the screen and expand the text input to occupy the remaining width.
Are there any flutter components (animation or otherwise) I can use to slide components off screen and animate the text field expansion?
flutter flutter-animation asked Nov 27 '18 at 21:53
user3038457user3038457
527
add a comment |
I currently have a Widget that has three elements -- two buttons and a text input. On text input focus I would like to slide the buttons off the screen and expand the text input to occupy the remaining width.
Are there any flutter components (animation or otherwise) I can use to slide components off screen and animate the text field expansion?
flutter flutter-animation asked Nov 27 '18 at 21:53
user3038457user3038457
527
it would help if you include a screenshot of the widget or the code for it and maybe a diagram showing exactly what you want to happen - are you wanting to slide the buttons off to the side, or the bottom, or the top?
– rmtmckenzie
Nov 27 '18 at 22:05
it doesn't matter where they slide -- i am just not sure how i can slide them off screen. maybe i can position them off screen with a stack/positioned. i will try to upload an example or screenshot later when i am on the computer with source code
– user3038457
Nov 27 '18 at 23:15
add a comment |
I currently have a Widget that has three elements -- two buttons and a text input. On text input focus I would like to slide the buttons off the screen and expand the text input to occupy the remaining width.
Are there any flutter components (animation or otherwise) I can use to slide components off screen and animate the text field expansion?
flutter flutter-animation asked Nov 27 '18 at 21:53
user3038457user3038457
527
I currently have a Widget that has three elements -- two buttons and a text input. On text input focus I would like to slide the buttons off the screen and expand the text input to occupy the remaining width.
Are there any flutter components (animation or otherwise) I can use to slide components off screen and animate the text field expansion?
flutter flutter-animation flutter flutter-animation asked Nov 27 '18 at 21:53
user3038457user3038457
527
asked Nov 27 '18 at 21:53
user3038457user3038457
527
asked Nov 27 '18 at 21:53
user3038457user3038457
527
asked Nov 27 '18 at 21:53
user3038457user3038457
527
asked Nov 27 '18 at 21:53
user3038457user3038457
527
527
it would help if you include a screenshot of the widget or the code for it and maybe a diagram showing exactly what you want to happen - are you wanting to slide the buttons off to the side, or the bottom, or the top?
– rmtmckenzie
Nov 27 '18 at 22:05
it doesn't matter where they slide -- i am just not sure how i can slide them off screen. maybe i can position them off screen with a stack/positioned. i will try to upload an example or screenshot later when i am on the computer with source code
– user3038457
Nov 27 '18 at 23:15
add a comment |
it would help if you include a screenshot of the widget or the code for it and maybe a diagram showing exactly what you want to happen - are you wanting to slide the buttons off to the side, or the bottom, or the top?
– rmtmckenzie
Nov 27 '18 at 22:05
it doesn't matter where they slide -- i am just not sure how i can slide them off screen. maybe i can position them off screen with a stack/positioned. i will try to upload an example or screenshot later when i am on the computer with source code
– user3038457
Nov 27 '18 at 23:15
it would help if you include a screenshot of the widget or the code for it and maybe a diagram showing exactly what you want to happen - are you wanting to slide the buttons off to the side, or the bottom, or the top?
– rmtmckenzie
Nov 27 '18 at 22:05
it would help if you include a screenshot of the widget or the code for it and maybe a diagram showing exactly what you want to happen - are you wanting to slide the buttons off to the side, or the bottom, or the top?
– rmtmckenzie
Nov 27 '18 at 22:05
it doesn't matter where they slide -- i am just not sure how i can slide them off screen. maybe i can position them off screen with a stack/positioned. i will try to upload an example or screenshot later when i am on the computer with source code
– user3038457
Nov 27 '18 at 23:15
it doesn't matter where they slide -- i am just not sure how i can slide them off screen. maybe i can position them off screen with a stack/positioned. i will try to upload an example or screenshot later when i am on the computer with source code
– user3038457
Nov 27 '18 at 23:15
add a comment |
1 Answer
1
active
oldest
votes
I ended up using an Animatable widget
https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget
And using a combination of a Stack() where I would animate offscreen elements to have negative offsets (via Positioned() children) based on the Animation and a TextField inside an Expanded()
answered Dec 7 '18 at 23:27
user3038457user3038457
527
could you share the source code of your solution?
– Aleksey Masny
Feb 20 at 18:50
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
});
}
});
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%2f53508768%2fslide-widgets-off-screen-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
I ended up using an Animatable widget
https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget
And using a combination of a Stack() where I would animate offscreen elements to have negative offsets (via Positioned() children) based on the Animation and a TextField inside an Expanded()
answered Dec 7 '18 at 23:27
user3038457user3038457
527
could you share the source code of your solution?
– Aleksey Masny
Feb 20 at 18:50
add a comment |
I ended up using an Animatable widget
https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget
And using a combination of a Stack() where I would animate offscreen elements to have negative offsets (via Positioned() children) based on the Animation and a TextField inside an Expanded()
answered Dec 7 '18 at 23:27
user3038457user3038457
527
could you share the source code of your solution?
– Aleksey Masny
Feb 20 at 18:50
add a comment |
I ended up using an Animatable widget
https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget
And using a combination of a Stack() where I would animate offscreen elements to have negative offsets (via Positioned() children) based on the Animation and a TextField inside an Expanded()
answered Dec 7 '18 at 23:27
user3038457user3038457
527
I ended up using an Animatable widget
https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget
And using a combination of a Stack() where I would animate offscreen elements to have negative offsets (via Positioned() children) based on the Animation and a TextField inside an Expanded()
answered Dec 7 '18 at 23:27
user3038457user3038457
527
answered Dec 7 '18 at 23:27
user3038457user3038457
527
answered Dec 7 '18 at 23:27
user3038457user3038457
527
answered Dec 7 '18 at 23:27
user3038457user3038457
527
527
could you share the source code of your solution?
– Aleksey Masny
Feb 20 at 18:50
add a comment |
could you share the source code of your solution?
– Aleksey Masny
Feb 20 at 18:50
could you share the source code of your solution?
– Aleksey Masny
Feb 20 at 18:50
could you share the source code of your solution?
– Aleksey Masny
Feb 20 at 18:50
add a comment |
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.
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%2f53508768%2fslide-widgets-off-screen-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
it would help if you include a screenshot of the widget or the code for it and maybe a diagram showing exactly what you want to happen - are you wanting to slide the buttons off to the side, or the bottom, or the top?
– rmtmckenzie
Nov 27 '18 at 22:05
it doesn't matter where they slide -- i am just not sure how i can slide them off screen. maybe i can position them off screen with a stack/positioned. i will try to upload an example or screenshot later when i am on the computer with source code
– user3038457
Nov 27 '18 at 23:15