slovnicki/beamer

A routing package built on top of Router and Navigator's pages API, supporting arbitrary nested navigation, guards and more.

Hi there 👋

Here's some information about me:

• 💼 I’m working on a Friendly Fire mobile/web/desktop Flutter app
• 📦 I'm maintaining the beamer package
• 🇭🇷 I'm organizing GDG Zagreb and Flutter Croatia
• 🌱 I led some of the projects at Flutter Buddies
• 💬 Ask me about Dart and Flutter, especially routing
• 📫 Reach me at
  • Twitter
  • LinkedIn
  • Beamer Discord

beamer's Issues

Deep Location problem

If I going deeper in routing, and would like to go back with APP BAR left arrow - the URL doen’t change.
However - I press the back button in browser - URL is changing.

import 'package:flutter/material.dart';
import 'package:beamer/beamer.dart';

// SCREENS
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () => context.beamTo(BooksLocation()),
          child: Text('Go to books location'),
        ),
      ),
    );
  }
}

const List<Map<String, String>> books = [
  {
    'id': '1',
    'title': 'Stranger in a Strange Land',
    'author': 'Robert A. Heinlein',
  },
  {
    'id': '2',
    'title': 'Foundation',
    'author': 'Isaac Asimov',
  },
  {
    'id': '3',
    'title': 'Fahrenheit 451',
    'author': 'Ray Bradbury',
  },
];

class BooksScreen extends StatelessWidget {
  BooksScreen({this.titleQuery = ''});

  final String titleQuery;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Books'),
      ),
      body: ListView(
        children: books
            .where((book) =>
                book['title'].toLowerCase().contains(titleQuery.toLowerCase()))
            .map((book) => ListTile(
                  title: Text(book['title']),
                  subtitle: Text(book['author']),
                  onTap: () => Beamer.of(context).beamTo(
                    BooksLocation.withParameters(
                      path: {'id': book['id']},
                    ),
                  ),
                ))
            .toList(),
      ),
    );
  }
}

class BookDetailsScreen extends StatelessWidget {
  BookDetailsScreen({
    this.book,
  });

