App Navigationsbeispiel mit WidgetsApp

Question

Ich versuche, meine Apps Navigation zu deklarieren. Da ich nicht MaterialApp Wrapper oder Styling verwende, kommen alle meine Importe von package:flutter/widgets.dart.

Wie pro docs, verwenden Navigation richtig Ich tue dies:

import "package:flutter/widgets.dart"; 
import "package:myapp/routes/home.dart"; 

void main() { 
    runApp(
    new WidgetsApp(/* stuck here */); 
) 
} 

Und ich bin in diesem Schritt stecken, ich versuche Navigator docs und Code-Kommentare in ide zu folgen, aber ich kann nicht verstehen heraus, wie man onGenerateRoute Eigentum von WidgetsApp verwendet, kann nicht finden, vollständiges Beispiel von diesem online, folglich die Frage.

Ähnlich wie new MaterialApp() Wie definiere ich meinen Home-Pfad und den Rest der Routen innerhalb new WidgetsApp()?

Als Follow-up-Frage kommt, bin ich Wildcard Routen wie /onboarding/** oder /dashboard/** innen new WidgetsApp() irgendwie Weg in Layouts, die dann switch-Anweisung haben die Überprüfung für eine Route und Anzeigeseiten zu verwenden?

Answer 1

Sie können die Eigenschaft onGenerateRoute verwenden, um eine Route für Widgets-App zu generieren.

Hier ist eine sehr minimale Umsetzung der gleiche:

import 'package:flutter/widgets.dart'; 

void main() => runApp(new MyWidgetsApp()); 

class MyWidgetsApp extends StatelessWidget { 

    Route generate(RouteSettings settings){ 
    Route page; 
    switch(settings.name){ 
     case "/": 
     page = new PageRouteBuilder(
      pageBuilder: (BuildContext context,Animation<double> animation, 
       Animation<double> secondaryAnimation){ 
       return new Column(
       mainAxisAlignment: MainAxisAlignment.center, 
       children: <Widget>[ 
        const Text("Home Page",textDirection: TextDirection.ltr,), 
        const Padding(padding: const EdgeInsets.all(10.0)), 
        new GestureDetector(
        onTap:() => Navigator.of(context).pushNamed("/first"), 
        child: new Container(
         padding: const EdgeInsets.all(10.0), 
         color:Colors.blue, 
         child: const Text("Go to First Page"), 
        ), 
       ), 
        const Padding(padding: const EdgeInsets.all(10.0)), 
        new GestureDetector(
        onTap:() => Navigator.of(context).pushNamed("/abcd"), 
        child: new Container(
         padding: const EdgeInsets.all(10.0), 
         color:Colors.blue, 
         child: const Text("Unkown Route"), 
        ), 
       ) 
       ], 
      ); 
      }, 
      transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) { 
       return new FadeTransition(
       opacity: animation, 
       child: new FadeTransition(
        opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second), 
        child: child, 
       ), 
      ); 
      } 
     ); 
     break; 
     case "/first": 
     page = new PageRouteBuilder(
      pageBuilder: (BuildContext context,Animation<double> animation, 
       Animation<double> secondaryAnimation){ 
       return new Column(
        mainAxisAlignment: MainAxisAlignment.center, 
        children: <Widget>[ 
        const Text("First Page",textDirection: TextDirection.ltr,), 
        const Padding(padding: const EdgeInsets.all(10.0)), 
        new GestureDetector(
         onTap:() => Navigator.of(context).pop(), 
         child: new Container(
         padding: const EdgeInsets.all(10.0), 
         color:Colors.blue, 
         child: const Text("Back"), 
        ), 
        ) 
        ] 
      ); 
      }, 
      transitionsBuilder: (_, Animation<double> animation, Animation<double> second, Widget child) { 
       return new FadeTransition(
       opacity: animation, 
       child: new FadeTransition(
        opacity: new Tween<double>(begin: 1.0, end: 0.0).animate(second), 
        child: child, 
       ), 
      ); 
      } 
     ); 
     break; 
    } 
    return page; 
    } 

    Route unKnownRoute(RouteSettings settings){ 
    return new PageRouteBuilder(
     pageBuilder: (BuildContext context,Animation<double> animation, 
      Animation<double> secondaryAnimation){ 
      return new Column(
       mainAxisAlignment: MainAxisAlignment.center, 
       children: <Widget>[ 
       const Text("First Page",textDirection: TextDirection.ltr,), 
       const Padding(padding: const EdgeInsets.all(10.0)), 
       new GestureDetector(
        onTap:() => Navigator.of(context).pop(), 
        child: new Container(
        padding: const EdgeInsets.all(10.0), 
        color:Colors.blue, 
        child: const Text("Back"), 
       ), 
       ) 
       ] 
     ); 
     } 
    ); 
    } 

    @override 
    Widget build(BuildContext context) { 
    return new WidgetsApp(
     onGenerateRoute: generate, 
     onUnknownRoute: unKnownRoute, 
     textStyle: const TextStyle(), 
     initialRoute: "/", 
     color: Colors.red 
    ); 
    } 
} 

Hoffnung, die geholfen haben!