Unit-1

1. What is the meaning of cross-platform?

Cross-platform refers to the ability to develop software or applications that can operate
across multiple platforms (e.g., Android, iOS, Windows, macOS) using a single codebase.
This approach contrasts with native development, where separate codebases are required for
each platform. Cross-platform frameworks like Flutter or React Native enable developers to
write code once and deploy it on various operating systems, saving time and resources while
maintaining a consistent user experience.

2. Explain the advantages and disadvantages of cross-platform framework:

Advantages:
 Cost-Effective: A single codebase reduces development and maintenance costs
compared to building separate native apps.
 Faster Development: Simultaneous deployment across platforms accelerates the
development cycle.
 Code Reusability: Developers write once and reuse code, minimizing duplication of
effort.
 Broader Audience: Apps can reach users on multiple platforms without additional
investment.
 Consistency: Uniform UI and functionality across platforms due to shared logic.
Disadvantages:
 Performance Trade-offs: Cross-platform apps may not match the speed or
optimization of native apps, especially for graphics-heavy tasks.
 Limited Access to Native Features: Some platform-specific APIs or hardware
capabilities (e.g., advanced camera controls) may require native code integration.
 UI Challenges: Differences in platform design standards (e.g., Material Design vs.
iOS guidelines) can lead to a less native look and feel.
 Dependency on Framework: Bugs or limitations in the framework can delay
development or require workarounds.
 Larger App Size: Inclusion of framework libraries can increase the app’s footprint
compared to lean native apps.

3. Discuss the architecture of Flutter App with diagram:

Flutter’s architecture is designed for performance and flexibility, consisting of three main
layers:
 Framework (Dart): Written in Dart, this layer provides the widget library (e.g.,
Material, Cupertino), rendering logic, and utilities for building UIs. It’s where
developers write app code.
  Engine (C++): The core layer, written in C++, includes the Skia graphics library for
rendering, Dart runtime for executing code, and low-level platform integrations. It
compiles Dart to native machine code for fast execution.
 Embedder: A platform-specific layer (e.g., Java/Kotlin for Android, Swift/Objective-
C for iOS) that bridges Flutter with the host OS, handling inputs, events, and native
integrations.
Diagram:

+---------------------+
| Framework (Dart) | ← Widgets, UI Logic
+---------------------+
| Engine (C++) | ← Skia, Dart Runtime
+---------------------+
| Embedder | ← Platform-Specific (Android/iOS)
+---------------------+

This layered design allows Flutter to bypass traditional native UI frameworks (e.g., UIKit,
Android Views), rendering directly to the screen for consistent, high-performance output.

4. List and explain features of Flutter:

 Hot Reload: Enables real-time code changes visible in the app within seconds,
enhancing developer productivity.
 Rich Widget Library: Provides a vast set of customizable widgets for Material
Design and Cupertino styles, covering layouts, inputs, and animations.
 Single Codebase: Write once in Dart and deploy to Android, iOS, web, and desktop,
reducing development overhead.
 Native Performance: Compiles to native machine code (ARM or x86), avoiding
interpreters for near-native speed.
 Custom Rendering Engine: Uses Skia to draw UI, ensuring consistent visuals across
platforms without relying on OS-specific components.
 Strong Community and Ecosystem: Backed by Google, with growing packages
(e.g., via pub.dev) and documentation.

5. What are the limitations of Flutter:

 Larger App Size: Flutter apps bundle the engine and libraries, resulting in larger file
sizes (e.g., 10-20 MB for basic apps) compared to native counterparts.
 Limited Third-Party Libraries: While growing, Flutter’s ecosystem is less mature
than JavaScript or Java, lacking some specialized packages.
 Learning Curve: Dart is less widely known, requiring developers to learn a new
language and paradigm.
  Platform-Specific Features: Accessing advanced native functionality (e.g., ARKit,
Wear OS) requires writing platform channels, adding complexity.
 Young Ecosystem: As a relatively new framework, Flutter may lack stability or
