Concepts de base du routage dans UIWidgets

Dans Flutter et UIWidgets, le concept de Route corespond à ce qu'on appelle généralement une "page" en développement mobile :

• Android : une Activity
• iOS : un UIViewController
• UGUI : un Panel, Form ou View

Avec UGUI classique, on gérait l'ouverture et la feremture via un UIManager centralisé. L'approche monopage de Flutter peut dérouter au début, mais elle offre une gestion plus élégante des transitions.

Navigation simple entre deux pages

Voici comment implémenter une navigation basique :

UIMain.cs – Point d'entrée de l'application :

using Unity.UIWidgets.engine;
using Unity.UIWidgets.material;
using Unity.UIWidgets.widgets;

namespace NavigationDemo
{
    public class AppShell : UIWidgetsPanel
    {
        protected override Widget createWidget()
        {
            return new MaterialApp(
                home: new MainScreen()
            );
        }
    }
}

MainScreen.cs – Écran d'accueil avec un bouton de navigation :

using System.Collections.Generic;
using Unity.UIWidgets.material;
using Unity.UIWidgets.widgets;
using UnityEngine;

namespace NavigationDemo
{
    public class MainScreen : StatefulWidget
    {
        public override State createState() => new MainScreenState();
    }

    class MainScreenState : State<MainScreen>
    {
        public override Widget build(BuildContext context)
        {
            return new Scaffold(
                appBar: new AppBar(title: new Text("Accueil")),
                body: new Center(
                    child: new Column(
                        children: new List<Widget>
                        {
                            new RaisedButton(
                                child: new Text("Ouvrir nouvelle page"),
                                onPressed: () =>
                                {
                                    Navigator.push(
                                        context,
                                        new MaterialPageRoute(
                                            builder: (ctx) => new SecondaryScreen("Valeur transmise")
                                        )
                                    ).Then((result) =>
                                    {
                                        Debug.Log($"Résultat reçu : {result.ToString()}");
                                    });
                                }
                            )
                        }
                    )
                )
            );
        }
    }
}

SecondaryScreen.cs – Page secondaire avec retour :

using Unity.UIWidgets.material;
using Unity.UIWidgets.widgets;
using UnityEngine;

namespace NavigationDemo
{
    public class SecondaryScreen : StatefulWidget
    {
        public readonly object receivedValue;

        public SecondaryScreen(object value) : base()
        {
            receivedValue = value;
        }

        public override State createState() => new SecondaryScreenState(receivedValue);
    }

    class SecondaryScreenState : State<SecondaryScreen>
    {
        private object _message;

        public SecondaryScreenState(object message)
        {
            _message = message;
            Debug.Log($"Valeur reçue de la page précédente : {_message}");
        }

        public override Widget build(BuildContext context)
        {
            return new Scaffold(
                appBar: new AppBar(title: new Text("Page secondaire")),
                body: new Center(
                    child: new Column(
                        children: new List<Widget>
                        {
                            new RaisedButton(
                                child: new Text("Retour"),
                                onPressed: () =>
                                {
                                    Navigator.pop(context, "Valeur de retour");
                                }
                            )
                        }
                    )
                )
            );
        }
    }
}

Utilisation de routes nommées

Cette approche se rapproche du pattern UIManager.Open("NomDePage") classique dans UGUI.

AppShell.cs – Enregistrement des routes dans le MaterialApp :

using System.Collections.Generic;
using Unity.UIWidgets.material;
using Unity.UIWidgets.widgets;

namespace NavigationDemo
{
    public class AppShell : UIWidgetsPanel
    {
        protected override Widget createWidget()
        {
            return new MaterialApp(
                initialRoute: "Accueil",
                routes: new Dictionary<string, WidgetBuilder>()
                {
                    { "Accueil", (context) => new MainScreen() },
                    { "Secondaire", (context) => new SecondaryScreen(null) }
                }
            );
        }
    }
}

MainScreen.cs – Utilisation de pushNamed pour la navigation :

// Au lieu de :
// Navigator.push(context, new MaterialPageRoute(builder: (ctx) => new SecondaryScreen("valeur")));

Navigator.pushNamed(context, "Secondaire", "valeur à transmettre").Then((result) =>
{
    Debug.Log($"Résultat reçu : {result.ToString()}");
});

La méthode Navigator.pop reste inchangée. L'utilisation de routes nommées simplifie l'ouverture des pages mais la transmission de paramètres pose encore question – les exemples officiels d'UIWidgets ne couvrent pas encore clairement ce cas.