Manual-UI Design Flutter

1. a) Install Flutter and Dart SDK.
Step 1: Download Flutter SDK
1. Visit the Flutter website:

Go to the official Flutter website.
2. Download Flutter SDK:
o Click Get Started and choose your operating system (Windows, macOS, Linux, or ChromeOS).
o Download the latest stable release for your OS.
Step 2: Install Flutter SDK
For Windows:
1. Extract the SDK:
o Extract the downloaded .zip file to a desired location (e.g., C:\src\flutter).
o Avoid installing Flutter in directories like C:\Program Files to avoid permission issues.
2. Set Environment Variable:
o Go to Control Panel > System > Advanced System Settings > Environment Variables.
o Under System variables, find Path and click Edit.
o Add the path to the bin directory of the extracted Flutter folder (e.g., C:\src\flutter\bin).
For macOS:
1. Extract the SDK:
o Extract the downloaded .zip file and move it to a suitable directory (e.g., ~/flutter).
2. Set Path:
o Open your terminal and run:
o export PATH="$PATH:`pwd`/flutter/bin"
o To make this change permanent, add the above line to your shell configuration file (.zshrc or
.bash_profile).
For Linux:
1. Extract the SDK:
o Extract the .tar.xz file to a directory (e.g., /home/<your-username>/flutter).
2. Set Path:
o Add Flutter to your system PATH by modifying the shell configuration file:
o export PATH="$PATH:/home/<your-username>/flutter/bin"
o Save and reload the file using:
o source ~/.bashrc
Step 3: Install Dart SDK
The Dart SDK comes bundled with Flutter, so you don't need to install it separately. To verify:
1. Open a terminal or command prompt.
2. Run the following command:
3. dart --version
If Dart is installed correctly, it will display the Dart version.
Step 4: Verify Installation
1. Open a terminal or command prompt.
2. Run the following command:
3. flutter doctor
This command checks your environment and displays any missing dependencies.
Step 5: Install Additional Tools
Editor Plugins
• Visual Studio Code:

Install the Flutter and Dart plugins from the Extensions marketplace.
• Android Studio:
Install the Flutter plugin via Preferences > Plugins.
Device Tools
• Install Android SDK via Android Studio if you plan to develop for Android.
• Enable Developer Options and USB Debugging on your Android device.
Step 6: Test Flutter Installation
1. Create a new Flutter project:
2. flutter create my_app
3. Navigate to the project directory:
4. cd my_app
5. Run the app:
6. flutter run
You can now start building Flutter apps!

b) Write a simple Dart program to understand the language basics.
Here are additional details and examples to expand on Dart basics:
9. Nullable Types
In Dart, variables can hold null if explicitly declared as nullable using ?.
void main() {
int? age; // Nullable integer
print(age); // Output: null
age = 25;
print(age); // Output: 25
10. Null Safety and Default Values
Use the ?? operator to provide a default value when a variable is null.
void main() {
int? value;
int result = value ?? 10; // Use 10 if value is null
print(result); // Output: 10
11. Switch Statement
void main() {
int day = 3;
switch (day) {
case 1:
print('Monday');
break;
case 2:
print('Tuesday');
break;
case 3:
print('Wednesday');
break;
default:
print('Invalid day');
Explanation:
• A switch statement is used for multi-way branching.
• Always use break to exit the case block.
12. Lambda Functions (Arrow Functions)
void main() {
int multiply(int a, int b) => a * b;
print(multiply(5, 4)); // Output: 20
Explanation:
• Functions with a single expression can use => instead of {}.
13. Set Example
void main() {
Set<String> colors = {'Red', 'Green', 'Blue'};
colors.add('Yellow');
print(colors); // Output: {Red, Green, Blue, Yellow}
colors.add('Red'); // Duplicates are ignored
print(colors); // Output: {Red, Green, Blue, Yellow}
Explanation:
• A Set is an unordered collection of unique items.
14. Exception Handling
void main() {
try {
int result = 12 ~/ 0; // Integer division by zero
print(result);
} catch (e) {
print('Error: $e');
} finally {
print('Execution complete.');
Explanation:
• Use try-catch blocks to handle exceptions.
• The finally block always executes.
15. Async and Await
Dart supports asynchronous programming with Future.
Future<String> fetchData() async {
return Future.delayed(Duration(seconds: 2), () => 'Data loaded');
void main() async {
print('Loading...');
String data = await fetchData();
print(data); // Output after 2 seconds: Data loaded
Explanation:
• Use async to define asynchronous functions and await to wait for a Future.
16. Higher-Order Functions
Functions can be passed as arguments to other functions.
void main() {
void printMessage(String message) => print(message);
void performAction(String msg, Function action) {
action(msg);
performAction('Hello, Dart!', printMessage); // Output: Hello, Dart!
17. Generators (Synchronous and Asynchronous)

Synchronous Generator
Iterable<int> generateNumbers(int n) sync* {
for (int i = 1; i <= n; i++) {
yield i; // Pause and return each value
void main() {
for (int num in generateNumbers(5)) {
print(num);
Asynchronous Generator
Stream<int> asyncNumbers(int n) async* {
for (int i = 1; i <= n; i++) {
await Future.delayed(Duration(seconds: 1));
yield i;
void main() async {
await for (int num in asyncNumbers(5)) {
print(num);
}
3. a) Explore various Flutter widgets (Text, Image, Container, etc.).
Flutter offers a wide range of widgets that are the building blocks for creating stunning and responsive UIs. Below is
an overview of some commonly used Flutter widgets with their purposes:
1. Text
Purpose: To display a string of text.
Common Properties:
data: The string to display.
style: Text styling like font size, color, weight, etc.
textAlign: Aligns text within its parent widget.
Example:
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, color: Colors.blue),
textAlign: TextAlign.center,
Image
Purpose: To display images from assets, network, or memory.
Common Constructors:
Image.asset: For local images.
Image.network: For images from a URL.
Image.memory: For images stored in memory.
Example:
Image.asset('assets/images/flutter_logo.png', width: 100, height: 100);
Image.network('https://flutter.dev/images/flutter-logo-sharing.png');
Container
Purpose: A versatile widget for decorating, positioning, and sizing elements.
Common Properties:
color: Background color.
margin: Outer spacing.
padding: Inner spacing.
decoration: For advanced styling like gradients and borders.
Example:
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(10),
),
child: Text('Hello, Container!'),
Row
Purpose: Arranges widgets horizontally.
Common Properties:
mainAxisAlignment: Aligns children along the main axis.
crossAxisAlignment: Aligns children along the cross axis.
Example:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.home),
Icon(Icons.star),
Icon(Icons.settings),
],
Column
Purpose: Arranges widgets vertically.
Common Properties: Same as Row.
Example:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Line 1'),
Text('Line 2'),
Text('Line 3'),
],
)
Scaffold
Purpose: Provides a framework for implementing the basic material design visual layout.
Common Properties:
appBar: Adds a header bar.
body: Main content.
floatingActionButton: Floating action button for quick actions.
Example:
Scaffold(
appBar: AppBar(title: Text('Scaffold Example')),
body: Center(child: Text('Hello, Scaffold!')),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
ListView
Purpose: Scrollable list of widgets.
Common Constructors:
ListView.builder: For dynamic lists.
ListView.separated: For lists with separators.
Example:
ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return ListTile(title: Text('Item $index'));
},
Stack
Purpose: Places widgets on top of each other.
Common Properties:
alignment: Aligns children within the stack.
Example:
Stack(
children: [
Container(width: 100, height: 100, color: Colors.red),
Positioned(
top: 10,
left: 10,
child: Container(width: 50, height: 50, color: Colors.blue),
),
],
GestureDetector
Purpose: Detects user gestures like taps, swipes, etc.
Example:
GestureDetector(
onTap: () => print('Tapped!'),
child: Container(
color: Colors.green,
width: 100,
height: 100,
),
Form and TextFormField
Purpose: For creating forms and handling user input.
Example:
Form(
child: Column(
children: [
TextFormField(decoration: InputDecoration(labelText: 'Name')),
TextFormField(decoration: InputDecoration(labelText: 'Email')),
],
),
These widgets provide the foundation to build complex layouts and functionalities in Flutter. Each widget is highly
customizable and can be combined creatively for unique designs!
b) Implement different layout structures using Row, Column, and Stack widgets.
In Flutter, the Row, Column, and Stack widgets are essential layout structures for arranging child widgets in various ways.
Here’s how you can implement and use them:
1. Row Widget
The Row widget arranges its children horizontally.
import 'package:flutter/material.dart';
void main() {
runApp(RowExample());
class RowExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Row Example')),
body: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Container(color: Colors.red, width: 50, height: 50),
Container(color: Colors.green, width: 50, height: 50),
Container(color: Colors.blue, width: 50, height: 50),
],
),
),
);
2. Column Widget
The Column widget arranges its children vertically.
void main() {
runApp(ColumnExample());
}
class ColumnExample extends StatelessWidget {
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Column Example')),
body: Column(
children: [
],
),
),
);
3. Stack Widget
The Stack widget overlays its children on top of each other.
void main() {
runApp(StackExample());
class StackExample extends StatelessWidget {
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Stack Example')),
body: Stack(
alignment: Alignment.center,
children: [
],
),
),
);
Key Properties and Customizations:
Row & Column:
• mainAxisAlignment: Align children along the main axis.
• crossAxisAlignment: Align children along the cross axis.
• mainAxisSize: Determines how much space the widget takes along the main axis.
Stack:
• alignment: Aligns children within the Stack.
• fit: Determines how the non-positioned children are sized.
Combining Layouts
You can also combine these widgets for more complex layouts:
void main() {
runApp(CombinedExample());
class CombinedExample extends StatelessWidget {
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Combined Layout Example')),
body: Column(
children: [
Row(
children: [
],
),
Stack(
alignment: Alignment.center,
children: [
Container(color: Colors.yellow, width: 100, height: 100),
],
),
],
),
),
);
Experiment with different properties to achieve the desired layout!
4. a) Design a responsive UI that adapts to different screen sizes.
Designing a responsive UI in Flutter involves using widgets and layout techniques that adapt to various screen
sizes. Below is a basic structure to build a responsive UI:
Code Example: Flutter Responsive UI

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {

@override
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ResponsiveLayout(),
);
}
}
class ResponsiveLayout extends StatelessWidget {

@override
// Get the screen size
final screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text('Responsive UI Example'),
),
body: screenWidth < 600
? MobileLayout() // Layout for smaller screens
: TabletDesktopLayout(), // Layout for larger screens
);
}
}
class MobileLayout extends StatelessWidget {

@override
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.phone_android, size: 100, color: Colors.blue),
SizedBox(height: 20),
Text(
'Mobile Layout',
style: TextStyle(fontSize: 24),
),
],
),
);
}
}
class TabletDesktopLayout extends StatelessWidget {

@override
return Row(
children: [
Expanded(
child: Container(
color: Colors.blue[100],
child: Center(
child: Text(
'Left Panel',
),
),
),
),
Expanded(
child: Container(
color: Colors.blue[300],
child: Center(
child: Text(
'Right Panel',
),
),
),
),
],
);
}
}
Key Features of the Code

