Mobiilikehitys Flutterilla · Oppitunti

Sivujen välinen perusnavigointi

Oppikaa lisäämään ja poistamaan reittejä Navigator-luokan avulla, mikä mahdollistaa siirtymät Flutter-sovelluksen eri näyttöjen välillä.

Oppitunti 1/411 vaihetta

Sivujen välinen perusnavigointi on ilmainen Mobiilikehitys Flutterilla-oppitunti CoddyKitissä. Tämä on oppitunti 1/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.

Sovelluksen navigointi

Ajattele mobiilisovellusta sivujen eli "näkymien" kokoelmana. Navigointi tarkoittaa siirtymistä näiden näkymien välillä, esimerkiksi tuotelistasta tuotteen tietosivulle.

Sovelluksessa on oltava selkeä tapa siirtyä eteenpäin.
Sovelluksessa on oltava myös tapa palata takaisin.
Flutter tarjoaa tähän tehokkaat työkalut.

Tutustu Navigatoriin

Flutterissa Navigator-widget hallitsee Route-objektien pinoa. Kun haluat näyttää uuden näkymän, "työnnät" reitin tähän pinoon. Kun haluat palata takaisin, "poistat" reitin pinosta.

Se muistuttaa pelikorttipinoa.
Uudet kortit lisätään päällimmäisiksi (push).
Kortteja poistetaan päällimmäisestä alkaen (pop).

Reittien ymmärtäminen

Route on sovelluksen "näkymän" tai "sivun" abstraktio. Flutter tarjoaa yleisen reittityypin nimeltä MaterialPageRoute, joka luo alustakohtaisen siirtymäanimaation (kuten oikealta liukuvan animaation Androidissa).

Se määrittää, miltä uusi näkymä näyttää ja miten se toimii, kun se näytetään.

Eteenpäin push()-metodilla

Uuteen näkymään navigoidaan käyttämällä Navigator.push()-metodia. Tämä metodi vastaanottaa argumentteina BuildContext- ja MaterialPageRoute-objektit.

MaterialPageRoute-konstruktorin sisällä oleva builder-funktio kertoo Flutterille, mikä widget uutta näkymää varten rakennetaan.

Kokeile reitin työntämistä

Tässä esimerkissä uusi näkymä työnnetään pinoon painiketta painettaessa. Suorita esimerkki ja napauta painiketta!

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: const Center(
        child: Text('You are on the second screen!'),
      ),
    );
  }
}

Mikä on BuildContext?

Olet ehkä huomannut, että context-arvoa välitetään eri paikkoihin. BuildContext on kahva widgetin sijaintiin widget-puussa. Sen avulla widgetit voivat paikantaa muita widgetejä tai ylempänä puussa olevia tietoja.

Navigator käyttää tätä kontekstia tietääkseen, mitä navigointipinoa käsitellään.

Takaisin pop()-metodilla

Kun haluat palata edelliseen näkymään, "poista" nykyinen reitti navigoint pinosta käyttämällä Navigator.pop()-metodia. Tällöin sen alla ollut näkymä tulee näkyviin.

Flutterin AppBar tarjoaa usein automaattisesti paluupainikkeen, kun uusi reitti työnnetään pinoon. Painike kutsuu sisäisesti Navigator.pop()-metodia.

Kokeile reitin poistamista

Muokataan edellistä esimerkkiä niin, että toiseen näkymään lisätään painike, jolla voidaan palata nimenomaisesti aloitusnäkymään.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // This will go back!
          },
          child: const Text('Go Back'),
        ),
      ),
    );
  }
}

Pinon havainnollistaminen

Kuvittele, että Navigator ylläpitää näkymien pinoa. Kun kutsut push-metodia, uusi näkymä asetetaan päällimmäiseksi. Kun kutsut pop-metodia, päällimmäinen näkymä poistetaan.

Käyttäjä näkee aina päällimmäisen näkymän. Tämä pinon toimintaperiaate on keskeinen osa Flutterin navigointia.

Push: Lisää päällimmäiseksi.
Pop: Poistaa päällimmäisen.
Ensimmäinen näkymä on pinon pohjalla.

Navigoinnin tarkistus

Ajatellaan Flutter-sovellusta, jossa on kaksi näkymää, ScreenA ja ScreenB. Jos olet tällä hetkellä näkymässä ScreenA ja haluat siirtyä näkymään ScreenB ja myöhemmin palata näkymään ScreenA, mitä Navigator-metodien järjestystä käyttäisit?

Vastaa interaktiivisessa oppitunnissa

Kertaus: perusnavigointi

Hienoa työtä! Olet oppinut Flutterin perusnavigoinnin keskeiset käsitteet:

Navigator hallitsee reittipinoa.
MaterialPageRoute määrittää uuden näkymän.
Navigator.push() lisää uuden näkymän pinoon.
Navigator.pop() poistaa nykyisen näkymän pinosta.
BuildContext on välttämätön navigointitoiminnoissa.

Seuraavaksi tutustumme edistyneempiin navigointitekniikoihin, kuten nimettyihin reitteihin!

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 ”Sivujen välinen perusnavigointi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Mobiilikehitys Flutterilla-oppimispolun 3 oppituntia, myös oppitunnin “Sivujen välinen perusnavigointi”. 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 ”Sivujen välinen perusnavigointi”?

Oppikaa lisäämään ja poistamaan reittejä Navigator-luokan avulla, mikä mahdollistaa siirtymät Flutter-sovelluksen eri näyttöjen välillä. 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 1/4.

Kuinka kauan ”Sivujen välinen perusnavigointi”-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