Scribd
Upload
33 views6 pages

ROCAS TabBarTabViewActivity

Uploaded by

roniversonrocas33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
33 views6 pages

ROCAS TabBarTabViewActivity

Uploaded by

roniversonrocas33
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

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")),
],
),
),
);
}
}

You might also like