1. MediaQuery: Retrieves screen size to determine the layout to display.
2. Responsive Layouts: Defines different UI widgets (MobileLayout and TabletDesktopLayout) for various screen
sizes.
3. Adaptive Widgets: Uses Expanded and SizedBox for flexible layouts.
4. Scaffold: Standard structure for consistency across screens.
Techniques for Advanced Responsiveness

1. LayoutBuilder: Adapts layout based on constraints provided by the parent widget.
2. Flexible: Provides proportionate distribution of space.
3. FittedBox or Wrap: Adjusts child widgets to fit into the available space.
4. Packages:
o Use the flutter_screenutil or responsive_builder package for scalable UI design.
o These help calculate dimensions based on a reference screen size.
Would you like me to include styling or additional layouts for specific screen breakpoints?
b) Implement media queries and breakpoints for responsiveness.
In Flutter, responsiveness is achieved by using MediaQuery and other layout strategies that adapt the UI to different
screen sizes and orientations. Here's a guide on implementing media queries and breakpoints for responsive design in
Flutter:
1. Using MediaQuery
The MediaQuery widget provides information about the size and orientation of the screen. You can use it to adjust
layouts based on screen dimensions.
Example: Basic MediaQuery Usage
class ResponsiveScreen extends StatelessWidget {
@override
// Get screen width and height
final screenHeight = MediaQuery.of(context).size.height;
// Check if the device is a tablet (arbitrarily defined as width > 600px)
final isTablet = screenWidth > 600;
return Scaffold(
appBar: AppBar(
title: Text('Responsive UI'),
),
body: Center(
child: Container(
width: isTablet ? 400 : 200,
height: isTablet ? 400 : 200,
color: isTablet ? Colors.blue : Colors.green,
child: Center(
child: Text(
isTablet ? 'Tablet View' : 'Mobile View',
style: TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
2. Using Breakpoints
Breakpoints are defined ranges for screen sizes that determine layout changes.
Example: Implementing Breakpoints
class ResponsiveLayout extends StatelessWidget {
@override
if (screenWidth < 600) {
return MobileLayout();
} else if (screenWidth < 1200) {
return TabletLayout();
} else {
return DesktopLayout();
class MobileLayout extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(title: Text('Mobile View')),
body: Center(child: Text('This is a mobile layout')),
);
class TabletLayout extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(title: Text('Tablet View')),
body: Center(child: Text('This is a tablet layout')),
);
class DesktopLayout extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(title: Text('Desktop View')),
body: Center(child: Text('This is a desktop layout')),
);
3. Using LayoutBuilder
The LayoutBuilder widget provides constraints to help determine how to layout children based on available space.
Example: LayoutBuilder for Breakpoints
class ResponsiveLayoutBuilder extends StatelessWidget {
@override
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 600) {
} else if (constraints.maxWidth < 1200) {
} else {
}
},
),
);
4. Using Third-Party Packages
For more advanced responsiveness, you can use packages like:
• flutter_screenutil
• dependencies:
• flutter_screenutil: ^5.5.0
Usage:
import 'package:flutter_screenutil/flutter_screenutil.dart';
class ResponsiveUI extends StatelessWidget {
@override
ScreenUtil.init(context, designSize: Size(360, 690));
return Scaffold(
body: Container(
width: 100.w, // 100 logical pixels adjusted for screen size
height: 50.h,
color: Colors.blue,
),
);
• responsive_builder
• dependencies:
• responsive_builder: ^0.4.0
Usage:
import 'package:responsive_builder/responsive_builder.dart';
class ResponsiveUI extends StatelessWidget {
@override

return ResponsiveBuilder(
builder: (context, sizingInformation) {
if (sizingInformation.isDesktop) {
} else if (sizingInformation.isTablet) {
} else {
},
);
Best Practices:
1. Design for All Devices: Always test on multiple screen sizes and orientations.
2. Use Proportional Sizing: Avoid fixed pixel values; use percentages or adaptive widgets.
3. Leverage Flex Widgets: Use Expanded and Flexible for adaptable layouts.
4. Theme Consistency: Ensure your theme works well across different layouts.
With these strategies, you can create responsive and adaptive UIs in Flutter!
5. a) Set up navigation between different screens using Navigator.
In Flutter, you can use the Navigator widget to handle navigation between different screens. Below is a
step-by-step guide to setting up navigation:
1. Basic Navigation Using Navigator.push
Use the push method to navigate to a new screen and add it to the stack.
Example:
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
title: 'Navigation Demo',
home: FirstScreen(),
);
}
}
class FirstScreen extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(title: Text('First Screen')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: Text('Go to Second Screen'),
),
),
);
}
}
class SecondScreen extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(title: Text('Second Screen')),
body: Center(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back to First Screen'),
),
),
);
}
}
2. Named Routes
Named routes allow cleaner and more scalable navigation for larger applications.
Define Routes in MaterialApp:
void main() {
runApp(MyApp());
}

