Flutter este un produs Google folosit pentru a crea aplicații mobile hibride cu Dart ca limbaj de codare.

O pagină a aplicației din Flutter este un widget, o descriere a interfeței de utilizare prezentată. Pentru a crea o aplicație legitimă, aveți nevoie de multe dintre aceste pagini, care să afișeze o multitudine de funcții. Totul este bine și după ce creați o pagină nouă. Dar, cum te miști între ei?

Destul de simplu: utilizați Navigator Clasa, încorporată în Flutter SDK.

Navigator este încă un alt widget care gestionează paginile unei aplicații într-un format asemănător stivei. Paginile cu ecran complet sunt numite rute atunci când sunt utilizate în Navigator. Navigatorul funcționează ca o implementare normală a stivei. Vine cu două metode bine cunoscute, push și pop.

  1. Push: Metoda push este folosită pentru a adăuga un alt traseu în partea de sus a stivei curente. Noua pagină este afișată peste cea anterioară.
  2. Pop: Deoarece Navigatorul funcționează ca un teanc, folosește principiul LIFO (Last-In, First-Out). Metoda pop elimină traseul cel mai de sus din stivă. Aceasta afișează pagina anterioară utilizatorului.

În această postare, voi afișa:

  1. Două modalități de navigare și
  2. Trecerea datelor la pagina următoare.

Navigare normală.

Există două moduri de a face acest lucru:

Crearea unei noi pagini în cadrul push metodă

În această metodă, se creează un nou traseu folosind MaterialPageRoute clasă. În ea se creează o nouă pagină (Widget). Aceste două declarații de creație sunt incluse în push și adăugați această pagină în partea de sus a stivei.

Pentru a afișa un exemplu simplu, folosesc codul dintr-o repo anterioară și postare pe blog. L-am editat pentru a include un buton pe CustomCard componentă. Acest buton folosește push metoda, în timp ce noua rută și pagina sunt create în cadrul acesteia.

Widget build(BuildContext context) {  
	return Card(    
    	child: Column(      
        	children: <Widget>[        
            	Text('Card $index'),        
                FlatButton(          
                	child: Text("Press Me"),          
                    onPressed: () {            
                    	Navigator.push(context, MaterialPageRoute<void>(
                        	builder: (BuildContext context) {                
                            	return Scaffold(                  
                                	appBar: AppBar(title: Text('My Page')),
                                    body: Center(                    
                                    	child: FlatButton(
                                        	child: Text('POP'),
                                           	onPressed: () {
                                            	Navigator.pop(context);
                                            },                    
                                        ),                  
                                    ),                
                                );              
                            },            
                        ));          
                    }),    
            ],  
        ));
}
Cum sa gestionati navigarea in aplicatiile dvs Flutter

Adăugați rute la punctul de intrare al aplicațiilor

Retrospectiv, aplicațiile au multe pagini și, cel mai adesea, cu codificare complexă. Nu ar fi ușor să creezi în continuare o pagină nouă în care să treci. Acest lucru este valabil mai ales dacă pagina este accesată din mai multe zone diferite. Este posibil să pierdeți evidența codului pentru fiecare din același traseu.

Deci, în a doua metodă, pagina este creată o singură dată, dar adăugată ca o rută în punctul de intrare al aplicației, main.dart. Aceste rute sunt denumite ca niște căi de fișiere, deoarece pagina rădăcină a aplicației este calea /.

Mai întâi creați o pagină nouă a aplicației, astfel:

class SecondPage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('Second Page'),
			),
			body: Center(
				child: RaisedButton(
					child: Text('Back To HomeScreen'),
					color: Theme.of(context).primaryColor,
					textColor: Colors.white,
					onPressed: () => Navigator.pop(context)),
			),
		);
	}
}

Apoi, importați noua pagină în main.dart fișier și adăugați-l la lista de rute din interiorul constructorului MaterialApp.

class MyApp extends StatelessWidget {
// This widget is the root of your application.
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Flutter Demo',
			theme: ThemeData(
				primarySwatch: Colors.green,
			),
			home: MyHomePage(title: 'Flutter Demo Home Page'),
			routes: <String, WidgetBuilder>{
				'/a': (BuildContext context) => SecondPage(),
			});
	}
}

Apoi edităm metoda onPressed a FlatButton în CustomCard la acest:

Navigator.pushNamed(context, '/a');
1611517145 159 Cum sa gestionati navigarea in aplicatiile dvs Flutter

În exemplul de mai sus, utilizatorul este redirecționat către SecondPage clasa creată deoarece este pagina corespunzătoare căii /a.

Transmiterea datelor între pagini

Acum, pentru ultima parte a demonstrației, trecerea datelor la pagina următoare. Pentru a face acest lucru într-un mod ușor, este nevoie de o combinație a ambelor metode de navigare menționate mai sus.

Ambii pushNamed și crearea unui nou traseu în interiorul metodei push poate fi folosit pentru a transmite date către noua pagină. Pentru aceștia din urmă, nu este necesară realizarea unei noi pagini. Parametrul constructor al MaterialPageRoute va chema acum constructorul SecondPage clasă.

Actualizați fișierul SecondPage pentru a accepta transmiterea datelor, așa:

class SecondPage extends StatelessWidget {
	SecondPage({@required this.title});
	final title;
    
	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(
				title: Text('Card No. $title'),
			),
			body: Center(...),
		);
	}
}

FlatButtonsMetoda ‘onPressed este acum editată în:

Navigator.push(context,
	MaterialPageRoute(
		builder: (context) => SecondPage(title: index)
	)
);

Sau asta:

Navigator.pushNamed( context, '/a',
	arguments: <String, String>{
		'title': index + "",
	},
);

Indexul cardului este transmis acum către SecondPage și este afișat în AppBar.

1611517145 175 Cum sa gestionati navigarea in aplicatiile dvs Flutter

Mulțumesc pentru lectură! Puteți găsi repo, aici.

Găsiți commit-ul pentru următoarele modificări, aici.