Mobiilikehitys Flutterilla · Oppitunti

TabBarit ja Drawerit

Toteuttakaa yleisiä navigointimalleja, kuten TabBar useille näkymille ja Drawer sivunavigointivalikoille.

Oppitunti 3/411 vaihetta

TabBarit ja Drawerit on ilmainen Mobiilikehitys Flutterilla-oppitunti CoddyKitissä. Tämä on oppitunti 3/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.

Navigointimallien perusteet

Flutter tarjoaa tehokkaita malleja sovelluksen navigointiin. Tänään tutustumme kahteen yleiseen malliin: TabBars- ja Drawers-widgetteihin.

Näiden widgettien avulla käyttäjät voivat siirtyä sovelluksen eri osioiden välillä sujuvasti ja intuitiivisesti.

TabBars sopii hyvin toisiinsa liittyvien näkymien välillä vaihtamiseen.
Drawers tarjoaa sivuvalikon yleiseen navigointiin tai asetuksiin.

Mitä TabBars ovat?

TabBar on vaakasuuntainen välilehtirivi, joka sijaitsee usein näytön ylä- tai alareunassa. Kukin välilehti edustaa eri näkymää tai sisältöluokkaa.

Kun käyttäjä napauttaa välilehteä, sen alla oleva sisältö vaihtuu ilman, että nykyisestä näytöstä poistutaan.

Perus-TabBarin rakentaminen

Välilehtien käyttämiseksi Scaffold kääritään usein DefaultTabController-widgetiin. Tämä ohjain hallitsee valittua välilehteä.

Sijoittakaa sitten TabBar-widget AppBar-widgetin bottom-ominaisuuteen tai käyttäkää sitä BottomNavigationBar-widgetinä.

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: DefaultTabController(
        length: 3, // Number of tabs
        child: Scaffold(
          appBar: AppBar(
            title: const Text('My Tab App'),
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: 'Home'),
                Tab(icon: Icon(Icons.settings), text: 'Settings'),
                Tab(icon: Icon(Icons.info), text: 'Info'),
              ],
            ),
          ),
          body: const TabBarView(
            children: [
              Center(child: Text('Home Content')),
              Center(child: Text('Settings Content')),
              Center(child: Text('Info Content')),
            ],
          ),
        ),
      ),
    );
  }
}

TabBarView käytännössä

TabBarView-widget toimii yhdessä TabBar-widgetin kanssa. Se näyttää parhaillaan valittua välilehteä vastaavan sisällön.

Varmistakaa, että TabBarView-widgetin alielementtien määrä vastaa DefaultTabController-widgetin length-arvoa ja Tab-widgettien määrää.

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: DefaultTabController(
        length: 3, // Must match the number of tabs
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Tab Views'),
            bottom: const TabBar(
              tabs: [
                Tab(text: 'Explore'),
                Tab(text: 'Favorites'),
                Tab(text: 'Profile'),
              ],
            ),
          ),
          body: TabBarView( // Content for each tab
            children: [
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Icon(Icons.explore, size: 80, color: Colors.blue),
                    Text('Explore new content!', style: TextStyle(fontSize: 20)),
                  ],
                ),
              ),
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Icon(Icons.favorite, size: 80, color: Colors.red),
                    Text('Your favorite items.', style: TextStyle(fontSize: 20)),
                  ],
                ),
              ),
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const [
                    Icon(Icons.person, size: 80, color: Colors.green),
                    Text('Your user profile.', style: TextStyle(fontSize: 20)),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Välilehtien tyylin määrittäminen

Voitte mukauttaa TabBar-widgetin ulkoasua. Voitte esimerkiksi vaihtaa värejä, ilmaisintyylejä tai otsikkotyylejä.

indicatorColor- ja labelColor-ominaisuudet ovat yleisiä tapoja sovittaa välilehdet sovelluksen teemaan.

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: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Custom Tabs'),
            bottom: TabBar(
              indicatorColor: Colors.yellowAccent, // Custom indicator color
              labelColor: Colors.white,            // Color for selected tab
              unselectedLabelColor: Colors.grey[400], // Color for unselected tabs
              tabs: const [
                Tab(icon: Icon(Icons.call), text: 'Calls'),
                Tab(icon: Icon(Icons.chat), text: 'Chats'),
              ],
            ),
          ),
          body: const TabBarView(
            children: [
              Center(child: Text('Calls Log')),
              Center(child: Text('Chat Messages')),
            ],
          ),
        ),
      ),
    );
  }
}

Mikä on Drawer?

Drawer on näytön sivusta, yleensä vasemmalta, esiin liukuva paneeli. Sitä käytetään usein pääasiallisiin navigointilinkkeihin tai yleisiin asetuksiin.