@override
return MaterialApp(
title: 'Named Routes Demo',
initialRoute: '/',
routes: {
'/': (context) => FirstScreen(),
'/second': (context) => SecondScreen(),
},
);
}
}
class FirstScreen extends StatelessWidget {

@override
return Scaffold(
appBar: AppBar(title: Text('First Screen')),
body: Center(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}

@override
return Scaffold(
body: Center(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back to First Screen'),
),
),
);
}
}
3. Pass Data Between Screens
You can pass data to the next screen using the constructor or arguments.
Using Constructor:
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SecondScreen(data: 'Hello from First Screen'),
),
);
Accessing Data:

final String data;
SecondScreen({required this.data});
@override
return Scaffold(
body: Center(child: Text(data)),
);
}
}
Using Arguments with Named Routes:
Navigator.pushNamed(
context,
'/second',
arguments: 'Hello from First Screen',
);
Access arguments in the target screen:

@override
final String data = ModalRoute.of(context)!.settings.arguments as String;
return Scaffold(
body: Center(child: Text(data)),
);
}
}
4. Pop to a Specific Screen
Use Navigator.popUntil to navigate back to a specific route.
Example:
Navigator.popUntil(context, ModalRoute.withName('/'));
5. Replace Current Screen
Use Navigator.pushReplacement to replace the current screen.
Example:
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (context) => NewScreen()),
);
This should cover the basics of navigation in Flutter. Let me know if you need advanced navigation
techniques like nested navigators or PageView integration!
b) Implement navigation with named routes.
Implementing navigation with named routes in Flutter involves defining routes in the MaterialApp widget and using the
Navigator widget to navigate between them. Here's a step-by-step guide:
1. Define Named Routes
Define the routes in the MaterialApp widget using the routes property. Each route is a key-value pair where the key is the
route name, and the value is the widget to display.
void main() {
runApp(MyApp());
@override
return MaterialApp(
title: 'Named Routes Example',
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/second': (context) => SecondScreen(),
'/third': (context) => ThirdScreen(),
},
);
class HomeScreen extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(title: Text('Home Screen')),
body: Center(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
),
),
);
@override
return Scaffold(
body: Center(
onPressed: () {
Navigator.pushNamed(context, '/third');
},
child: Text('Go to Third Screen'),
),
),
);
class ThirdScreen extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(title: Text('Third Screen')),
body: Center(
onPressed: () {
Navigator.popUntil(context, ModalRoute.withName('/'));
},
child: Text('Back to Home'),
),
),
);
2. Key Concepts
1. initialRoute: Specifies the default route to be shown when the app starts. In this example, it's set to '/'.
2. Navigator.pushNamed: Navigates to a route using its name.
3. Navigator.pop: Returns to the previous screen in the stack.
4. Navigator.popUntil: Pops the screens until a specific route is reached. This is useful for navigating back to the
home screen or another specific route.
3. Running the Application
• Home Screen:
o A button navigates to the Second Screen.
• Second Screen:
o A button navigates to the Third Screen.
• Third Screen:
o A button returns to the Home Screen using Navigator.popUntil.
Advantages of Named Routes
1. Cleaner code for large apps.
2. Easier to manage navigation between many screens.
3. Centralized route definitions for better maintainability.

