شرح استخدام ويدجت BottomNavigationBar في فلاتر

BottomNavigationBar(
  items: [
    BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Home',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.search),
      label: 'Search',
    ),
    BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Profile',
    ),
  ],
)

BottomNavigationBar(
  currentIndex: _selectedIndex,
  onTap: _onItemTapped,
  ...
)

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

BottomNavigationBar(
  onTap: _onItemTapped,
  ...
)

BottomNavigationBar(
  backgroundColor: Colors.white,
  ...
)

BottomNavigationBar(
  selectedItemColor: Colors.blue,
  ...
)

BottomNavigationBar(
  unselectedItemColor: Colors.grey,
  ...
)

BottomNavigationBar(
  showSelectedLabels: true,
  ...
)

BottomNavigationBar(
  showUnselectedLabels: true,
  ...
)

BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  ...
)

BottomNavigationBar(
  elevation: 8.0,
  ...
)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    PageOne(),
    PageTwo(),
    PageThree(),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Bottom Navigation Bar Example'),
        ),
        body: _children[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: onTabTapped,
          items: [
            const BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Page One',
            ),
            const BottomNavigationBarItem(
              icon: Icon(Icons.mail),
              label: 'Page Two',
            ),
            const BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Page Three',
            ),
          ],
        ),
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Page One'),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Page Two'),
    );
  }
}

class PageThree extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Page Three'),
    );
  }
}

bottomNavigationBar: BottomNavigationBar(
  currentIndex: _currentIndex,
  onTap: onTabTapped,
  items: [
    const BottomNavigationBarItem(
      icon: Icon(Icons.home),
      label: 'Page One',
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.mail),
      label: 'Page Two',
    ),
    const BottomNavigationBarItem(
      icon: Icon(Icons.person),
      label: 'Page Three',
    ),
  ],
),

void onTabTapped(int index) {
  setState(() {
    _currentIndex = index;
  });
}

final List<Widget> _children = [
  PageOne(),
  PageTwo(),
  PageThree(),
];

body: _children[_currentIndex],

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Page One'),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Page Two'),
    );
  }
}

class PageThree extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const Center(
      child: Text('Page Three'),
    );
  }
}