Die Anleitung zu Flutter BottomNavigationBar

View more Tutorials:

1- BottomNavigationBar

Eine untere Navigationbar ist ein traditioneller Stil von der Anwendungen  iOS. In  Flutter können Sie dies mit  BottomNavigationBar tun. Außerdem verfügt die  BottomNavigationBar über eine praktische Funktion, mit der Sie einen  FloatingActionButton anhängen können.
BottomNavigationBar Constructor:
BottomNavigationBar 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}
)
BottomNavigationBar wird normaerweise über die Property  AppBar.bottomNavigationBar in einem  Scaffold platziert und am unteren Rand vom  Scaffold ​​​​​​​angezeigt.
BottomNavigationBar ist ziemlich ähnlich wie  BottomAppBar auf die Nutzung. BottomNavigationBar bietet eine Vorlage für eine Navigationsbar, sodass sie einfach und benutzerfreundlich ist. Wenn Sie Ihre Kreativität auslösen möchten, verwenden Sie  BottomAppBar.

2- Example

Beginnen wir mit einem vollständigen Beispiel für  BottomNavigationBar, damit Sie verstehen kann, wie dieses  Widget funktioniert.
main.dart (ex1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }

}

class MyHomePageState extends State<MyHomePage> {
  int selectedIndex = 0;
  Widget _myContacts = MyContacts();
  Widget _myEmails = MyEmails();
  Widget _myProfile = MyProfile();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar Example"),
      ),
      body:  this.getBody(),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: this.selectedIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text("Contacts"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text("Emails"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Profile"),
          )
        ],
        onTap: (int index) {
          this.onTapHandler(index);
        },
      ),
    );
  }

  Widget getBody( )  {
    if(this.selectedIndex == 0) {
      return this._myContacts;
    } else if(this.selectedIndex==1) {
      return this._myEmails;
    } else {
      return this._myProfile;
    }
  }

  void onTapHandler(int index)  {
    this.setState(() {
      this.selectedIndex = index;
    });
  }
}

class MyContacts extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Contacts"));
  }
}

class MyEmails extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Emails"));
  }
}

class MyProfile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text("Profile"));
  }
}

3- items

Die Property items wird verwendet, um die Liste der Elemente von  BottomNavigationBar festzulegen. Diese Property ist erforderlich und die Anzahl der Elemente muss größer oder gleich 2 sein. Andernfalls wird eine Fehlermeldung angezeigt.
@required List<BottomNavigationBarItem> items
BottomNavigationBarItem Constructor:
BottomNavigationBarItem Constructor
const BottomNavigationBarItem(
    {@required Widget icon,
    Widget title,
    Widget activeIcon,
    Color backgroundColor}
)
Zum Beispiel:
main.dart (items ex1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar Example"),
      ),
      body: Center(
          child:  Text(
            'Flutter BottomNavigationBar Example',
          )
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text("Messages"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Profile"),
          )
        ],
      ),
    );
  }
}

4- onTap

onTap ist eine Funktion  callback. Es wird aufgerufen, wenn der Benutzer auf ein Element von  BottomNavigationBar ​​​​​​​tippt.
ValueChanged<int> onTap
main.dart (onTab ex1)
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Title of Application',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return MyHomePageState();
  }

}

class MyHomePageState extends State<MyHomePage> {
  int tapCount = 0;
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("BottomNavigationBar Example"),
      ),
      body: Center(
          child: Text("Tap Count: " + this.tapCount.toString()
                       + ", Index: " + this.selectedIndex.toString())
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this.selectedIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.contacts),
            title: Text("Contacts"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.mail),
            title: Text("Emails"),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text("Profile"),
          )
        ],
        onTap: (int index) {
          this.onTapHandler(index);
        },
      ),
    );
  }

  void onTapHandler(int index)  {
    this.setState(() {
      this.tapCount++;
      this.selectedIndex = index;
    });
  }
}

5- currentIndex

currentIndex ist der Index vom aktuell ausgewählten Element  BottomNavigationBar. Der Standardwert ist 0, was dem ersten Element entspricht.
int currentIndex: 0

6- type

BottomNavigationBarType type

7- iconSize

Die Property iconSize wird benutzt um die Größe von Symbol aller   BottomNavigationBarItem festzulegen.
double iconSize: 24.0
iconSize (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  iconSize: 48,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
),

8- selectedIconTheme

