https://github.com/js-bhavyansh/fluttertabbar

A simple Flutter app that showcases smooth tab navigation with custom views using DefaultTabController
https://github.com/js-bhavyansh/fluttertabbar

dart flutter tab-bar

Last synced: 17 days ago
JSON representation

A simple Flutter app that showcases smooth tab navigation with custom views using DefaultTabController

• Host: GitHub
• URL: https://github.com/js-bhavyansh/fluttertabbar
• Owner: js-bhavyansh
• Created: 2024-10-19T16:30:53.000Z (about 1 month ago)
• Default Branch: master
• Last Pushed: 2024-10-19T16:56:03.000Z (about 1 month ago)
• Last Synced: 2024-11-03T13:03:01.658Z (17 days ago)
• Topics: dart, flutter, tab-bar
• Language: C++
• Homepage:
• Size: 261 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Flutter Tab Bar with DefaultTabController

This Flutter app demonstrates the use of `DefaultTabController` with a tab bar and corresponding tab views. Each tab contains an icon and shows different content.

## Features

- Tab navigation with three tabs for Home, Settings, and Profile.

- Smooth transitions between tabs.

- Customizable tab colors and styles.

## Preview





## Code Snippet

Below is the key part of the app using `DefaultTabController`:

```dart

DefaultTabController(

  length: 3,

  child: Scaffold(

    appBar: AppBar(

      backgroundColor: Colors.deepPurple[200],

      title: const Center(child: Text('T A B  B A R', style: TextStyle(color: Colors.white))),

    ),

    body: Container(

      color: Colors.deepPurple[200],

      child: Column(

        children: [

          TabBar(

            labelColor: Colors.deepPurple[500], // Color for the selected tab

            unselectedLabelColor: Colors.deepPurple[300], // Color for unselected tabs

            indicatorColor: Colors.deepPurple[500], // Indicator color

            tabs: const [

              Tab(icon: Icon(Icons.home)),

              Tab(icon: Icon(Icons.settings)),

              Tab(icon: Icon(Icons.person)),

            ]

          ),

          Expanded(

            child: TabBarView(

              children: [

                Container(

                  color: Colors.deepPurple[100],

                  child: const Center(child: Text('1ST TAB', style: TextStyle(color: Colors.white))),

                ),

                Container(

                  color: Colors.deepPurple[300],

                  child: const Center(child: Text('2ND TAB', style: TextStyle(color: Colors.white))),

                ),

                Container(

                  color: Colors.deepPurple[500],

                  child: const Center(child: Text('3RD TAB', style: TextStyle(color: Colors.white))),

                ),

              ],

            ),

          )

        ],

      ),

    ),

  ),

)

```

## Getting Started

To run this project on your local machine:

1. Clone the repository and open it in your IDE:

   ```bash

   git clone https://github.com/Bhavyansh03-tech/FlutterTabBar.git

   ```

2. Run the project on an emulator or a physical device.

   ```bash

   flutter run

   ```

## Contributing

Contributions are welcome! Please fork the repository and submit a pull request for any improvements or bug fixes.

1. Fork the repository.

2. Create your feature branch (`git checkout -b feature/your-feature`).

3. Commit your changes (`git commit -am 'Add some feature'`).

4. Push to the branch (`git push origin feature/your-feature`).

5. Create a new Pull Request.

## Contact

For questions or feedback, please contact [@Bhavyansh03-tech](https://github.com/Bhavyansh03-tech) on GitHub or connect with me on [LinkedIn](https://www.linkedin.com/in/bhavyansh03/).

---