21. Februar 2024
Webmaster Referenz ,

BottomNavigationBar        

                               

Das BottonNavigationBar-Widget wird verwendet, um am unteren Rand der App Auswahlmöglichkeiten anzuzeigen. Es kann aus mehreren Elementen (mindestens 2) wie Symbolen, Text oder beidem bestehen, über die je nach Design zu einer anderen Seite der Anwendung geführt wird. Es soll dem Benutzer allgemein die Navigation zu verschiedenen Abschnitten der Anwendung erleichtern.

Constructor:

BottomNavigationBar(

{Key key,
@required List<BottomNavigationBarItem> items,
ValueChanged<int> onTap,
int currentIndex: 0,
double elevation,
BottomNavigationBarType type,
Color fixedColor,
Color backgroundColor,
double iconSize: 24.0,
Color selectedItemColor,
Color unselectedItemColor,
IconThemeData selectedIconTheme,
IconThemeData unselectedIconTheme,
double selectedFontSize: 14.0,
double unselectedFontSize: 12.0,
TextStyle selectedLabelStyle,
TextStyle unselectedLabelStyle,
bool showSelectedLabels: true,
bool showUnselectedLabels,
MouseCursor mouseCursor})

Eigenschaften:

  • hashCode: Der Hash-Code für dieses Objekt.
  • key: Steuert, wie ein Widget ein anderes Widget in der Baumstruktur ersetzt.
  • runtimeType: Eine Darstellung des Laufzeittyps des Objekts.
  • backgroundColor: : Die Farbe der BottomNavigationBar selbst.
  • elevation: Die z-Koordinate der BottomNavigationBar relativ zum Elternelement.
  • fixedColor: The z-coordinate of this BottomNavigationBar.
  • items: Definiert das Erscheinungsbild der Schaltflächenelemente, die in der unteren Navigationsleiste angeordnet sind.
  • onTap: Wird aufgerufen, wenn auf eines der Elemente getippt wird.
  • currentIndex: Diese Eigenschaft nimmt einen int-Wert  als Objekt an, um den Elementen den Index t zuzuweisen.
  • fixedColor: Verwendet die Color-Klasse als Objekt, um der SelectedItemColor einen festen Wert zuzuweisen.
  • iconSize: Es wird eindouble-Wert als Objekt verwendet, um die Größe aller Symbole in der BottomNavigationBar zu bestimmen.
  • mouseCursor: Die  mouseCursor-Eigenschaft (= MouseCursor-Klasse) bestimmt die Art des Cursors, den dieses Widget haben wird.
  • selectedFontSize: Steuert den Schriftgrad in der BottomNavigationBar, wenn die Elemente ausgewählt sind. Es nimmt einen double-Wert als Objekt an.
  • selectedIcontheme: Diese Eigenschaft enthält  die IconThemeData-Klasse als Objekt, um die Darstellung der Symbole dieses Widgets zu steuern, wenn es ausgewählt ist.
  • selectedIconColor: Bestimmt die Farbe (=Color class) der icons in diesem Widget, wenn es ausgewählt wird.
  • selectedLabelStyle: TextStyle class is the object assigned to this property which controls the text style at the instance of selection.
  • showSelectedLabels: Verwendet einen booleschen Wert als Objekt, um zu bestimmen, ob die Beschriftungen für das nicht ausgewählte Element angezeigt werden oder nicht.
  • showUnselectedLabels: Verwendet auch einen booleschen Wert als Objekt, um zu bestimmen, ob die Beschriftungen für ausgewählte Elemente angezeigt werden oder nicht.
  • type: Die type-Eigenschaft steuert das Verhalten (behaviour) und das Layout der BottomNavigationBar. Es verwendet die BottomNavigationBarType enum als Objekt.
  • unselectedFontSize: Double-Wert, um die Schriftgröße zu bestimmen, wenn das Element nicht ausgewählt ist.
  • unselectedIconTheme:  IconThemeData-Klasse als Objekt, um die Darstellung der Symbole dieses Widgets zu steuern, wenn es nicht ausgewählt (unselected od not seleced)  ist.
  • unselectedItemColor: Bestimmt die Farbe, die die Symbole in diesem Widget haben, wenn sie nicht ausgewählt sind. Diese Eigenschaft verwendet die Color-Klasse .
  • unselectedLabelStyle: TextStyle class ist das Objekt, das dieser Eigenschaft zugewiesen ist, die den Textstyle steuert, wenn die Auswahl des Elements aufgehoben wird (unselected).

Beispiel:

import ‚package:flutter/material.dart‘;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  static const String _title = ‚Flutter Buttom Navigtion Bar‘;
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle myStyle =
      TextStyle(fontSize: 36, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      ‚Start Seite‘,
      style: myStyle,
    ),
    Text(
      ‚Seite 2‘,
      style: myStyle,
    ),
    Text(
      ‚Seite 3‘,
      style: myStyle,
    ),
  ];
  void _onTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(‚Test Buttom-Navigation-Bar‘),
        backgroundColor: const Color.fromARGB(255, 68, 126, 196),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: ‚Home‘,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_card),
            label: ‚Seite 2‘,
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add_box),
            label: ‚Seite 3‘,
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onTapped,
      ),
    );
  }
}