Mobiilikehitys Flutterilla · Oppitunti

Nimetyt reitit ja argumentit

Hyödyntäkää nimettyjä reittejä selkeämpään navigointiin ja välittäkää tietoja näyttöjen välillä reittiargumenttien avulla.

Oppitunti 2/411 vaihetta

Nimetyt reitit ja argumentit on ilmainen Mobiilikehitys Flutterilla-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Mobiilikehitys Flutterilla-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.

Miksi nimetyt reitit?

Aiemmissa oppitunneissa käytimme navigointiin MaterialPageRoute-luokkaa. Vaikka se toimii yksinkertaisissa sovelluksissa, useiden reittien hallinta tällä tavalla voi muuttua sekavaksi.

Jokainen reitti vaatii uuden MaterialPageRoute-esiintymän.
Näkymiä on vaikeampi tunnistaa yksilöllisen nimen perusteella.
Koodi voi muuttua toisteiseksi.

Nimetyt reitit tarjoavat selkeämmän ja jäsennellymmän tavan hallita sovelluksen navigointia.

Nimettyjen reittien määrittäminen

Named routes -reittien käyttämiseksi määrittelette ne MaterialApp-widgetissä. Tämä tehdään routes-ominaisuuden avulla.

routes-ominaisuus ottaa vastaan tyypin Map.
Avain on reitin nimi (tyyppiä String, esimerkiksi '/details').
Arvo on funktio, joka rakentaa kyseisen reitin widgetin.

'/'-reitti on erityinen: se on sovelluksen aloitusreitti.

Siirtyminen nimettyihin reitteihin

Kun nimetyt reitit on määritetty, voitte siirtyä niihin käyttämällä metodia Navigator.pushNamed(). Tämä metodi ottaa vastaan BuildContext-olion ja reitin nimen.

Se on yksinkertaisempi ja selkeämpi tapa kuin uuden MaterialPageRoute-olion luominen aina, kun haluatte siirtyä tiettyyn näkymään.

Nimetyn reitin perusesimerkki

Katsotaan, miten nimettyjen reittien määritys ja käyttö tehdään. Luomme kaksi yksinkertaista näyttöä: HomeScreen ja DetailScreen.

Napauttakaa Run-painiketta nähdäksenne sen toiminnassa!

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Text('You are on the Detail Screen!',
          style: TextStyle(fontSize: 20)),
      ),
    );
  }
}

Miksi argumentteja välitetään?

Usein uuteen näyttöön siirryttäessä sille täytyy välittää tietoja. Esimerkiksi:

tuotetunnus tuotteen tietosivulle
käyttäjän tiedot profiilin muokkausnäyttöön
viesti vahvistussivulle

Reittiargumenttien avulla voitte lähettää nämä tiedot navigointipyynnön mukana.

Argumenttien lähettäminen

Voitte välittää argumentteja nimetylle reitille käyttämällä arguments-ominaisuutta metodissa Navigator.pushNamed().

arguments-ominaisuus hyväksyy minkä tahansa Object-olion.
On suositeltavaa välittää yksinkertaisia tietotyyppejä, kuten String tai int, tai mukautettu luokka tai map, joka kokoaa tiedot yhteen.

Esimerkiksi: Navigator.pushNamed(context, '/details', arguments: 'Hello from Home!');

Argumenttien vastaanottaminen

Kohdenäytössä voitte hakea argumentit käyttämällä lauseketta ModalRoute.of(context)!.settings.arguments.

ModalRoute.of(context) hakee nykyisen reitin.
.settings käyttää reitin asetuksia.
.arguments hakee välitetyt tiedot.

Muistakaa käyttää !-operaattoria null-turvallisuutta varten, jos olette varmoja, että argumentit ovat olemassa. Muussa tapauksessa käsitelkää mahdolliset null-arvot.

Tyyppiturvallisuus ja tyyppimuunnokset

.arguments-ominaisuus palauttaa tyypin Object?. Siksi se täytyy yleensä muuntaa odotettuun tyyppiin.

Jos välititte esimerkiksi String-arvon, noudatte sen näin:

final String message = ModalRoute.of(context)!.settings.arguments as String;

Luotettavuuden parantamiseksi kannattaa lisätä tarkistuksia, kuten if (arguments is String), etenkin monimutkaisia argumenttityyppejä käytettäessä.

Nimetyt reitit ja argumentit – esimerkki

Tässä esimerkissä välitetään yksinkertainen String-viesti HomeScreen-näytöstä DetailScreen-näyttöön nimettyjen reittien ja argumenttien avulla.

DetailScreen näyttää tämän viestin.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes with Args',
      initialRoute: '/',
      routes: {
        '/': (context) => HomeScreen(),
        '/details': (context) => DetailScreen(),
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          child: Text('Go to Details with Message'),
          onPressed: () {
            Navigator.pushNamed(
              context,
              '/details',
              arguments: 'Hello from Home Screen!',
            );
          },
        ),
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final String? message = 
        ModalRoute.of(context)!.settings.arguments as String?;

    return Scaffold(
      appBar: AppBar(title: Text('Detail Screen')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('You are on the Detail Screen!',
              style: TextStyle(fontSize: 20)),
            SizedBox(height: 20),
            Text('Message: ${message ?? "No message received"}',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          ],
        ),
      ),
    );
  }
}

Pikatarkistus: argumentit

Olette siirtyneet nimettyyn '/settings'-reittiin ja välittäneet argumenttina totuusarvon true. Miten noudatte ja käytätte tätä totuusarvoa oikein SettingsScreen-widgetissä?

Vastaa interaktiivisessa oppitunnissa

Kertaus: nimetyt reitit ja argumentit

Hienoa työtä! Olette oppineet sujuvoittamaan navigointia ja välittämään tietoja tehokkaasti.

Nimetyt reitit: Määritelkää reitit MaterialApp-widgetin routes-ominaisuudessa yksilöllisillä merkkijononimillä.
Navigointi: Käyttäkää selkeämpään navigointiin Navigator.pushNamed(context, '/routeName')-kutsua.
Argumenttien välittäminen: Lähettäkää tietoja pushNamed-metodin arguments-ominaisuuden avulla.
Argumenttien vastaanottaminen: Käyttäkää tietoja kohdenäytössä lausekkeella ModalRoute.of(context)!.settings.arguments ja muuntakaa ne oikeaan tyyppiin.

Tämä lähestymistapa tekee sovelluksen navigoinnista järjestelmällisempää ja helpommin ylläpidettävää!

Aloita maksutta

Opi Dart tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 22
Oppitunnit: 88

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Nimetyt reitit ja argumentit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Mobiilikehitys Flutterilla-oppimispolun 3 oppituntia, myös oppitunnin “Nimetyt reitit ja argumentit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Mobiilikehitys Flutterilla-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Nimetyt reitit ja argumentit”?

Hyödyntäkää nimettyjä reittejä selkeämpään navigointiin ja välittäkää tietoja näyttöjen välillä reittiargumenttien avulla. Harjoittelet Mobiilikehitys Flutterilla-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Mobiilikehitys Flutterilla-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Mobiilikehitys Flutterilla-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Nimetyt reitit ja argumentit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Mobiilikehitys Flutterilla-oppitunnilla?

Kyllä. Jokainen Mobiilikehitys Flutterilla-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Mobiilikehitys Flutterilla