Drawer sopii erinomaisesti sovelluksiin, joissa on paljon osioita, jotka eivät mahdu TabBar- tai BottomNavigationBar-widgetiin.

Sivulaatikon lisääminen

Lisätkää sivulaatikko sisällyttämällä Drawer-widget Scaffold-widgetin alielementiksi. Flutter lisää AppBar-widgetiin automaattisesti valikkokuvakkeen.

Drawer-widgetin sisällä käytetään yleensä ListView-widgetiä, joka sisältää useita navigointikohteita edustavia ListTile-widgettejä.

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: Scaffold(
        appBar: AppBar(
          title: const Text('My Drawer App'),
        ),
        drawer: Drawer( // The Drawer widget
          child: ListView(
            padding: EdgeInsets.zero, // Remove padding
            children: <Widget>[
              const DrawerHeader( // Top part of the drawer
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Text(
                  'App Menu',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                  ),
                ),
              ),
              ListTile( // A navigation item
                leading: const Icon(Icons.message),
                title: const Text('Messages'),
                onTap: () {
                  // Handle tap
                  Navigator.pop(context); // Close the drawer
                },
              ),
              ListTile(
                leading: const Icon(Icons.account_circle),
                title: const Text('Profile'),
                onTap: () {
                  // Handle tap
                  Navigator.pop(context);
                },
              ),
              ListTile(
                leading: const Icon(Icons.settings),
                title: const Text('Settings'),
                onTap: () {
                  // Handle tap
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
        body: const Center(
          child: Text('Pull from left to open drawer!'),
        ),
      ),
    );
  }
}

Drawer-napautusten käsittely

Kun käyttäjä napauttaa Drawer-valikon kohdetta, yleensä haluatte suorittaa jonkin toiminnon, kuten siirtyä uuteen näyttöön tai päivittää sisältöä.

Muistakaa kutsua Navigator.pop(context) napautuksen jälkeen sulkeaksenne Drawerin ja tarjotaksenne sujuvan käyttökokemuksen.

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: Scaffold(
        appBar: AppBar(
          title: const Text('Drawer Actions'),
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              const DrawerHeader(
                decoration: BoxDecoration(color: Colors.green),
                child: Text('Navigation', style: TextStyle(color: Colors.white)),
              ),
              ListTile(
                leading: const Icon(Icons.home),
                title: const Text('Go Home'),
                onTap: () {
                  // Close drawer, then navigate (or just close if already on home)
                  Navigator.pop(context);
                  // Example: Navigator.push(context, MaterialPageRoute(builder: (context) => HomeScreen()));
                },
              ),
              ListTile(
                leading: const Icon(Icons.bookmark),
                title: const Text('View Bookmarks'),
                onTap: () {
                  Navigator.pop(context); // Close drawer
                  // Show a snackbar as an example action
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Viewing Bookmarks!'))
                  );
                },
              ),
            ],
          ),
        ),
        body: const Center(
          child: Text('Try opening the drawer and tapping an item.'),
        ),
      ),
    );
  }
}

Drawerin mukauttaminen

Drawereita voi mukauttaa monipuolisesti. Voitte lisätä niihin käyttäjäprofiilin tietoja, sovelluksen version tai jopa hakupalkkeja.

Käyttäkää UserAccountsDrawerHeader-widgetiä valmiiseen käyttäjätietoja sisältävään otsakkeeseen.
Rajoittakaa kohteiden määrä kohtuulliseksi epäselvyyden välttämiseksi.
Ryhmitelkää toisiinsa liittyvät kohteet loogisesti erotinviivojen avulla.

TabBar vai Drawer?

Mikä seuraavista tilanteista sopii parhaiten Flutterin TabBar-widgetin käyttöön?

Vastaa interaktiivisessa oppitunnissa

TabBars ja Drawers – kertaus

Hienoa työtä! Olette oppineet toteuttamaan kaksi keskeistä navigointimallia:

TabBars liittyvien näkymien välillä vaihtamiseen DefaultTabController-, TabBar- ja TabBarView-widgettien avulla.
Drawers sivunavigointivalikoihin Drawer-widgetin ja ListTile-widgettien avulla.

Valitkaa sopiva malli sovelluksen monimutkaisuuden ja käyttäjän kulun perusteella. Jatkakaa tutkimista rakentaaksenne intuitiivisempia käyttöliittymiä!

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 ”TabBarit ja Drawerit” ilmainen?

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

Toteuttakaa yleisiä navigointimalleja, kuten TabBar useille näkymille ja Drawer sivunavigointivalikoille. 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 3/4.

Kuinka kauan ”TabBarit ja Drawerit”-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