Support page transitions

Right now I do page transitions via something like this:

  void forward(UINode newContent) {
    setState(() {
      _content = newContent;
    });
  }

  UINode build() {
    List<UINode> overlays = [];
    addMenuToOverlays(overlays);
    _scaffold = new Scaffold(
      header: _isSearching ? buildSearchBar() : buildActionBar(),
      content: _content,
      fab: new FloatingActionButton(
        content: new Icon(type: 'content/add_white', size: 24), level: 3),
      drawer: buildDrawer(),
      overlays: overlays
    );
    return _scaffold;
  }

Then passing the app object around. This is very rudimentary. It would be great if we could inject some sort of router to the components so they can request a page transition. Angular does this via defining routes on dart.

@Hixie

Agreed. We need a router, haven't built one yet. @Hixie has been collecting thoughts on URL handling designs here: https://docs.google.com/document/d/1LTdcq3a0d2qCRzUz5tpU62U3HVkxwHJtMKYgc6cVEPU

Can you elaborate on what you mean by "page transition" and "routes"?

Router terminology is from Angular: https://docs.angularjs.org/tutorial/step_07

It is a way to build a single-root app where there is a content node which is replaced based on the URL. Something like:

http://myweb.io/main.html -> main page, renders header, footer and content = the initial landing page.
http://myweb.io/main.html#tasks -> header, footer remains, content = tasks page.
http://myweb.io/main.html#tasks/edit/1 -> edit task with id 1; example of a route with params.

Page transition is how you jump from one route to next. Say, landing page should fade out and tasks page should fade in. I had done some experiments on mobile web and this was one of the problematic areas in performance. So I wanted to build a stocks detail page in the sample stocks app and transition to it when a stock row is tapped.

This concept is akin to intents and activities in Android. You can specify what kind of transition you want.

@eseidelGoogle

Yeah, this stuff is still very much in the air. You can see our current incomplete thoughts here:
https://github.com/domokit/mojo/blob/master/sky/specs/linkability.md
(That's the doc @eseidelGoogle linked to earlier, I just hadn't put it in github yet.)

I filed https://github.com/domokit/mojo/issues/174 to track this.

We now have this feature in the Navigator widget. It's used in several of the examples, include Stocks and Fitness.

Fix target triple for x86 and x64 Clang builds. (flutter#22)

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

Support page transitions #22

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support page transitions #22

Description

Activity

eseidelGoogle commented on May 18, 2015

Hixie commented on May 19, 2015

mehmetf commented on May 19, 2015

mehmetf commented on May 19, 2015

Hixie commented on May 20, 2015

abarth commented on Nov 7, 2015

github-actions commented on Sep 7, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions