Gérer l'url de son application web avec Flutter

Si vous avez déjà créé une application web avec Flutter, vous vouliez sans doute accéder à certaines pages de votre application en tapant l’url directement dans la barre de navigation.

C’est possible à condition de bien s’y prendre.

Pour reproduire l’exemple ci-dessus voici le code source :

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Named Routes Example',
      initialRoute: HomePage.route,
      routes: {
        HomePage.route: (context) => HomePage(),
        OverviewPage.route: (context) => OverviewPage(),
      },
    ),
  );
}

class HomePage extends StatelessWidget {
  static const String route = '/';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Overview page'),
          onPressed: () {
            // Navigate to the overview page using a named route.
            Navigator.of(context).pushNamed(OverviewPage.route);
          },
        ),
      ),
    );
  }
}

class OverviewPage extends StatelessWidget {
  static const String route = '/overview';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Overview Page'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to the home screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Ensuite il sera possible d’accéder à une route de l’application en tapant son chemin après le /#/ comme dans l’exemple /#/overview.

Une fois que vous avez compris cela, vous pouvez créer un système plus complexe en allant récupérer les informations dans l’url avec le paramètre onGenerateRoute.

   onGenerateRoute: (routes) {
    if (routes.name == '/article/flutter')
      return MaterialPageRoute(
          builder: (context) => Article(
                article: 'Flutter',
              ));

    return MaterialPageRoute(builder: (context) => HomePage());
  },

Code source :

    import 'package:flutter/material.dart';

    void main() {
      runApp(
        MaterialApp(
          title: 'Exemple',
          initialRoute: HomePage.route,
          onGenerateRoute: (routes) {
            if (routes.name == '/article/flutter')
              return MaterialPageRoute(
                  builder: (context) => Article(
                        article: 'Flutter',
                      ));

            return MaterialPageRoute(builder: (context) => HomePage());
          },
          routes: {
            HomePage.route: (context) => HomePage(),
            Article.route: (context) => Article(),
          },
        ),
      );
    }

    class HomePage extends StatelessWidget {
      static const String route = '/';

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Page d\'accueil'),
          ),
          body: Center(
            child: RaisedButton(
              child: Text("La page d'article"),
              onPressed: () {
                Navigator.of(context).pushNamed(Article.route);
              },
            ),
          ),
        );
      }
    }

    class Article extends StatelessWidget {
      static const String route = '/article';

      final String article;

      Article({this.article = 'à lire'});

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Article $article'),
          ),
          body: Center(
            child: Text("C'est un article sur $article"),
          ),
        );
      }
    }
1 J'aime

Merci pour cette astuce, je me demandais justement comment y faire une telle chose

Bonjour,
J’ai créé des routes pour mon appli web, en local tout fonctionne super. Quand mon site est chargé sur le serveur, les routes s’affichent mais si je saisis une route (bien réelle) dans la barre d’adresse le serveur retourne une Erreur 404…
Je ne comprends pas?!

Bonjour,

Quel est votre code ? Il y a eu des changements avec le Navigator qui ont pu changé le fonctionnement de l’accès rapide.

Dans mon main.dart :
initialRoute: RoutesConstant.screen,
routes: {
RoutesConstant.screen: (context) => const HomePage(),
RoutesConstant.second: (context) => const SecondCreen(),}

J’ai un fichier routes_constant.dart :
class RoutesConstant {
static const String screen = ‹ / ›;
static const String second = ‹ /second ›;}

Pour changer de screen, j’utilise : Navigator.of(context).pushNamed(RoutesConstant.second);

Tout fonctionne en local ou chez l’hébergeur, mais alors qu’en local je peux saisir http://localhost:58464/second pour changer de screen, sur le site hébergeur si je saisis https://monsite.fr/second il me retourne une erreur 404.

Bonjour,
J’ai trouvé d’où venait le bug : j’utilisais le package url_strategy 0.2.0 pour faire disparaître le symbole #. A présent, je recherche une solution pour enlever ce symbole sans bug?!..

Je viens de trouver une solution sur le web, en visionnant cette vidéo :

La solution 1 fonctionne dans mon cas, elle est très légère, et me permet de garder les avantages du plugin url_strategy 0.2.0.

La vie est belle :slight_smile:

1 J'aime