More examples with other navigation UI packages

[youssefali424]

we should make an example with some navigation UI package as we discussed before I will start with using creating an example with https://pub.dev/packages/animated_rail

[youssefali424]

Created an example for animated rail in my fork feel free to suggest any edits https://github.com/youssefali424/beamer/tree/master/examples/animated_rail

[slovnicki]

@youssefali424 cool, I'll check it out by the end of today. Today I also plan to work on improving nesting the beamer in the tree, so we might need to adjust for that.

[slovnicki]

another example we need https://github.com/slovnicki/beamer/issues/72. I'll probably do that

[bernaferrari]

I would love to see a sample using Dialogs. Is it possible to open a screen with a dialog via URL, or close the URL and change the URL without pushing a screen?

[slovnicki]

@bernaferrari Thank you for this feedback!

Is it possible to open a screen with a dialog via URL, or close the URL and change the URL without pushing a screen?

It's definitely possible, but not straightforward nor documented currently. I believe we'll have a simpler API for these types of use cases, especially pushing an URL without rebuild, next week after https://github.com/slovnicki/beamer/issues/181 is done. (that issue is kind of a big milestone at the moment).

I haven't tried dialogs before, but it's an important use case. I played a little with basic books example and made this:

I just tweaked BookDetailsScreen a bit and left everything else in the example untouched:

class BookDetailsScreen extends StatefulWidget {
  BookDetailsScreen({
    this.bookId,
  }) : book = books.firstWhere((book) => book['id'] == bookId);

  final String bookId;
  final Map<String, String> book;

  @override
  _BookDetailsScreenState createState() => _BookDetailsScreenState();
}

class _BookDetailsScreenState extends State<BookDetailsScreen> {
  void buyDialogCheck() {
    if (context.currentBeamLocation.state.queryParameters.containsKey('buy')) {
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('Buy book'),
        ),
      ).then((value) {
        if (value == null) {
          context.currentBeamLocation.update(
            (state) => state.copyWith(queryParameters: {}),
          );
        }
      });
    }
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    context.currentBeamLocation.addListener(buyDialogCheck);
  }

  @override
  Widget build(BuildContext context) {
    Future.delayed(Duration.zero, buyDialogCheck);
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.book['title']),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GestureDetector(
          onTap: () => context.currentBeamLocation.update(
            (state) => state.copyWith(queryParameters: {'buy': 'true'}),
          ),
          child: Text('Author: ${widget.book['author']}'),
        ),
      ),
    );
  }
}

If you would like to make a bit more detailed example with dialogs, add it to examples and make a PR, I would be very grateful. Btw, you could use any other parameters from state, not necessarily queryParameters. If you choose to use an additional path segment for dialog, then it will also need to be added to pathBlueprints