LYCEUM OF THE PHILIPPINESUNIVERSITYCAVITE
DEPARTMENT OF COMPUTER STUDIES
ELECL01C
ANDROID APP DEVELOPMENT
Name: Rocas, Ron Iverson C.
Section: IT301
LAB ACTIVITY IN ANDROID
Flutter TabBar & TabBarView
Objective:
To create a Flutter app that utilizes the TabBar and TabBarView widgets to implement a tabbed
interface with distinct content for each tab.
You can consult any reference but your answer must be written in your own words.
.
1. What is the purpose of the TabBar and TabBarView widgets in Flutter? ANSWER:
- TabBar Displays tabs for navigation. While TabBarView Holds content corresponding to
each tab.
2. What is the role of the DefaultTabController in managing tabs? ANSWER:
- Manages state for TabBar and TabBarView.
3. What are some key properties of the TabBar widget, and how can they be
customized? ANSWER:
1. Tabs- List of tabs.
2. isScrollable- Scrollable tabs (true/false).
3. Controller- Custom TabController.
4. labelColor, unselectedLabelColor- Text color.
5. indicatorColor, indicatorWeight- Indicator appearance.
6. labelStyle, unselectedLabelStyle- Text style.
7. onTap- Callback for tab selection.
Create a basic Flutter Application in Android Studio or your favorite IDE and replace the main.dart
file with the following code.
Screenshot of the Output:
HANDS ON ACTIVITY:
• Create a new Flutter project using FLUTLAB.
• Name your project as TabbedApp_Surname.
1.TabBar and TabBarView:
• Implement a DefaultTabController with at least three tabs.
• Use the TabBar widget to display the tabs at the top of the screen.
• Use the TabBarView widget to display different content for each tab.
2.Tab Content:
• Each tab should have unique content. You can choose the content based on the theme of
your app.
• For example, if it's a fitness app, tabs could be "Workouts," "Nutrition," and "Progress."
3. Icons:
• Consider adding icons to each tab for better visual appeal.
• You can use the Tab widget and provide the icon property.
Put the Screenshot of the Output and Code here:
Code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(
icon: Icon(Icons.library_books),
text: "Modules",
),
Tab(icon: Icon(Icons.call), text: "Phone"),
Tab(
icon: Icon(Icons.email),
text: "Email",
),
],
),
title: Text('Student Module'),
),
body: TabBarView(
children: [
Center(child: Text("This is where you can find your books")),
Center(child: Text("This is where you can call")),
Center(child: Text("This is where you can send emails")),
],
),
),
);
}
}
