Flutter Icon With Tab Example

Hello Friends,

I will show you how to work the flutter icon with a tab example. We will look at an example of the flutter tabbar and a complete tutorial with examples. let’s discuss the flutter tabs tutorial and examples. We will look at examples of adding icons to the tab bar in a flutter. follow the below step for how to create a simple tabbar with tabbarview in a flutter.

If your application needs to display some content, it's quite common to separate the contents into multiple tabs. In Flutter, creating such a layout can be done easily thanks to TabBar and TabBarView widgets. TabBar is used to create the tabs, while TabBarView is used to define the content of each tab. Flutter already handles how to switch between tabs.

Step 1: Create Flutter Project

Follow along with the setup, you will be creating an Flutter app.

- $flutter create flutter_icon_example_with_tab	

Navigate to the project directory:

- $cd flutter_icon_example_with_tab

Step 2: Main File

Create a main.dart file in the lib directory

import 'package:flutter/material.dart';

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

	class TabBarIconDemo extends StatelessWidget {
	  	@override
	  	Widget build(BuildContext context) {
		    return MaterialApp(
	      		home: DefaultTabController(
	        		length: 5,
	        		child: Scaffold(
	          			appBar: AppBar(
	            			bottom: TabBar(
	              				tabs: [	
					                Tab(icon: Icon(Icons.music_note)),
					                Tab(icon: Icon(Icons.music_video)),
					                Tab(icon: Icon(Icons.camera_alt)),
					                Tab(icon: Icon(Icons.grade)),
					                Tab(icon: Icon(Icons.email)),
	              				],
	            			),
	            			title: Text('Icon Example With Tab'),
	            			backgroundColor: Colors.blue,
	          			),
	          			body: TabBarView(
	            			children: [
	              				Icon(Icons.music_note,
		                  				color: Colors.green,
		                  				size: 300),
				              	Icon(Icons.music_video,
					                  	color: Colors.blue,
					                  	size: 300),
				              	Icon(Icons.camera_alt,
					                  	color: Colors.green,
					                  	semanticLabel: 'Camera',
					                  	size: 300),
				              	Icon(Icons.grade,
						                color: Colors.blue,
						                size: 300,
						                semanticLabel: 'Star',),
				              	Icon(Icons.email,
					                	olor: Colors.green,
							            size: 300,),
	           				],
	          			),
	        		),
	      		),
	    	);
	  	}
	}

Step 3: Run this Debug App

I hope it can help you...