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