solutions for niche use cases compared to older tools.

6. List the types of available cross-platform frameworks:

 Flutter: Dart-based, widget-driven, compiles to native code for high performance.
 React Native: Uses JavaScript and React, renders native components via a bridge to
the OS.
 Xamarin: C#-based, integrates with .NET, suitable for enterprise apps with strong
tooling.
 Ionic: HTML, CSS, and JavaScript-based, runs in a WebView, ideal for web
developers but less performant.
 PhoneGap/Cordova: Wraps web apps (HTML/JS) in a native shell, simple but
limited for complex apps.
 Unity: Primarily for games, uses C# and a powerful engine for 2D/3D cross-platform
development.

Unit-2

1. What are Widgets?

Widgets are the core building blocks of a Flutter application’s user interface. They are
immutable Dart classes that describe the configuration and appearance of UI elements (e.g.,
buttons, text, layouts). Flutter follows a declarative approach: developers define what the UI
should look like, and the framework handles rendering and updates. Widgets can be nested to
create complex layouts, forming a widget tree that Flutter renders to the screen.

2. List the types of widgets. Explain any one with suitable example:
 Stateless Widgets: Immutable, no state changes after creation (e.g., Text, Icon).
 Stateful Widgets: Mutable, re-render when state changes (e.g., Checkbox, TextField).
Example (Stateless Widget - Text):
class MyTextWidget extends StatelessWidget {
final String message;
MyTextWidget({required this.message});
@override
Widget build(BuildContext context) {
return Text(
message,
style: TextStyle(fontSize: 20, color: Colors.blue),
);
}
}
// Usage: MyTextWidget(message: 'Hello Flutter')

This widget displays static text and doesn’t change unless rebuilt with a new `message`.

3. Differentiate between stateful widgets and stateless widgets:

 Stateless Widgets:
 Immutable after creation; no internal state to manage.
 Used for static UI elements (e.g., labels, icons).
 Example: `Text('Title')`.
 Lighter and simpler, as they don’t require state management.

 Stateful Widgets:
 Maintain mutable state that can change over time (e.g., user input, counters).
 Rebuilds when `setState()` is called to reflect state changes.
 Example: A counter widget that updates its display.
 More complex, requiring a separate `State` class.
Key Difference: Stateless is for fixed UI; Stateful handles dynamic updates.
4. What are the categories of Flutter widgets?
 Basic Widgets: Core UI elements like `Text`, `Image`, `Icon`.
 Layout Widgets: Arrange other widgets, e.g., `Row`, `Column`, `Stack`, `Container`.
 Input Widgets: Handle user input, e.g., `TextField`, `Checkbox`, `Radio`.
 Navigation Widgets: Manage screen transitions, e.g., `Navigator`, `AppBar`.
 Material Widgets: Follow Material Design (e.g., `ElevatedButton`, `Card`).
 Cupertino Widgets: iOS-style widgets (e.g., `CupertinoButton`,
`CupertinoAlertDialog`).
 Animation Widgets: Add motion, e.g., `AnimatedContainer`, `Hero`.

5. Enlist the commonly used widgets of Flutter. Explain any two with examples:
 Commonly used: `Text`, `Image`, `Container`, `Row`, `Column`, `ElevatedButton`,
`Padding`, `Scaffold`, `AppBar`, `ListView`.
 Text: Displays styled text.
Text(
'Welcome to Flutter',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.green,
),
textAlign: TextAlign.center,
)
 Container: A versatile widget for styling, sizing, and positioning.
Container(
width: 100,
height: 100,
color: Colors.blue,
child: Center(child: Text('Box', style: TextStyle(color: Colors.white))),
margin: EdgeInsets.all(10),
)

6. Explain the use of following widgets:

 Text: Displays a string of text with optional styling (font, color, alignment). Used for
labels, titles, or descriptions.
  Image: Loads and displays images from assets, network, or memory. Supports