5. a) Learn about stateful and stateless widgets.
In Flutter, widgets are the building blocks of an application's user interface. They come in two main types: Stateful
Widgets and Stateless Widgets. Understanding their differences is essential for building interactive and dynamic Flutter
applications.
1. Stateless Widgets
• Definition: A widget that does not require any mutable state.
• Usage: Used for UI elements that do not change over time or in response to user interactions.
• Lifecycle: Stateless widgets are immutable and rebuilt entirely whenever their parent widget is rebuilt.
• Example: Text, Icon, and other widgets that do not store data or depend on user interaction.
Code Example
class MyStatelessWidget extends StatelessWidget {
@override
return Center(
child: Text('I am a Stateless Widget'),
);
• Key Points:
o Cannot hold or update internal state.
o Rebuilding occurs due to changes in the external parameters or parent widget tree.
2. Stateful Widgets
• Definition: A widget that has a mutable state and can change its appearance in response to user interactions or
other events.
• Usage: Used when the widget's content needs to dynamically update based on user input, animations, or data
changes.
• Lifecycle:
o createState(): Called once when the widget is first inserted into the widget tree.
o initState(): Called once when the state is created.
o build(): Called whenever the widget needs to be redrawn.
o setState(): Used to update the state and trigger a UI rebuild.
o dispose(): Called when the widget is removed from the widget tree.
Code Example
class MyStatefulWidget extends StatefulWidget {
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
@override
return Column(
children: [
Text('Counter: $_counter'),
ElevatedButton(
onPressed: _incrementCounter,
child: Text('Increment'),
),
],
);
• Key Points:
o Maintains internal state using a State class.
o State is preserved across rebuilds, making it ideal for dynamic UI elements.
Differences Between Stateless and Stateful Widgets
Feature Stateless Widget Stateful Widget
State Immutable (cannot change over time). Mutable (can change over time).
Feature Stateless Widget Stateful Widget
Rebuilds Rebuilds only when external parameters change. Rebuilds when setState() is called.
Use Cases Static UI, display-only elements. Dynamic UI, interactive elements.
Examples Text, Icon, Container. Forms, Animations, Buttons with actions.
When to Use Which?
• Use Stateless Widgets when:
o The UI is static and doesn't need to update dynamically.
o Data comes solely from external parameters.
• Use Stateful Widgets when:
o The widget needs to update dynamically based on user interaction or other changes.
Understanding this distinction helps in optimizing your Flutter application for performance and maintainability.
b) Implement state management using set State and Provider.
In Flutter, state management can be implemented using both setState() and the Provider package. Below are examples
showing how to implement state management using each approach:
1. State Management Using setState()
This is a simple state management method where the state of a widget is managed locally using the setState() method.
Example:
void main() {
runApp(MyApp());
@override
return MaterialApp(
home: CounterScreen(),
);
class CounterScreen extends StatefulWidget {
@override
_CounterScreenState createState() => _CounterScreenState();

}
class _CounterScreenState extends State<CounterScreen> {
int _counter = 0;
setState(() {
_counter++;
});
@override
return Scaffold(
appBar: AppBar(
title: Text('State Management with setState'),
),
body: Center(
child: Column(
children: <Widget>[
Text('Counter: $_counter'),
ElevatedButton(
child: Text('Increment Counter'),
),
],
),
),
);
Explanation:
• setState() is used to update the state (in this case, the _counter variable) and trigger a re-render of the widget.
2. State Management Using Provider
The Provider package is more advanced and allows managing state in a more scalable way. It is especially useful for
managing state across multiple widgets and screens.
Step 1: Add provider package to pubspec.yaml

dependencies:
flutter:
sdk: flutter
provider: ^6.1.3
Step 2: Implement State Management Using Provider
import 'package:provider/provider.dart';
// Define a ChangeNotifier class to manage state
class Counter with ChangeNotifier {
int _counter = 0;
int get counter => _counter;
void incrementCounter() {
_counter++;
notifyListeners(); // Notify listeners when the state changes
void main() {
runApp(
ChangeNotifierProvider(
create: (context) => Counter(),
child: MyApp(),
),
);
@override
return MaterialApp(
home: CounterScreen(),
);
}
class CounterScreen extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(
title: Text('State Management with Provider'),
),
body: Center(
child: Consumer<Counter>(
builder: (context, counter, child) {
return Column(
children: <Widget>[
Text('Counter: ${counter.counter}'),
ElevatedButton(
onPressed: () {
counter.incrementCounter();
},
child: Text('Increment Counter'),
),
],
);
},
),
),
);
Explanation:
• ChangeNotifier is used to create a class (Counter) that holds the state.
• ChangeNotifierProvider is used at the root of the widget tree to provide access to the Counter state.
• Consumer<Counter> is used to listen for changes in the Counter state and rebuild the widget when
notifyListeners() is called.
• The incrementCounter method updates the state and triggers a UI update by notifying the listeners.
Comparison:
• setState(): Best for small, localized state management within a widget. It's simple and effective for managing
state in a single widget.
• Provider: Best for more complex or shared state management, especially when you need to manage state across
multiple widgets or pages.
5. a) Create custom widgets for specific UI elements.
Creating custom widgets in Flutter allows you to encapsulate UI elements and reuse them across your
application. Below is an example of how to create custom widgets for specific UI elements, such as a
custom button, card, and text input field.
1. Custom Button Widget:

class CustomButton extends StatelessWidget {

final String text;
final VoidCallback onPressed;
final Color color;
CustomButton({
required this.text,
required this.onPressed,
this.color = Colors.blue, // Default color
});
@override
return ElevatedButton(
onPressed: onPressed,
style: ElevatedButton.styleFrom(primary: color),
child: Text(
text,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
);
}
}
Usage:
CustomButton(
text: "Click Me",
onPressed: () {
print("Button pressed");
},
),
2. Custom Card Widget:

class CustomCard extends StatelessWidget {
final String title;
final String description;
final IconData icon;
CustomCard({
required this.title,
required this.description,
required this.icon,
});
@override
return Card(
margin: EdgeInsets.all(10),
elevation: 5,
child: Padding(
padding: EdgeInsets.all(16),
child: Row(
children: [
Icon(icon, size: 40, color: Colors.blue),
SizedBox(width: 16),
Column(
children: [
Text(title, style: TextStyle(fontSize: 18, fontWeight:
FontWeight.bold)),
Text(description),
],
),
],
),
),
);
}
}
Usage:
CustomCard(
title: "Card Title",
description: "This is a description of the card.",
icon: Icons.info,
),
3. Custom Text Field Widget:

class CustomTextField extends StatelessWidget {
final TextEditingController controller;
final String labelText;
final bool obscureText;
CustomTextField({
required this.controller,
required this.labelText,
this.obscureText = false,
});
@override
return TextField(
controller: controller,
obscureText: obscureText,
decoration: InputDecoration(
labelText: labelText,
border: OutlineInputBorder(),
contentPadding: EdgeInsets.symmetric(vertical: 10, horizontal: 16),
),
);
}
}
Usage:
CustomTextField(
controller: TextEditingController(),
labelText: "Enter your name",
),
4. Custom Icon Button Widget:

class CustomIconButton extends StatelessWidget {
final Color color;
CustomIconButton({
required this.icon,
required this.onPressed,
this.color = Colors.blue,
});
@override
return IconButton(
icon: Icon(icon, color: color),
);
}
}
Usage:
CustomIconButton(
icon: Icons.favorite,
onPressed: () {
print("Icon Button pressed");
},
),
5. Custom Switch Widget:

class CustomSwitch extends StatelessWidget {
final bool value;
final ValueChanged<bool> onChanged;
CustomSwitch({
required this.value,
required this.onChanged,
});
@override
return Switch(
value: value,
onChanged: onChanged,
);
}
}
Usage:
CustomSwitch(
value: true,
onChanged: (value) {
print("Switch value changed: $value");
},
),
6. Custom List Tile Widget:

class CustomListTile extends StatelessWidget {
final String title;
final String subtitle;
CustomListTile({
required this.title,
required this.subtitle,
required this.icon,
});
@override
return ListTile(
leading: Icon(icon),
title: Text(title),
subtitle: Text(subtitle),
onTap: () {
print("ListTile tapped");
},
);
}
}
Usage:
CustomListTile(
title: "List Tile Title",
subtitle: "Subtitle text goes here.",
icon: Icons.list,
),
Conclusion:
These are just a few examples of custom widgets you can create for your Flutter application. Custom
widgets help in improving code reusability, readability, and maintainability, making it easier to build
modular and consistent UIs.
b) Apply styling using themes and custom styles.
In Flutter, styling the app with themes and custom styles is essential for creating a consistent and visually appealing user
interface. You can achieve this by defining a ThemeData object and using it throughout your app. Here’s a guide to apply
styling using themes and custom styles in Flutter:
1. Using Themes in Flutter
Flutter allows you to customize the overall appearance of the app using the Theme widget. The ThemeData class provides
various properties to modify the app’s visual properties.
Example:
void main() {
runApp(MyApp());
@override
return MaterialApp(
title: 'Flutter Theming',
theme: ThemeData(
primarySwatch: Colors.blue, // Primary color for the app
accentColor: Colors.orange, // Accent color for buttons, etc.
textTheme: TextTheme(
bodyText1: TextStyle(color: Colors.black, fontSize: 16), // Body text style
bodyText2: TextStyle(color: Colors.grey, fontSize: 14), // Secondary text style
headline1: TextStyle(color: Colors.blue, fontSize: 32, fontWeight: FontWeight.bold), // Headline style
),
buttonTheme: ButtonThemeData(
buttonColor: Colors.orange, // Button color
textTheme: ButtonTextTheme.primary, // Button text style
),
appBarTheme: AppBarTheme(
color: Colors.blue, // AppBar background color
headline6: TextStyle(color: Colors.white, fontSize: 20), // AppBar title text style
),
),
),
home: MyHomePage(),
);
class MyHomePage extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(
title: Text('Flutter Theming Example'),
),
body: Center(
child: Column(
children: <Widget>[
Text('Hello, Flutter!', style: Theme.of(context).textTheme.headline1),
ElevatedButton(
onPressed: () {},
child: Text('Press Me'),
),
],
),
),
);
}
}
Key Points:
• ThemeData allows you to define properties like primarySwatch, accentColor, textTheme, buttonTheme, and
more.
• You can access the theme using Theme.of(context) to apply consistent styling across widgets.
• TextTheme lets you define different text styles for various text widgets (e.g., bodyText1, headline1).
2. Custom Styles for Widgets
You can apply custom styles directly to individual widgets using the style parameter or other styling properties.
Example (Custom Styles):
void main() {
runApp(MyApp());
@override
return MaterialApp(
title: 'Flutter Custom Styling',
home: MyHomePage(),
);
class MyHomePage extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(
title: Text('Custom Styles Example'),
backgroundColor: Colors.green, // AppBar background color
),
body: Center(
child: Column(
children: <Widget>[
Text(
'Custom Text Style',
style: TextStyle(
color: Colors.purple, // Text color
fontSize: 24, // Text size
fontWeight: FontWeight.bold, // Font weight
fontStyle: FontStyle.italic, // Font style
),
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
primary: Colors.green, // Button background color
onPrimary: Colors.white, // Button text color
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12), // Button padding
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20), // Button border radius
),
),
child: Text('Custom Styled Button'),
),
],
),
),
);
Key Points:
• You can define custom TextStyle directly in the Text widget using the style parameter.
• Custom button styling can be done using ElevatedButton.styleFrom with properties like primary, onPrimary, and
padding.
• The shape property allows you to customize the button’s border radius.
3. Creating a Custom Theme Class
If you want to reuse custom styles across different parts of your app, you can define your custom theme class.
Example:
class CustomThemes {
static ThemeData lightTheme = ThemeData(
primarySwatch: Colors.blue,
accentColor: Colors.orange,
bodyText1: TextStyle(color: Colors.black, fontSize: 16),
),
);
static ThemeData darkTheme = ThemeData(
primarySwatch: Colors.blueGrey,
accentColor: Colors.redAccent,
bodyText1: TextStyle(color: Colors.white, fontSize: 16),
),
);
You can then apply these custom themes in your MaterialApp:
MaterialApp(
theme: CustomThemes.lightTheme,
darkTheme: CustomThemes.darkTheme,
home: MyHomePage(),
);
Conclusion:
• Themes allow you to define a global set of styles (colors, fonts, buttons) that can be reused across your app.
• Custom styles can be applied directly to individual widgets or by creating a custom theme class for more
flexibility.
• Flutter provides a powerful and flexible way to style your app using the Theme and TextStyle classes.
6. a) Design a form with various input fields.
Here is an example of how to design a form with various input fields in Flutter. This form will include text input fields,
a dropdown, a switch, and a submit button.
void main() => runApp(MyApp());
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Form Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: FormPage(),
),
),
);
class FormPage extends StatefulWidget {
@override
_FormPageState createState() => _FormPageState();
class _FormPageState extends State<FormPage> {
final _formKey = GlobalKey<FormState>();
String? _name;
String? _email;
String _selectedGender = 'Male';
bool _isSubscribed = false;

@override
return Form(
key: _formKey,
child: Column(
children: <Widget>[
// Name Field
TextFormField(
labelText: 'Name',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
return null;
},
onSaved: (value) {
_name = value;
},
),
// Email Field
TextFormField(
labelText: 'Email',
),
keyboardType: TextInputType.emailAddress,
return 'Please enter your email';
if (!RegExp(r'\S+@\S+\.\S+').hasMatch(value)) {
return 'Enter a valid email';
return null;
},
onSaved: (value) {
_email = value;
},
),
// Gender Dropdown
DropdownButtonFormField<String>(
labelText: 'Gender',
),
value: _selectedGender,
items: ['Male', 'Female', 'Other']
.map((gender) => DropdownMenuItem<String>(
value: gender,
child: Text(gender),
))
.toList(),
onChanged: (value) {
setState(() {
_selectedGender = value!;
});
},
return 'Please select a gender';
return null;
},
),
// Subscription Switch
SwitchListTile(
title: Text('Subscribe to newsletter'),
value: _isSubscribed,
onChanged: (bool value) {
setState(() {
_isSubscribed = value;
});
},
),
// Submit Button
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(
'Name: $_name\nEmail: $_email\nGender: $_selectedGender\nSubscribed: $_isSubscribed',
),
),
);
},
child: Text('Submit'),
),
],
),
);
Explanation:
• TextFormField: Used for taking user input, with validation for the name and email.
• DropdownButtonFormField: Provides a dropdown for selecting gender.
• SwitchListTile: A switch to subscribe or unsubscribe to a newsletter.