  final Map<String, String> book;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(book['title']),
      ),
      body: Column(
        children: [
          Text('Author: ${book['author']}'),
          SizedBox(
            height: 50.0,
          ),
          ElevatedButton(
            child: Text('GO DEEPER -> '),
            onPressed: () {
              Beamer.of(context).beamTo(
                BooksThirdLocation.withParameters(
                  path: {'id': book['id']},
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

class BookThirdScreen extends StatelessWidget {
  BookThirdScreen({
    this.book,
  });

  final Map<String, String> book;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(book['title']),
      ),
      body: Text('Third screen of book nr. ${book['author']}'),
    );
  }
}

// LOCATIONS
class HomeLocation extends BeamLocation {
  @override
  List<Page> get pages => [
        BeamPage(
          key: ValueKey('home'),
          page: HomeScreen(),
        ),
      ];

  @override
  String get pathBlueprint => '/';
}

class BooksLocation extends BeamLocation {
  BooksLocation() : super();

  BooksLocation.withParameters({
    Map<String, String> path,
    Map<String, String> query,
  }) : super.withParameters(path: path, query: query);

  @override
  List<Page> get pages => [
        ...HomeLocation().pages,
        BeamPage(
          key: ValueKey('books-${queryParameters['title'] ?? ''}'),
          page: BooksScreen(
            titleQuery: queryParameters['title'] ?? '',
          ),
        ),
        if (pathParameters.containsKey('id'))
          BeamPage(
            key: ValueKey('book-${pathParameters['id']}'),
            page: BookDetailsScreen(
              book: books
                  .firstWhere((book) => book['id'] == pathParameters['id']),
            ),
          ),
      ];

  @override
  String get pathBlueprint => '/books/:id';
}

class BooksThirdLocation extends BeamLocation {
  BooksThirdLocation() : super();

  BooksThirdLocation.withParameters({
    Map<String, String> path,
    Map<String, String> query,
  }) : super.withParameters(path: path, query: query);

  @override
  List<Page> get pages => [
        ...HomeLocation().pages,
        BeamPage(
          key: ValueKey('books-${queryParameters['title'] ?? ''}'),
          page: BooksScreen(
            titleQuery: queryParameters['title'] ?? '',
          ),
        ),
        if (pathParameters.containsKey('id'))
          BeamPage(
            key: ValueKey('book-${pathParameters['id']}'),
            page: BookDetailsScreen(
              book: books
                  .firstWhere((book) => book['id'] == pathParameters['id']),
            ),
          ),
        if (pathParameters.containsKey('id'))
          BeamPage(
            key: ValueKey('book-deeper-${pathParameters['id']}'),
            page: BookThirdScreen(
              book: books
                  .firstWhere((book) => book['id'] == pathParameters['id']),
            ),
          ),
      ];

  @override
  String get pathBlueprint => '/books/:id/deeper';
}

// APP
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Beamer(
      initialLocation: HomeLocation(),
      beamLocations: [
        HomeLocation(),
        BooksLocation(),
      ],
      notFoundPage: Scaffold(body: Center(child: Text('Not found'))),
      app: MaterialApp(),
    );
  }
}

void main() {
  runApp(MyApp());
}

put pathBlueprints before pages in examples

feels more natural

auto beamBack on pop, default false

recreate books example

https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

sibling routers

for example, with a bottom bar

keep currentLocation in Beamer

need to make it Stateful

remove the need for prepare()

make setters for pathParameters and queryParameters within which the _path and _query strings are constructed.

add showWhen to BeamPage

This will be a replacement for collection-if and is closely related to #34 and will be worked on together

use more straightforward ValueKey

Like ValueKey('home')

example of passing parameters to location

optional pathSegments in pathBlueprint

like profile/?account/?details so one location can handle many more pages

doc comment code

make nice README

remove omit_local_variable_types lint

Some variables can be confusing without a type

Make tests

Make BeamPage platform aware

use 1 BeamLocation constructor, no need for named

expose Navigator

already exposed, but needs documentation

remove popLocation

There is no need for this. Pop must be normal, removing the page from stack, and any diferent requirement should be implemented manualy using beamTo

null safety

https://dart.dev/null-safety/migration-guide

Make tests action and badge

matchPages wrong when there's collection-if based on parameters

example

class BooksLocation extends BeamLocation {
  @override
  List<Page> get pages => [
        ...HomeLocation().pages,
        BeamPage(
          key: ValueKey('books-${queryParameters['title'] ?? ''}'),
          page: BooksScreen(),
        ),
        if (pathParameters.containsKey('id'))
          BeamPage(
            key: ValueKey('book-${pathParameters['id']}'),
            page: BookDetailsScreen(
              book: books[int.parse(pathParameters['id'])],
            ),
          ),
      ];

  @override
  String get pathBlueprint => '/books/:id';
}

and then pop from details screen

add NotFound page

use bookId for BookDetailsScreen in example

Beam without context

seems impossible now, but who knows...

remove BeamPage.identifier

Replace it with a more natural name - key, and make it optional

rename BeamPage.page to child

add migration guide

from v0.4.X to v0.5.X

remove desktop folders at example?

NotFound should keep the URI

Add notice that Navigator 1.0 can still be used

go back to the usage of *App.router

it's cleaner and necessary in the case when builder is used in *App

publish on pub.dev

After #1 and #5 are closed.

keepQueryOnPop = false

multiple pathBlueprints

like

[
  '/profile/?account/?details',
  '/profile/?account/?settings'
]

add `data` to BeamLocation

as there are path and query parameters. This can be anything. Can also be passed to beamBack(withData: ...)

beamBack

Go back to previous BeamLocation. For example, if you beamTo somewhere deep, you don't need to do multiple pops.

add pathSegment to BeamPage

This will hopefully clear any bugs when doing backward parse from pages to URI, on pop.

Guards

Is there a way to implement router guards in this package?

Beamer.of(context).updateLocation

updates the current location with path or query parameters.
This is a better alternative to beaming to the same page as we're on

rename path to pathBlueprint in BeamLocation constructor

nested routers

https://gist.github.com/johnpryan/bbca91e23bbb4d39247fa922533be7c9

add Beamer.of(context)

maybe some people are more used to this than extension on context

parser; reset path parameters

so they don't stay if one is at /account/:accountId/address/:addressId and then manually deletes /address/:addressId from browser URL. addressId should be removed from pathParameters

Provide something to BeamLocation

Provide in the sense of InheritedWidget, Provider and friends, but not to the entire Beamer tree nor to just a single BeamPage's child, both of which are naturally supported.

Remove unused context at _matchPages

It was used in previous implementation, forgot to remove it.

improve doc comments

use Streams?

Would this be a performance improvement, to use Streams for communication between beamTo and Router?

Jump to initialLocation if I press refresh in browser

DeepLocation

Make a DeepLocation, a stack of 3-4 screens, instead of SecondLocation in example.