resizing and alignment.
 Container: A box-like widget for styling (color, border), sizing, and layout (padding,
margin). Often wraps other widgets.
 ElevatedButton: A Material Design button with elevation, used for actions like
submitting forms or triggering events.
 Padding: Adds space around a widget, improving layout readability and spacing.

7. Write a code to demonstrate creation of image and text widgets:

import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Image & Text Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Flutter Logo',
style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
),
SizedBox(height: 20),
Image.network(
'https://flutter.dev/images/flutter-logo-sharing.png',
width: 150,
height: 150,
),
],
 ),
),
),
);
}
}

8. Explain Row and Column widgets with suitable examples:

 Row: Arranges children horizontally in a single row.
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.star, size: 50),
Text('Star Rating', style: TextStyle(fontSize: 20)),
Icon(Icons.star_border, size: 50),
],
)
 Column: Arranges children vertically in a single column.

Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Top', style: TextStyle(fontSize: 20)),
SizedBox(height: 10),
Text('Middle', style: TextStyle(fontSize: 20)),
SizedBox(height: 10),
Text('Bottom', style: TextStyle(fontSize: 20)),
],
)

Both support alignment (`mainAxisAlignment`, `crossAxisAlignment`) and spacing.

9. How responsive UI can be achieved in Flutter?
Responsive UI adapts to different screen sizes and orientations. In Flutter:
 MediaQuery: Access device dimensions (`MediaQuery.of(context).size.width`) to scale
widgets.
 Flexible/Expanded: Distribute available space in `Row` or `Column` dynamically.
 LayoutBuilder: Provides parent constraints to adjust UI based on available space.
 Fractions: Use fractions of screen size (e.g., `width: MediaQuery.of(context).size.width
0.5`).
 Packages: Tools like `flutter_screenutil` simplify responsive sizing.
Example: A button that takes 80% of screen width:
Container(
width: MediaQuery.of(context).size.width 0.8,
child: ElevatedButton(child: Text('Responsive'), onPressed: () {}),
)

10. Create a simple UI design to demonstrate the Row and Column widgets:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Row & Column Demo')),
body: Padding(
padding: EdgeInsets.all(16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Name: Alice', style: TextStyle(fontSize: 18)),
Text('Age: 30', style: TextStyle(fontSize: 18)),
 ],
),
Icon(Icons.person, size: 50, color: Colors.blue),
],
),
),
),
);
}
}

11. Create a simple UI design to demonstrate the concept of responsive UI:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Responsive UI Demo')),
body: Center(
child: Container(
width: MediaQuery.of(context).size.width 0.9,
height: MediaQuery.of(context).size.height 0.4,
color: Colors.blue[100],
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Responsive Box', style: TextStyle(fontSize: 24)),
SizedBox(height: 20),
ElevatedButton(
 onPressed: () {},
child: Text('Click Me'),
),
],
),
),
),
),
);
}
}

12. Create a simple UI design to demonstrate the use of ElevatedButton and Container
Widgets:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Button & Container Demo')),
body: Center(
child: Container(
width: 200,
height: 100,
decoration: BoxDecoration(
color: Colors.green[100],
borderRadius: BorderRadius.circular(10),
),
child: ElevatedButton(
onPressed: () {
 print('Button Pressed!');
},
child: Text('Press Me', style: TextStyle(fontSize: 20)),
style: ElevatedButton.styleFrom(primary: Colors.green),
),
),
),
),
);
}
}

Unit-3

1. What is navigation? How navigation can be achieved in Flutter?

Navigation is the process of moving between screens or pages in an app. In Flutter, it’s
managed using the `Navigator` class, which maintains a stack of routes (screens):
 Push: Adds a new screen to the stack (`Navigator.push()`).
 Pop: Removes the top screen (`Navigator.pop()`).
 Named Routes: Define routes in `MaterialApp` and navigate with