Der Property selectedIconTheme wird benutzt um die Größe, die Farbe und die Deckkraft für das ausgewählte Symbol  BottomNavigationBarItem .
IconThemeData selectedIconTheme
IconThemeData Constructor
const IconThemeData (
    {Color color,
    double opacity,
    double size}
)
Wenn die Property selectedIconTheme benutzt wird, sollten Sie einen Wert für die Property  unselectedIconTheme angeben. Andernfalls werden auf den nichtausgewählten BottomNavigationBarItem keine Symbole angezeigt.
selectedIconTheme (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedIconTheme: IconThemeData (
      color: Colors.red,
      opacity: 1.0,
      size: 30
  ),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

9- unselectedIconTheme

Die Property unselectedIconTheme wird benutzt um die Größe, die Farbe und die Deckkraft für die Symbole von nichtausgewählten   BottomNavigationBarItem anzugeben.
IconThemeData unselectedIconTheme
IconThemeData constructor
const IconThemeData (
    {Color color,
    double opacity,
    double size}
)
Wenn die Property  unselectedIconTheme wird verwendet, sollten Sie einen Wert für Property  selectedIconTheme angeben.Wenn nicht, wird das Symbol auf das ausgewählte BottomNavigationBarItem nicht angezeigt.
unselectedIconTheme (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedIconTheme: IconThemeData (
      color: Colors.red,
      opacity: 1.0,
      size: 45
  ),
  unselectedIconTheme: IconThemeData (
      color: Colors.black45,
      opacity: 0.5,
      size: 25
  ),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
),

10- selectedLabelStyle

Mit der Property selectedLabelStyle wird der Textstil auf der Beschriftung des ausgewählten  BottomNavigationBarItem angegeben.
TextStyle selectedLabelStyle
selectedLabelStyle (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

11- unselectedLabelStyle

Die Property unselectedLabelStyle wird verwendet um den Textstil auf der Beschrigtung der nicht ausgwählten  BottomNavigationBarItem anzugeben.
TextStyle unselectedLabelStyle
unselectedLabelStyle (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
  unselectedLabelStyle: TextStyle(fontStyle: FontStyle.italic),
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

12- showSelectedLabels

Die Property showSelectedLabels wird verwendet, um die Anzeige von Bechrigtungen im ausgewählten  BottomNavigationBarItem zuzulassen oder nicht zuzulassen. Der Standardwert ist  true.
bool showSelectedLabels: true
showSelectedLabels (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  showSelectedLabels: false,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

13- showUnselectedLabels

Die Property showUnselectedLabels wird verwendet, um die Anzeige von Labels im nicht ausgewählten  BottomNavigationBarItem zuzulassen oder nicht zuzulassen- Der Standardwert ist  true.
bool showUnselectedLabels
showUnselectedLabels (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  showUnselectedLabels: false,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

14- selectedFontSize

Mit der Property selectedFontSize wird die Schriftgröße des ausgewählten  BottomNavigationBarItem angegeben. Der Standardwert ist 14.
double selectedFontSize: 14.0
selectedFontSize (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedFontSize: 20,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

15- unselectedFontSize

Mit der Property selectedFontSize wird die Schriftgröße für das nicht ausgewählte  BottomNavigationBarItem angegeben. Der Standardwert ist 12.
double unselectedFontSize: 12.0
unselectedFontSize (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedFontSize: 20,
  unselectedFontSize: 15,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

16- backgroundColor

Mit der Property backgroundColor wird die Hintergrundfarbe der  BottomNavigationBar ​​​​​​​angegeben.
Color backgroundColor
backgroundColor (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  backgroundColor : Colors.greenAccent,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

17- selectedItemColor

Mit der Property selectedItemColor wird die Farbe des ausgewählten  BottomNavigationBarItem angegeben, das für das Symbol und die Beschriftung funktioniert.
Achtung: Der Property selectedItemColor ist ähnlich wie  fixedColor, für die Sie nur eine dieser beiden Property verwenden dürfen.
Color selectedItemColor
selectedItemColor (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedItemColor : Colors.red,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

18- unselectedItemColor

Die Property  unselectedItemColor wird verwendet um die Farbe von nicht ausgewählten  BottomNavigationBarItem anzugeben, das für das Symbol und die Beschriftung funktioniert.
Color unselectedItemColor
unselectedItemColor (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  selectedItemColor : Colors.red,
  unselectedItemColor: Colors.cyan,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

19- fixedColor

Die Property fixedColor ähnelt der Property  selectedItemColor. Beide werden verwendet, um die Farbe des ausgewählten  BottomNavigationBarItem anzugeben. Es funktioniert für das Symbol und die Beschriftung. 
Hinweis: fixedColor ist ein alter Name, der aus Gründen der Abwärtskompatibilität (backwards compatibility) weiterhin verfügbar ist. Sie sollten die Property  selectedItemColor verwenden und nicht beide gleichzeitig verwenden dürfen.
Color fixedColor
fixedColor (ex1)
BottomNavigationBar(
  currentIndex: this.selectedIndex,
  fixedColor: Colors.red,
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.contacts),
      title: Text("Contacts"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      title: Text("Emails"),
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("Profile"),
    )
  ],
  onTap: (int index) {
    this.setState(() {
      this.selectedIndex = index;
    });
  },
)

20- mouseCursor

MouseCursor mouseCursor
  • TODO Link!

View more Tutorials: