Menu
CoddyTech

כרטיסיות עם סרגל ניווט

חלק מהיחידה רשימות ומסכים במסלול ה-Flutter של Coddy. שיעור 23 מתוך 33.

אפליקציות רבות מציגות את הדפים הראשיים שלהן בכרטיסיות לאורך תחתית המסך. NavigationBar מצייר אותן; מעבירים אותו אל bottomNavigationBar: של Scaffold.

NavigationBar(
  selectedIndex: index,
  onDestinationSelected: (int i) {
    setState(() {
      index = i;
    });
  },
  destinations: const [
    NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
    NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
  ],
)

כל NavigationDestination היא כרטיסייה אחת, עם סמל ותווית. selectedIndex מציין איזו כרטיסייה מודגשת, כשהספירה מתחילה ב-0. כשמקישים על כרטיסייה, onDestinationSelected מקבל את האינדקס שלה.

הסרגל אינו זוכר את הכרטיסייה בעצמו: שומרים את index במצב ומשנים אותו באמצעות setState. גוף המסך מציג את הדף המתאים לאינדקס הזה, במקרה הזה pages[index] מתוך רשימת רכיבי ממשק.

challenge icon

אתגר

קל

בסרגל יש שלוש לשוניות, אבל הקשה עליהן לא עושה דבר. הוסף onDestinationSelected: כדי שלשונית שעליה מקישים תודגש והעמוד שלה יוצג: Favorites page עבור Favorites, Settings page עבור Settings.

נסו בעצמכם

import 'package:flutter/material.dart';

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

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

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

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int index = 0;
  final List<Widget> pages = const [
    Center(child: Text('Home page')),
    Center(child: Text('Favorites page')),
    Center(child: Text('Settings page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('My App')),
      body: pages[index],
      bottomNavigationBar: NavigationBar(
        selectedIndex: index,
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.favorite), label: 'Favorites'),
          NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
        ],
      ),
    );
  }
}
quiz iconבחנו את עצמכם

השיעור הזה כולל חידון קצר. התחילו את השיעור כדי לענות עליו ולעקוב אחרי ההתקדמות.

כל השיעורים ביחידה רשימות ומסכים

תרגלו בעצמכם: קומפיילר Flutter אונליין