• ElevatedButton: A button to submit the form, which validates the fields and displays the input as a SnackBar
message.
b) Implement form validation and error handling.
Form validation and error handling in Flutter can be done using the Form, TextFormField, and GlobalKey<FormState> to
manage the state and validation of forms. Below is an example demonstrating how to implement form validation and
handle errors effectively.
Steps to Implement Form Validation:
1. Create a Form Widget: Wrap the form elements (like TextFormField) inside a Form widget.
2. Create a GlobalKey: This key allows you to manage the form's state, such as validating and saving the form.
3. Validation: You can validate each form field using the validator property of TextFormField.
4. Submit Action: Trigger validation when the form is submitted using formKey.currentState?.validate().
Example Code:
void main() {
runApp(MyApp());
@override
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Form Validation')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: LoginForm(),
),
),
);
class LoginForm extends StatefulWidget {
@override
_LoginFormState createState() => _LoginFormState();
}
class _LoginFormState extends State<LoginForm> {
// 1. Create a GlobalKey to manage the form state
final _formKey = GlobalKey<FormState>();
// Controllers for text fields
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
// 2. Function to handle form submission
void _submitForm() {
if (_formKey.currentState?.validate() ?? false) {
// If form is valid, show success
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Form is valid')));
} else {
// If form is not valid, show error
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Form is not valid')));
@override
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// Email Text Field with validation
TextFormField(
controller: _emailController,
decoration: InputDecoration(labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
// Check if the email is empty
return 'Please enter your email';
}
// Check if the email is valid
if (!RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$').hasMatch(value)) {
return 'Please enter a valid email';
return null;
},
),
// Password Text Field with validation
TextFormField(
controller: _passwordController,
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
// Check if the password is empty
return 'Please enter your password';
// Check if the password length is sufficient
if (value.length < 6) {
return 'Password must be at least 6 characters';
return null;
},
),
// Submit Button
ElevatedButton(
onPressed: _submitForm,
child: Text('Submit'),
),
],
),
);
}
@override
void dispose() {
_emailController.dispose();
_passwordController.dispose();
super.dispose();
Explanation:
1. GlobalKey: The _formKey is used to validate and save the form. The form uses this key to manage its state.
2. TextFormField: Each form field (email and password) has a validator that checks if the input is valid. If validation
fails, an error message is returned.
3. Form Validation: When the form is submitted by pressing the submit button, the _submitForm method is called.
This method validates the form by calling validate() on the form's state. If validation passes, a success message is
shown; otherwise, an error message is shown.
4. Error Handling: Each TextFormField has its own validation logic. If the field's input is not valid (like empty email or
password), an error message is displayed below the field.
Additional Features:
• Custom Error Messages: You can customize the error messages for different validation rules.
• Focus Management: You can manage focus (like shifting focus to the next field after pressing Enter).
• Saving Form: After validation, if everything is correct, you can use _formKey.currentState?.save() to save the form
data.
This approach will ensure proper form validation and error handling in your Flutter application.
7. a) Add animations to UI elements using Flutter's animation framework.
To add animations to UI elements in Flutter, you can use Flutter's built-in animation framework. The framework
provides a variety of options, from simple animations like FadeTransition to more complex ones like AnimatedBuilder.
Here's a basic guide to help you get started with Flutter's animation framework:
Steps to Add Animations in Flutter
Set Up Your Flutter Project: Ensure you have a Flutter project set up and running.
Import Necessary Packages: Import the flutter/animation.dart package in your Dart file where you want to add
animations.
Create an Animated Widget: The easiest way to add an animation is by using widgets like AnimatedContainer,
AnimatedOpacity, AnimatedPositioned, etc. Here's an example of using AnimatedContainer.
class MyAnimatedWidget extends StatefulWidget {
@override
_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
class _MyAnimatedWidgetState extends State<MyAnimatedWidget> {
double _width = 200.0;
double _height = 200.0;
Color _color = Colors.blue;
void _animate() {
setState(() {
_width = _width == 200.0 ? 300.0 : 200.0;
_height = _height == 200.0 ? 300.0 : 200.0;
_color = _color == Colors.blue ? Colors.red : Colors.blue;
});
@override
return Scaffold(
appBar: AppBar(
title: Text('Flutter Animations'),
),
body: Center(
child: GestureDetector(
onTap: _animate,
child: AnimatedContainer(
duration: Duration(seconds: 1),
width: _width,
height: _height,
color: _color,
curve: Curves.easeInOut,
child: Center(
child: Text(
'Tap Me!',
),
),
),
),
),
);
In this example:
AnimatedContainer is used to animate changes in the widget’s size and color.
When the widget is tapped, the _animate function is called, which changes the size and color of the
container over 1 second.
Use More Advanced Animations (Optional): If you want more control over your animations, you can use
AnimationController and Tween. Here's an example of animating a widget with a Tween and an AnimationController:
class MyAdvancedAnimation extends StatefulWidget {
@override
_MyAdvancedAnimationState createState() => _MyAdvancedAnimationState();
class _MyAdvancedAnimationState extends State<MyAdvancedAnimation> with SingleTickerProviderStateMixin {
AnimationController? _controller;
Animation<double>? _animation;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
);
_animation = Tween<double>(begin: 0.0, end: 300.0).animate(
CurvedAnimation(parent: _controller!, curve: Curves.easeInOut),
);
@override
return Scaffold(
appBar: AppBar(title: Text('Advanced Animation')),
body: Center(
child: GestureDetector(
onTap: () {
if (_controller!.isCompleted) {
_controller!.reverse();
} else {
_controller!.forward();
},
child: AnimatedBuilder(
animation: _controller!,
builder: (context, child) {
return Container(
width: _animation!.value,
height: _animation!.value,
color: Colors.blue,
child: Center(
child: Text(
'Tap Me!',
),
),
);
},
),
),
),
);
@override
void dispose() {
_controller?.dispose();
super.dispose();
In this example:
An AnimationController is used to control the animation.
A Tween defines the range of values for the animation (from 0.0 to 300.0).
AnimatedBuilder is used to rebuild the widget when the animation progresses.
Run Your Flutter App: Ensure that your app is running and the animation works when you interact with the widget.
Conclusion
By using Flutter's animation framework, you can easily animate UI elements such as containers, buttons, and text. For
more complex animations, you can dive into AnimationController, Tween, and AnimatedBuilder. Flutter's built-in
animation tools make it easy to create smooth, high-performance animations with minimal effort.
b) Experiment with different types of animations (fade, slide, etc.).
In Flutter, you can create a variety of animations using the AnimationController and Tween classes. Here’s a basic guide to
experiment with different types of animations like fade, slide, scale, and rotation.
1. Fade Animation
This animation will change the opacity of a widget.
void main() {
runApp(MaterialApp(home: FadeAnimation()));
class FadeAnimation extends StatefulWidget {
@override
_FadeAnimationState createState() => _FadeAnimationState();
}
class _FadeAnimationState extends State<FadeAnimation> with SingleTickerProviderStateMixin {
Animation<double>? _fadeAnimation;
@override
void initState() {
super.initState();
vsync: this,
)..repeat(reverse: true);
_fadeAnimation = Tween(begin: 0.0, end: 1.0).animate(_controller!);
@override
return Scaffold(
appBar: AppBar(title: Text('Fade Animation')),
body: Center(
child: FadeTransition(
opacity: _fadeAnimation!,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(child: Text('Fade', style: TextStyle(color: Colors.white, fontSize: 24))),
),
),
),
);
@override
void dispose() {
super.dispose();
}
2. Slide Animation
This animation will move a widget from one position to another.
void main() {
runApp(MaterialApp(home: SlideAnimation()));
class SlideAnimation extends StatefulWidget {
@override
_SlideAnimationState createState() => _SlideAnimationState();
class _SlideAnimationState extends State<SlideAnimation> with SingleTickerProviderStateMixin {
Animation<Offset>? _slideAnimation;
@override
void initState() {
super.initState();
vsync: this,
_slideAnimation = Tween<Offset>(begin: Offset(0, 0), end: Offset(0, 1)).animate(_controller!);
@override
return Scaffold(
appBar: AppBar(title: Text('Slide Animation')),
body: Center(
child: SlideTransition(
position: _slideAnimation!,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(child: Text('Slide', style: TextStyle(color: Colors.white, fontSize: 24))),
),
),
),
);
@override
void dispose() {
super.dispose();
3. Scale Animation
This animation will change the size of a widget.
void main() {
runApp(MaterialApp(home: ScaleAnimation()));
class ScaleAnimation extends StatefulWidget {
@override
_ScaleAnimationState createState() => _ScaleAnimationState();
class _ScaleAnimationState extends State<ScaleAnimation> with SingleTickerProviderStateMixin {
Animation<double>? _scaleAnimation;
@override
void initState() {
super.initState();
vsync: this,
_scaleAnimation = Tween(begin: 0.5, end: 1.5).animate(_controller!);
@override
return Scaffold(
appBar: AppBar(title: Text('Scale Animation')),
body: Center(
child: ScaleTransition(
scale: _scaleAnimation!,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(child: Text('Scale', style: TextStyle(color: Colors.white, fontSize: 24))),
),
),
),
);
@override
void dispose() {
super.dispose();
4. Rotation Animation
This animation will rotate a widget continuously.
void main() {
runApp(MaterialApp(home: RotationAnimation()));
class RotationAnimation extends StatefulWidget {
@override
_RotationAnimationState createState() => _RotationAnimationState();
class _RotationAnimationState extends State<RotationAnimation> with SingleTickerProviderStateMixin {
Animation<double>? _rotationAnimation;
@override
void initState() {
super.initState();
vsync: this,
)..repeat();
_rotationAnimation = Tween(begin: 0.0, end: 2 * 3.14159).animate(_controller!);
@override
return Scaffold(
appBar: AppBar(title: Text('Rotation Animation')),
body: Center(
child: RotationTransition(
turns: _rotationAnimation!,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(child: Text('Rotate', style: TextStyle(color: Colors.white, fontSize: 24))),
),
),
),
);
@override
void dispose() {
super.dispose();
5. Combined Animation (Fade + Slide + Scale)
You can also combine multiple animations by using AnimatedBuilder.
void main() {
runApp(MaterialApp(home: CombinedAnimation()));
class CombinedAnimation extends StatefulWidget {
@override
_CombinedAnimationState createState() => _CombinedAnimationState();
class _CombinedAnimationState extends State<CombinedAnimation> with SingleTickerProviderStateMixin {
Animation<double>? _fadeAnimation;
Animation<Offset>? _slideAnimation;
Animation<double>? _scaleAnimation;
@override
void initState() {
super.initState();
vsync: this,
_fadeAnimation = Tween(begin: 0.0, end: 1.0).animate(_controller!);
_slideAnimation = Tween<Offset>(begin: Offset(0, 0), end: Offset(0, 1)).animate(_controller!);
_scaleAnimation = Tween(begin: 0.5, end: 1.5).animate(_controller!);
@override
return Scaffold(
appBar: AppBar(title: Text('Combined Animation')),
body: Center(
child: AnimatedBuilder(
animation: _controller!,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation!.value,
child: Transform.translate(
offset: _slideAnimation!.value,
child: Opacity(
opacity: _fadeAnimation!.value,
child: child,
),
),
);
},
child: Container(
width: 200,
height: 200,
color: Colors.blue,
child: Center(child: Text('Combined', style: TextStyle(color: Colors.white, fontSize: 24))),
),
),
),
);
@override
void dispose() {
super.dispose();
Conclusion:
You can experiment with various animations in Flutter by tweaking the parameters like duration, begin, and end values of
different animation types (fade, slide, scale, rotation). You can also combine animations using AnimatedBuilder for more
complex animations.
9. a) Fetch data from a REST API.
b) Display the fetched data in a meaningful way in the UI.
To fetch data from a REST API and display it meaningfully in the UI using Flutter, you can follow these steps:
1. Add Dependencies
First, ensure you have the necessary dependencies in your pubspec.yaml file. You'll need http for making HTTP requests
and flutter for UI components:
dependencies:
flutter:
sdk: flutter
http: ^0.13.4
2. Create a Model for Data
If you're fetching JSON data, you may want to create a model to represent the data structure. Here's an example:
class Post {
final int id;
final String title;
final String body;
Post({required this.id, required this.title, required this.body});
factory Post.fromJson(Map<String, dynamic> json) {
return Post(
id: json['id'],
title: json['title'],
body: json['body'],
);
}
3. Fetch Data from the API
Use the http package to fetch data from the API. In this example, we'll use a placeholder API that returns a list of posts.
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'models/post.dart';
Future<List<Post>> fetchPosts() async {
final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
if (response.statusCode == 200) {
List jsonResponse = json.decode(response.body);
return jsonResponse.map((data) => Post.fromJson(data)).toList();
} else {
throw Exception('Failed to load posts');
4. Display Data in the UI
You can use a FutureBuilder to fetch and display the data asynchronously. Here's how you can integrate it into your
widget:
import 'models/post.dart';
import 'network.dart'; // Assuming your fetchPosts() function is here.
void main() {
runApp(MyApp());
@override
return MaterialApp(
title: 'Flutter API Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PostListScreen(),
);
}
}
class PostListScreen extends StatelessWidget {
@override
return Scaffold(
appBar: AppBar(
title: Text('Posts from API'),
),
body: FutureBuilder<List<Post>>(
future: fetchPosts(), // Fetch posts data
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Center(child: Text('Error: ${snapshot.error}'));
} else if (!snapshot.hasData || snapshot.data!.isEmpty) {
return Center(child: Text('No posts available.'));
} else {
List<Post> posts = snapshot.data!;
return ListView.builder(
itemCount: posts.length,
itemBuilder: (context, index) {
return Card(
margin: EdgeInsets.all(8.0),
child: ListTile(
title: Text(posts[index].title),
subtitle: Text(posts[index].body),
leading: CircleAvatar(
child: Text(posts[index].id.toString()),
),
),
);
},
);
},
),
);
Key Steps Breakdown:
1. Model Creation: A Post class is used to model the JSON data.
2. Fetching Data: The fetchPosts() function makes an HTTP GET request using the http package.
3. Displaying Data: The FutureBuilder widget asynchronously fetches the data and displays it in a ListView. If the
data is successfully fetched, it is displayed as a list of ListTile widgets.
Error Handling and Loading States
• Loading: A CircularProgressIndicator is shown while the data is being fetched.
• Error: If the request fails, an error message is shown.
• No Data: If the API returns no data, a message is displayed.
This approach allows you to fetch data from a REST API and display it dynamically in the Flutter UI.
10. a) Write unit tests for UI components.
To write unit tests for UI components in Flutter, we use the flutter_test package. Unit tests typically focus on testing
individual components like widgets, and you can test their behavior, rendering, and state changes.
Here’s an example of how to write unit tests for some basic UI components in Flutter:
1. Test for StatelessWidget
Let’s say we have a simple StatelessWidget:
class MyButton extends StatelessWidget {
final String text;
MyButton({required this.text, required this.onPressed});
@override
return ElevatedButton(
child: Text(text),
);
Now, you can write a unit test to verify if the button renders correctly and if it calls the onPressed function when pressed.
Test Code:
import 'package:flutter_test/flutter_test.dart';
import 'my_button.dart'; // Replace with actual file location
void main() {
testWidgets('MyButton widget should render text and trigger onPressed', (WidgetTester tester) async {
// Define a mock onPressed callback
bool wasPressed = false;
void onPressed() {
wasPressed = true;
// Build the widget
await tester.pumpWidget(MaterialApp(
home: Scaffold(
body: MyButton(text: 'Click Me', onPressed: onPressed),
),
));
// Verify if the button is rendered with the correct text
expect(find.text('Click Me'), findsOneWidget);
// Tap the button and trigger the onPressed callback
await tester.tap(find.byType(ElevatedButton));
await tester.pump();
// Verify if the onPressed callback was called
expect(wasPressed, true);
});
2. Test for StatefulWidget
Consider a simple StatefulWidget:
class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
class _CounterWidgetState extends State<CounterWidget> {
int counter = 0;
setState(() {
counter++;
});
@override
return Column(
children: <Widget>[
Text('Counter: $counter'),
ElevatedButton(
child: Text('Increment'),
),
],
);
Here’s how you can write a unit test to verify the behavior of the CounterWidget.
Test Code:
import 'counter_widget.dart'; // Replace with actual file location
void main() {
testWidgets('CounterWidget should increment the counter when button is pressed', (WidgetTester tester) async {
// Build the widget
home: Scaffold(
body: CounterWidget(),
),
));
// Verify initial counter value
expect(find.text('Counter: 0'), findsOneWidget);
// Tap the increment button
await tester.tap(find.byType(ElevatedButton));
// Verify the counter value after tapping
expect(find.text('Counter: 1'), findsOneWidget);
});
3. Test for Input Field
Here’s a simple widget with a TextField:
class TextInputWidget extends StatelessWidget {
final TextEditingController controller;
TextInputWidget({required this.controller});
@override
return TextField(
controller: controller,
decoration: InputDecoration(labelText: 'Enter Text'),
);
Test Code:
import 'text_input_widget.dart'; // Replace with actual file location
void main() {
testWidgets('TextInputWidget should allow text input', (WidgetTester tester) async {
// Create a TextEditingController
final controller = TextEditingController();
// Build the widget
home: Scaffold(
body: TextInputWidget(controller: controller),
),
));
// Enter text into the TextField
await tester.enterText(find.byType(TextField), 'Hello World');
// Verify if the controller has the correct text
expect(controller.text, 'Hello World');
});
Key Points:
1. testWidgets is used for testing UI components (widgets).
2. WidgetTester provides methods like pumpWidget(), tap(), and enterText() for simulating user interactions.
3. find helps locate widgets in the widget tree using specific search criteria like find.text(), find.byType(), etc.
4. expect is used to assert the results of the test.
Conclusion:
These unit tests for Flutter UI components check whether the widgets render correctly and respond to user interactions,
such as button presses and text input.
b) Use Flutter's debugging tools to identify and fix issues.
To identify and fix issues in your Flutter app using Flutter's debugging tools, follow these steps:
1. Use Flutter DevTools
Flutter DevTools is a suite of performance and debugging tools for Flutter apps.
Steps:
• Run the app in debug mode: In your terminal, run:
• flutter run --debug
• Open DevTools: When running the app, you can open DevTools by navigating to:
o Android Studio or Visual Studio Code: Use the inbuilt Flutter DevTools interface.
o Terminal: Type:
o flutter pub global activate devtools
o flutter pub global run devtools
DevTools includes several key tools like the Widget Inspector, Performance View, Memory View, Network View, and
Logging.
2. Analyze Logs with flutter logs
To check your app's logs, run:
flutter logs
This command gives you real-time logs from your running app, helping you detect errors, warnings, and other logs that
can hint at issues.
3. Use the Flutter Inspector
The Flutter Inspector allows you to inspect the widget tree and its properties in real time.
Steps:
• Open DevTools or use Android Studio/VS Code to inspect the widget tree.
• Click on the widget in the app UI to view its structure and debug any UI issues.
• The inspector allows you to check properties like padding, margins, sizes, and layouts for each widget.
4. Use flutter analyze
This command performs static analysis of your Dart code to help you spot potential bugs and style issues.
Steps:
flutter analyze
It will provide warnings about code that may cause problems or be written in an inefficient or error-prone way.
5. Check for Errors in flutter run Output
When running flutter run, pay attention to the output in the terminal. Flutter will display error messages, stack traces,
and warnings in the console, which can help identify the exact cause of an issue.
6. Use Breakpoints and Step Through Code
Set breakpoints in your code using your IDE (Visual Studio Code, Android Studio, etc.) to pause execution at specific
points. This allows you to step through the code and inspect the values of variables.
• In VS Code: Click next to the line number to set a breakpoint.
• In Android Studio: Click on the gutter to set a breakpoint.
• Run your app in debug mode (flutter run --debug), and the app will pause at breakpoints so you can inspect the
state.
7. Check Widget Rebuilding Issues
Use the Performance View in Flutter DevTools to check if your widgets are being unnecessarily rebuilt. This can help you
optimize your app.
• Hot reload: Use flutter hot reload to apply changes and see the effects immediately without restarting the app.
• Performance view: Check for frame rendering issues, jank, or UI delays.
8. Use the debugPrint() Method
Use debugPrint() to log messages in your app to help track down issues.
debugPrint('Current value of someVariable: $someVariable');
9. Run the App on Multiple Devices

Run your app on different devices (both emulators and physical devices) to check for device-specific issues, such as UI
rendering, performance, or platform-specific bugs.
10. Check for Issues in Dependencies
Sometimes, issues can arise from outdated or incompatible dependencies. To fix this, try:
flutter pub upgrade
flutter pub get
By using these tools, you can efficiently identify and resolve issues in your Flutter app. If a particular issue persists,
consider isolating it with a minimal example and checking Flutter's official documentation or community forums for
additional support.

Manual-UI Design Flutter

Uploaded by

Manual-UI Design Flutter

Uploaded by

1. a) Install Flutter and Dart SDK.

Step 1: Download Flutter SDK

1. Visit the Flutter website:

2. Download Flutter SDK:

o Download the latest stable release for your OS.

Step 2: Install Flutter SDK

1. Extract the SDK:

o Extract the downloaded .zip file to a desired location (e.g., C:\src\flutter).

2. Set Environment Variable:

o Under System variables, find Path and click Edit.

1. Extract the SDK:

o Open your terminal and run:

1. Extract the SDK:

o Extract the .tar.xz file to a directory (e.g., /home/<your-username>/flutter).

o Save and reload the file using:

1. Open a terminal or command prompt.

2. Run the following command:

If Dart is installed correctly, it will display the Dart version.

Step 4: Verify Installation

1. Open a terminal or command prompt.

2. Run the following command:

Step 5: Install Additional Tools

• Visual Studio Code:

• Enable Developer Options and USB Debugging on your Android device.

Step 6: Test Flutter Installation

1. Create a new Flutter project:

2. flutter create my_app

3. Navigate to the project directory:

5. Run the app:

You can now start building Flutter apps!

Here are additional details and examples to expand on Dart basics:

In Dart, variables can hold null if explicitly declared as nullable using ?.

int? age; // Nullable integer

print(age); // Output: null

10. Null Safety and Default Values

Use the ?? operator to provide a default value when a variable is null.

int result = value ?? 10; // Use 10 if value is null

11. Switch Statement

• A switch statement is used for multi-way branching.

• Always use break to exit the case block.

12. Lambda Functions (Arrow Functions)

int multiply(int a, int b) => a * b;

print(multiply(5, 4)); // Output: 20

• Functions with a single expression can use => instead of {}.

13. Set Example

Set<String> colors = {'Red', 'Green', 'Blue'};

print(colors); // Output: {Red, Green, Blue, Yellow}

colors.add('Red'); // Duplicates are ignored

print(colors); // Output: {Red, Green, Blue, Yellow}

• A Set is an unordered collection of unique items.

14. Exception Handling

int result = 12 ~/ 0; // Integer division by zero

• Use try-catch blocks to handle exceptions.

• The finally block always executes.

15. Async and Await

Dart supports asynchronous programming with Future.

Future<String> fetchData() async {

return Future.delayed(Duration(seconds: 2), () => 'Data loaded');

void main() async {

String data = await fetchData();

print(data); // Output after 2 seconds: Data loaded

16. Higher-Order Functions

Functions can be passed as arguments to other functions.

void printMessage(String message) => print(message);

void performAction(String msg, Function action) {

performAction('Hello, Dart!', printMessage); // Output: Hello, Dart!

17. Generators (Synchronous and Asynchronous)

Iterable<int> generateNumbers(int n) sync* {

for (int i = 1; i <= n; i++) {

yield i; // Pause and return each value

for (int num in generateNumbers(5)) {

Stream<int> asyncNumbers(int n) async* {

for (int i = 1; i <= n; i++) {

await Future.delayed(Duration(seconds: 1));

void main() async {

await for (int num in asyncNumbers(5)) {