`Navigator.pushNamed()`.
Example: `Navigator.push(context, MaterialPageRoute(builder: (_) => SecondScreen()))`.

2. List and explain the types of navigation with suitable example:

 Push: Adds a new screen to the stack.
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
 Pop: Removes the current screen, returning to the previous one.
Navigator.pop(context);
 Replace: Replaces the current screen with a new one, without stacking.
 Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NewScreen()),
);
 Push Named: Uses predefined route names for navigation.
Navigator.pushNamed(context, '/second');

3. Write a code for following:

i. Push a new screen
ii. Pop the current screen
iii. Replace the current screen

 Push a new screen:

ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: Text('Go to Second Screen'),
)

 Pop the current screen:

ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go Back'),
)
  Replace the current screen:
ElevatedButton(
onPressed: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NewScreen()),
);
},
child: Text('Replace Screen'),
)

4. How data can be passed from one screen to another? Explain with suitable example:
Data is typically passed via constructor parameters when pushing a new screen.
Example:
// First Screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => SecondScreen(data: 'Hello from First!'),
),
);
},
child: Text('Pass Data'),
),
 ),
);
}
}
// Second Screen
class SecondScreen extends StatelessWidget {
final String data;
SecondScreen({required this.data});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(child: Text(data, style: TextStyle(fontSize: 20))),
);
}
}

5. What are routes? How are Routes managed in Flutter?

Routes are mappings between screen identifiers (e.g., '/home') and their corresponding
widgets. In Flutter, routes are managed in `MaterialApp`:
 Static Routes: Defined in `routes` property.
MaterialApp(
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
},
)
 Dynamic Routes: Use `onGenerateRoute` for runtime route generation.
Navigate using `Navigator.pushNamed(context, '/second')`. This approach simplifies
navigation in large apps.

6. What is state? Explain different types of states:

State is data that influences the UI and can change over time. Flutter has two main types:
  Ephemeral State (Local State): Managed within a single widget, typically using
`setState()`. Example: A counter in a button widget.
 App State (Global State): Shared across multiple widgets or screens, such as user
authentication status or theme settings. Managed with tools like Provider, Riverpod, or
Bloc.
Difference: Ephemeral is widget-specific and short-lived; App State persists and affects the
entire app.

7. Explain states with a suitable diagram:

Diagram:

App State (Global)

├─── Screen 1
│ └── Ephemeral State (e.g., Counter)
├─── Screen 2
│ └── Ephemeral State (e.g., Form Input)
└─── Shared Data (e.g., User Login)
- App State: Top-level, managed globally (e.g., via Provider).
- Ephemeral State: Local to individual widgets, updated with `setState()`. The diagram
shows how state flows from global to local levels.

8. How states can be set in Flutter?

- Ephemeral State: Use `setState()` in a `StatefulWidget` to trigger a rebuild:

setState(() {
counter++;
});

 App State: Use state management solutions:

 Provider: Share data across widgets.
 Bloc: Stream-based state management.
 Riverpod: Enhanced Provider with better scoping.
Example with `setState`: Increment a counter when a button is pressed.
9. Write a code to perform increment and decrement operation onclick event by using
state management in Flutter:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: CounterScreen());
}
}
class CounterScreen extends StatefulWidget {
@override
_CounterScreenState createState() => _CounterScreenState();
}
class _CounterScreenState extends State<CounterScreen> {
int counter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter Demo')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Counter: $counter', style: TextStyle(fontSize: 30)),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
 counter++;
});
},
child: Text('Increment'),
),
SizedBox(width: 20),
ElevatedButton(
onPressed: () {
setState(() {
counter--;
});
},
child: Text('Decrement'),
),
],
),
],
),
),
);
}
}

10. Write a code to demonstrate the routes in Flutter:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
initialRoute: '/',
 routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: Text('Go to Second Screen'),
),
),
);
}
}
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Screen')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
 },
child: Text('Go Back'),
),
),
);
}
}