Experiment 1
a) Install Flutter and Dart SDK
10 Key Points
1. Flutter SDK is required to develop Flutter apps.
2. Dart SDK is bundled with Flutter but can be installed separately.
3. Download Flutter SDK from the official website (flutter.dev).
4. Extract and place SDK in a suitable directory (e.g., C:\src\flutter).
5. Add Flutter’s bin folder to the system PATH.
6. Run flutter doctor to check dependencies and installation status.
7. Install required tools: Android Studio, Android SDK, and device emulators.
8. Ensure Git is installed (Flutter requires Git for commands).
9. On macOS, set up Xcode for iOS development.
10. Keep Flutter SDK updated using flutter upgrade.
Advantages
• Enables cross-platform development.
• Includes all necessary tools for app building.
• One-time setup for multiple projects.
• Compatible with Windows, macOS, and Linux.
• Comes with integrated Dart SDK.
Disadvantages
• Initial setup can be time-consuming.
• Requires significant storage space.
• May need extra configuration for iOS development.
• Dependent on internet for upgrades and packages.
• Issues can occur if PATH is misconfigured.
b) Write a simple Dart program to understand the language basics
void main() {
String name = "Tarun";
int age = 19;
double height = 5.9;
bool isStudent = true;
print("Hello, my name is $name.");
print("I am $age years old and $height feet tall.");
print("Am I a student? $isStudent");
if (age >= 18) {
print("You are an adult.");
} else {
print("You are not an adult.");
print("Counting from 1 to 5:");
for (int i = 1; i <= 5; i++) {
print(i);
greet(name);
void greet(String personName) {
print("Nice to meet you, $personName!");
}
OUTPUT
Hello, my name is Tarun.
I am 19 years old and 5.9 feet tall.
Am I a student? true
You are an adult.
Counting from 1 to 5:
Nice to meet you, Tarun!
Advantages
• Simple syntax for beginners.
• Null safety reduces runtime errors.
• Supports both OOP and functional programming.
• Can run standalone or inside Flutter apps.
• Easy string handling and list operations.
Disadvantages
• Less popular compared to Java/Python.
• Smaller library ecosystem.
• Requires Dart runtime to execute.
• Some developers may find syntax new.
• Limited community compared to mainstream languages.
Experiment 2
a) Explore various Flutter widgets (Text, Image, Container, etc.)
10 Key Points
1. Widgets are the fundamental building blocks of a Flutter application’s UI.
2. Text widget is used to display text on the screen with styling options.
3. Image widget is used to load images from assets, the internet, or local files.
4. Container widget acts like a box model with padding, margin, and decoration.
5. Widgets can be nested to form complex designs.
6. Every widget in Flutter is immutable, meaning a rebuild is needed to change it.
7. The Padding widget adds space inside its child widget.
8. The Center widget centers its child widget within its parent.
9. Flutter supports both stateless and stateful widgets.
10. Layout and UI design in Flutter depend heavily on combining widgets effectively.
Advantages
• Large library of built-in widgets.
• Highly customizable for different designs.
• Consistent appearance across platforms.
• Easy to learn for beginners.
• Works well with responsive layouts.
Disadvantages
• Overuse of widgets can create deep nesting, making code harder to read.
• Complex UIs can affect app performance.
• Some designs require custom widgets.
• Beginners may find it confusing to choose the right widget.
• Certain widgets need extra packages for advanced features.
b) Implement different layout structures using Row, Column, and Stack widgets
10 Key Points
1. Row widget arranges elements horizontally.
2. Column widget arranges elements vertically.
3. Stack widget overlays widgets on top of each other.
4. MainAxisAlignment property controls alignment along the main axis.
5. CrossAxisAlignment property controls alignment perpendicular to the main axis.
6. Expanded widget helps distribute available space evenly.
7. Flexible widget allows flexible resizing of child widgets.
8. SizedBox can add fixed space between elements.
9. Nesting Row, Column, and Stack allows complex layouts.
10. Layout widgets respect screen size and adapt if designed responsively.
Advantages
• Simple and intuitive layout creation.
• Supports both basic and complex UI structures.
• Row/Column are easy to understand for beginners.
• Stack allows creative designs with overlapping widgets.
• Can be combined with padding, alignment, and decoration widgets.
Disadvantages
• Too many nested layouts can hurt performance.
• Incorrect alignment can cause overflow issues.
• Stack widgets need careful positioning to avoid overlap problems.
• May require extra widgets for spacing and padding.
• Responsive design takes extra planning with these layouts.
Experiment 3
a) Create a basic Flutter application with multiple screens
10 Key Points
1. A Flutter app is built around a MaterialApp or CupertinoApp widget.
2. Multiple screens (pages) are represented using separate Widget classes.
3. Navigation between screens is handled using Navigator.push() and Navigator.pop().
4. Each screen can have its own Scaffold with AppBar, body, and floating buttons.
5. Data can be passed between screens through route arguments.
6. routes property in MaterialApp defines named routes for navigation.
7. Navigator.pushReplacement() replaces the current screen in the stack.
8. Stateless and Stateful widgets can both be used as screens.
9. Use SafeArea to avoid content overlapping with device notches.
10. UI elements are built inside the build() method of each screen widget.
Advantages
• Clear separation of app sections into different screens.
• Easy navigation with built-in Navigator API.
• Supports both stack-based and named route navigation.
• Code organization improves maintainability.
• Enables modular development for larger apps.
Disadvantages
• Complex navigation may require advanced state management.
• Too many screens can increase app complexity.
• Passing large amounts of data between screens can be tedious.
• Maintaining navigation history can be tricky in large apps.
• Requires additional testing for navigation bugs.
b) Implement navigation between screens using named routes
10 Key Points
1. Named routes assign a unique string name to each screen.
2. Defined in MaterialApp using the routes map.
3. Navigation is performed using Navigator.pushNamed(context, '/routeName').
4. Named routes help avoid hardcoding widget references everywhere.
5. Easy to manage for medium to large applications.
6. Data can be passed using Navigator.pushNamed arguments.
7. Use onGenerateRoute for dynamic route creation.
8. The / route is typically the home or first screen.
9. Navigator.pop() is used to go back to the previous screen.
10. Useful for deep linking and maintaining a navigation structure.
Advantages
• Cleaner and more readable navigation code.
• Centralized route definitions improve maintainability.
• Easier to handle navigation changes in large apps.
• Works well with deep links.
• Reduces duplication of navigation logic.
Disadvantages
• Requires careful route name management to avoid conflicts.
• Debugging becomes harder if route names are mistyped.
• Passing complex data between named routes can be verbose.
• Not as flexible as directly pushing widget instances.
• May require extra setup for nested navigators.
Experiment 4
a) Design a form in Flutter using TextField and different input types
10 Key Points
1. TextField widget allows users to input text in Flutter apps.
2. Multiple input types are supported via keyboardType (text, number, email, etc.).
3. controller property is used to retrieve and modify text field values.
4. decoration property allows adding labels, hints, and icons.
5. obscureText is used for password fields to hide input.
6. Validation logic can be added to check user input.
7. maxLength can limit the number of characters entered.
8. Styling can be applied using InputDecoration and TextStyle.
9. onChanged callback triggers on every text change.
10. Forms can include multiple TextField widgets for various inputs.
Advantages
• Easy to collect user input.
• Supports various data types via keyboard settings.
• Can be styled to match app theme.
• Works well for both single-line and multi-line input.
• Supports real-time validation and updates.
Disadvantages
• Requires manual validation code.
• Not inherently secure for sensitive data (needs encryption).
• Multiple fields require careful layout management.
• May require scrolling for small-screen devices.
• Needs form state handling for large forms.
b) Implement form validation and submission
10 Key Points
1. Use Form widget to group input fields and manage validation.
2. TextFormField is preferred over TextField for forms as it supports built-in validation.
3. GlobalKey<FormState> is used to manage form state.
4. validator function returns error messages for invalid inputs.
5. onSaved callback is triggered when form data is saved.
6. Use FormState.validate() to check if all inputs are valid.
7. Use FormState.save() to store data after validation.
8. Button click can trigger form validation and submission.
9. Successful validation can lead to data being stored or sent to APIs.
10. Can display success or error messages after submission.
Advantages
• Ensures data integrity before processing.
• Improves user experience by guiding input
.• Reduces backend errors by validating early.
• Easy to integrate with APIs for submission.
• Supports custom validation logic.
Disadvantages
• Requires additional code for complex validations.
• Incorrect validation logic can block valid input.
• Large forms can be difficult to manage.
• Some validations require server-side checks.
• Needs error message handling for better UX.
Experiment 5
a) Implement ListView in Flutter
10 Key Points
1. ListView is a scrollable list widget in Flutter.
2. Can be created using ListView() constructor for small lists.
3. ListView.builder is preferred for large or dynamic lists.
4. Each list item can be any widget (text, image, card, etc.).
5. Supports vertical and horizontal scrolling using scrollDirection.
6. itemCount defines the number of items in the list.
7. itemBuilder function returns widgets for each index.
8. Can be combined with ListTile for a standard list look.
9. Supports separators between items using ListView.separated. 10. Can handle gestures like
tap and swipe with GestureDetector.
Advantages
• Handles large lists efficiently.
• Highly customizable with different widgets per item.
• Supports infinite scrolling with dynamic data.
• Built-in scroll physics for smooth UX.
• Easy to integrate with data sources like APIs.
Disadvantages
• Improper handling of large lists can cause memory issues.
• Complex layouts inside list items may reduce performance.
• Requires state management for interactive lists.
• Not suitable for grid layouts without modifications.
• Needs manual work for advanced features like pagination.
b) Implement GridView in Flutter
10 Key Points
1. GridView displays items in a 2D grid format.
2. GridView.count allows setting a fixed number of columns.
3. GridView.builder is used for dynamic grids.
4. crossAxisCount defines how many columns per row.
5. mainAxisSpacing and crossAxisSpacing add spacing between items.
6. childAspectRatio controls the width-to-height ratio of grid items.
7. Supports horizontal and vertical scrolling.
8. Can display images, text, or custom widgets.
9. Works well for galleries, dashboards, and product displays.
10. Items can be interactive using InkWell or GestureDetector.
Advantages
• Great for displaying visual data like images.
• Easy to organize items in rows and columns.
• Highly customizable layout.
• Supports both fixed and dynamic item counts.
• Scrollable in both directions.
Disadvantages
• Not ideal for single-column lists.
• Large grids can affect performance without optimization.
• Requires manual handling of responsive design.
• May need complex state management for interactive items.
• Less efficient than ListView for text-heavy content.
Experiment 6
a) Implement TabBar in Flutter
10 Key Points
1. TabBar is used to create a horizontal list of tabs.
2. Requires a TabController to manage tab selection.
3. Works in combination with TabBarView for content switching.
4. Tabs can include text, icons, or both.
5. indicatorColor changes the active tab’s underline color.
6. Supports scrollable tabs using isScrollable: true.
7. Can be placed inside AppBar for a modern UI look.
8. Tabs change content without rebuilding the entire page.
9. Can animate transitions between tab views.
10. Easily integrates with Material Design themes.
Advantages
• Provides clean navigation between content sections.
• Reduces the need for multiple pages.
• Smooth animations improve user experience.
• Supports both icons and text in tabs.
• Easy to customize tab style.
Disadvantages
• Limited to horizontal navigation.
• Requires extra setup for complex state handling.
• Too many tabs can make navigation difficult.
• Does not support nested scrolling by default.
• Needs a controller for advanced features.
b) Implement BottomNavigationBar in Flutter
10 Key Points
1. BottomNavigationBar provides easy navigation at the bottom of the app.
2. Supports fixed and shifting modes.
3. items parameter defines the list of navigation buttons.
4. Each item can have an icon and label.
5. currentIndex determines the selected tab.
6. onTap callback is used to change pages.
7. Works well for apps with 3–5 main sections.
8. Supports theming with background and selected colors.
9. Can be combined with PageView for smooth content switching.
10. Popular in mobile app design for quick navigation.
Advantages
• Keeps navigation accessible at all times.
• Simple and familiar for users.
• Works well with most app layouts.
• Supports icons and labels.
• Easy to implement and customize.
Disadvantages
• Limited space for items (max ~5 before looking cluttered).
• Not ideal for apps with many sections.
• Can reduce available screen height.
• Needs manual state management for dynamic content.
• May feel repetitive if combined with other navigation systems.
Experiment 7
a) Implement ListView in Flutter
10 Key Points
1. ListView is used to display a scrollable list of widgets.
2. Supports vertical and horizontal scrolling.
3. ListView.builder improves performance for large lists.
4. ListView.separated allows adding dividers between items.
5. Items can be static or generated dynamically.
6. Automatically handles scrolling without extra setup.
7. Can be nested inside other widgets with constraints.
8. Supports infinite scrolling when combined with lazy loading.
9. Easily integrates with APIs for dynamic data.
10. Allows custom item layouts for flexibility.
Advantages
• Efficient for displaying large amounts of data.
• Supports dynamic content from APIs.
• Smooth scrolling experience.
• Easy to style and customize items.
• Multiple constructors for different needs.
Disadvantages
• Poor performance if all items are loaded at once.
• Needs careful handling of nested scrolling.
• Complex layouts may require extra optimization.
• Can cause memory issues if misused.
• Horizontal lists need manual height adjustments.
b) Implement GridView in Flutter
10 Key Points
1. GridView displays widgets in a grid layout.
2. Supports both fixed and dynamic column counts.
3. GridView.count defines a fixed number of columns.
4. GridView.builder improves performance for large grids.
5. Useful for image galleries, dashboards, and product listings.
6. Scroll direction can be vertical or horizontal.
7. Supports spacing between grid items.
8. Works well with custom item widgets.
9. Can be combined with SliverGrid for advanced layouts.
10. Adapts to screen size using MediaQuery.
Advantages
• Great for visually rich layouts.
• Easy to arrange items in rows and columns.
• Supports responsive design.
• Works well with APIs for dynamic data.
• Multiple constructors for flexibility.
Disadvantages
• Complex grids require extra performance optimization.
• Scrolling performance can degrade with too many images.
• Harder to manage variable item sizes.
• Requires more screen space than lists.
• Needs extra work for accessibility features.
Experiment 8
a) Implement Stack in Flutter
10 Key Points
1. Stack widget overlays widgets on top of each other.
2. Children are positioned relative to the stack boundaries.
3. Default alignment is top-left.
4. Positioned widget is used for precise placement.
5. Can be used for profile images with badges.
6. Supports layering of multiple widgets.
7. Useful for creating complex UI effects.
8. Works well for adding floating buttons or labels.
9. Allows combining images, text, and icons in one layout.
10. Can be combined with Align for custom positioning.
Advantages
• Flexible for creative UI designs.
• Easy to overlay widgets without complex code.
• Supports precise positioning of elements.
• Great for animations and effects.
• Works well for decorative layouts.
Disadvantages
• Can cause layout overflow if not sized properly.
• Harder to maintain responsive design.
• Overlapping elements may reduce accessibility.
• May cause performance issues with complex stacks.
• Requires careful alignment for clean layouts.
b) Implement TabBar in Flutter
10 Key Points
1. TabBar provides horizontal navigation between views.
2. Requires a TabController for managing state.
3. Works with TabBarView to display content.
4. Tabs can contain text, icons, or both.
5. Supports swipe gestures between tabs.
6. Can be customized with styles and colors.
7. Useful for organizing related content in categories.
8. Can be placed inside an AppBar for better UI.
9. Integrates with DefaultTabController for quick setup.
10. Supports both fixed and scrollable tab layouts.
Advantages
• Improves navigation for multi-section apps.
• Supports gesture-based navigation.
• Customizable for branding.
• Keeps UI clean by grouping related content.
• Easy to implement with DefaultTabController.
Disadvantages
• Limited space for too many tabs.
• Requires additional code for complex tab behaviors.
• Can confuse users if content is unrelated.
• Poor accessibility if tabs are too small.
• Performance issues if each tab loads heavy content.
Experiment 9
a) Implement Drawer in Flutter
10 Key Points
1. Drawer provides a hidden side navigation menu.
2. Typically slides in from the left side of the screen.
3. Activated using the menu icon in the AppBar.
4. Can contain ListTile widgets for navigation.
5. Can include user profile info and settings.
6. Supports both static and dynamic menu items.
7. Often used in apps with multiple sections.
8. Easy to implement with Scaffold.drawer.
9. Can be styled with custom colors and shapes.
10. Can also have a right-side drawer (endDrawer).
Advantages
• Saves screen space.
• Organizes app navigation neatly.
• Can display user details and quick actions.
• Supports customization and branding.
• Works well for complex apps.
Disadvantages
• Not always obvious to first-time users.
• Requires extra taps to access menu items.
• Can be less efficient for simple apps.
• Overuse can hide important features.
• Slower than bottom navigation for quick switching.
b) Implement BottomNavigationBar in Flutter
10 Key Points
1. Displays navigation icons at the bottom of the screen.
2. Supports switching between multiple app sections.
3. Can be fixed or shifting style.
4. Supports icons, labels, or both.
5. Works with BottomNavigationBarItem.
6. Easily integrates with Scaffold.bottomNavigationBar.
7. Improves quick access to main app features.
8. Can be styled with custom colors and shapes.
9. Supports tap events for navigation.
10. Works well for mobile-first designs.
Advantages
• Always visible for quick navigation.
• Easy for users to understand.
• Great for apps with 3–5 main sections.
• Supports simple state management.
• Can be themed to match branding.
Disadvantages
• Limited space for items.
• Can clutter small screens.
• Not suitable for apps with many sections.
• Less flexible than drawers for submenus.
• Fixed position may block content in some designs.
Experiment 10
a) Implement Form Validation in Flutter
10 Key Points
1. Forms are used to collect user input like text, email, password.
2. Flutter provides Form and TextFormField widgets.
3. Validation logic is added using validator property.
4. GlobalKey<FormState> is used to control the form state.
5. Validation runs when FormState.validate() is called.
6. Can check for empty fields, patterns, or specific formats.
7. Supports real-time validation on each keystroke.
8. Helps improve data accuracy and user experience.
9. Error messages guide users to correct mistakes.
10. Supports custom validation logic for business rules.
Advantages
• Ensures correct and clean data.
• Prevents submission of invalid input.
• Improves app reliability and security.
• Guides users with clear error messages.
• Easy to maintain and extend validation rules.
Disadvantages
• Adds extra coding steps.
• Can slow down user flow if too strict.
• Poorly designed validation frustrates users.
• Requires careful handling of complex logic.
• Over-validation can block legitimate entries.
b) Implement Date Picker in Flutter
10 Key Points
1. Used for selecting a date from a calendar UI.
2. Flutter provides showDatePicker() function.
3. Can set minimum and maximum selectable dates.
4. Returns a Future<DateTime?> after selection.
5. Supports customization of colors and themes.
6. Works well for forms requiring date input.
7. Can restrict selection to past or future dates.
8. Integrates easily with TextFormField or buttons.
9. Can be combined with time picker for full scheduling.
10. Improves user convenience compared to manual entry.
Advantages
• Saves time for date input.
• Reduces user errors in typing dates.
• Improves form usability.
• Can prevent selection of invalid dates.
• Works across platforms consistently.
Disadvantages
• Takes extra screen space when open.
• May be hard to use on small screens.
• Limited customization of default picker UI.
• Requires user familiarity with date picking.
• Not ideal for rapid multiple date selection.
