UI DESIGN-FLUTTER LAB – AY – 2024-25 B.

Tech IV Year I Semester - IT- A & B

Lab Program 3
3. a) Design a responsive UI that adapts to different screen sizes.

 Designing a responsive UI in Flutter involves making sure your app

layout adjusts dynamically based on different screen sizes,
orientations, and aspect ratios.
 Flutter offers several tools to handle this, such as LayoutBuilder,
MediaQuery, and AspectRatio, along with widgets like Flexible,
Expanded, and FittedBox.

A simple responsive UI that adapts to various screen sizes:

1. Using MediaQuery and LayoutBuilder
These help us get the screen size and adjust the layout accordingly.
2. Using Flexible and Expanded
These widgets can adjust child widget sizes relative to the available
space.
3. Using FittedBox, AspectRatio
These widgets help maintain proportions and prevent overflow issues.

 MediaQuery: Helps you get the device's screen size (width and
height), allowing you to adjust your layout based on that.
 LayoutBuilder: Dynamically builds the UI based on the constraints of
the available space. You can design separate layouts for small,
medium, and large screens.
 Responsive layouts:
 Small (Mobile) Layout: The buildMobileLayout uses Column and
Flexible widgets for stacking and flexibility.
 Medium (Tablet) Layout: The buildTabletLayout uses Row and
Expanded to adjust the size of the content evenly across the
screen.
 Large (Desktop) Layout: The buildDesktopLayout uses
GridView.count to divide the layout into a grid, making it ideal for
larger screens.

 MediaQuery in Flutter provides useful information about the current state

of the screen, such as its size, padding, orientation, text scaling factor,
and much more. This helps developers build responsive layouts that
adapt to different devices, screen sizes, and orientations.

Key Properties of MediaQuery:

1. size: Provides the width and height of the screen in logical pixels.
2. orientation: Detects the current orientation of the device (portrait or
landscape).
3. padding: Returns the padding around the edges of the screen. This is
useful for handling devices with notches or rounded corners.

Prepared by: G SUDHAKAR RAJU Page 1 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

4. viewInsets: Provides the space reserved for the system UI, like the on-
screen keyboard.
5. devicePixelRatio: Returns the number of device pixels for each logical
pixel. This helps you scale UI elements across different pixel densities (e.g.,
low-DPI vs. high-DPI screens).
6. textScaleFactor: Defines the scaling factor for text sizes (important for
accessibility and text scaling preferences).
7. platformBrightness: Detects whether the device is in light or dark mode.
8. alwaysUse24HourFormat: Returns a boolean indicating whether the user
prefers a 24-hour clock format.

 LayoutBuilder in Flutter is a powerful widget that allows you to build

layouts based on the constraints of the parent widget. It is particularly
useful for creating responsive UIs that need to adapt to varying sizes and
layouts. The key advantage of LayoutBuilder is that it responds
dynamically to changes in the available space, making it ideal for
responsive designs, especially when combined with MediaQuery.
 The LayoutBuilder widget takes a builder function that provides the
BoxConstraints of the parent widget. You can use these constraints (like
max/min width and height) to decide how to render your widget.

Syntax:

LayoutBuilder(

builder: (BuildContext context, BoxConstraints constraints) {

return // Build UI based on the constraints;

},

Key Properties of LayoutBuilder:

 builder: This function is called to build the widget tree. It takes two
parameters:
 context: The BuildContext.
 constraints: The BoxConstraints object, which provides the minimum and
maximum width and height available for the widget.

Prepared by: G SUDHAKAR RAJU Page 2 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Example Code:

import 'package:flutter/material.dart';

void main() {
runApp(ResponsiveApp());
}

class ResponsiveApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive UI Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ResponsiveHomePage(),
);
}
}

class ResponsiveHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
// MediaQuery helps to get screen dimensions
var screenSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
title: Text("Responsive UI Example"),
),
body: LayoutBuilder(
builder: (context, constraints) {
// Adjust layout for small, medium, and large screens
if (screenSize.width < 600) {
// Small screen (mobile)
return buildMobileLayout();
} else if (screenSize.width < 1200) {
// Medium screen (tablet)
return buildTabletLayout();
} else {
// Large screen (desktop)
return buildDesktopLayout();
}
},
),
);
}

Prepared by: G SUDHAKAR RAJU Page 3 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Widget buildMobileLayout() {
return Column(
children: [
Flexible(
child: Container(
color: Colors.blue,
height: 100,
width: double.infinity,
child: Center(child: Text("Mobile View", style: TextStyle(color:
Colors.white))),
),
),
Flexible(
child: Container(
color: Colors.green,
height: 100,
width: double.infinity,
child: Center(child: Text("Content 1", style: TextStyle(color:
Colors.white))),
),
),
Flexible(
child: Container(
color: Colors.orange,
height: 100,
width: double.infinity,
child: Center(child: Text("Content 2", style: TextStyle(color:
Colors.white))),
),
),
],
);
}

Widget buildTabletLayout() {
return Row(
children: [
Expanded(
child: Container(
color: Colors.blue,
height: 200,
child: Center(child: Text("Tablet View", style: TextStyle(color:
Colors.white))),
),
),
Expanded(

Prepared by: G SUDHAKAR RAJU Page 4 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

child: Container(
color: Colors.green,
height: 200,
child: Center(child: Text("Content 1", style: TextStyle(color:
Colors.white))),
),
),
Expanded(
child: Container(
color: Colors.orange,
height: 200,
child: Center(child: Text("Content 2", style: TextStyle(color:
Colors.white))),
),
),
],
);
}

Widget buildDesktopLayout() {
return GridView.count(
crossAxisCount: 3,
children: [
Container(
color: Colors.blue,
child: Center(child: Text("Desktop View", style: TextStyle(color:
Colors.white))),
),
Container(
color: Colors.green,
child: Center(child: Text("Content 1", style: TextStyle(color:
Colors.white))),
),
Container(
color: Colors.orange,
child: Center(child: Text("Content 2", style: TextStyle(color:
Colors.white))),
),
],
);
}
}

Prepared by: G SUDHAKAR RAJU Page 5 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Output:
Mobile View :

Tablet View:

Desktop View:

Prepared by: G SUDHAKAR RAJU Page 6 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

3. b) Implement media queries and breakpoints for responsiveness.

i) media queries example

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: MediaQueryExample(),

);

class MediaQueryExample extends StatelessWidget {

@override

Widget build(BuildContext context) {

// Get the size of the screen

var screenSize = MediaQuery.of(context).size;

// Determine if the device is in portrait or landscape mode

var isPortrait = screenSize.height > screenSize.width;

Prepared by: G SUDHAKAR RAJU Page 7 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

return Scaffold(

appBar: AppBar(

title: Text('MediaQuery Example'),

),

body: Center(

child: Container(

width: screenSize.width * 0.8,

height: screenSize.height * 0.3,

color: isPortrait ? Colors.blue : Colors.green,

child: Center(

child: Text(

'Width: ${screenSize.width.toStringAsFixed(2)},

Height: ${screenSize.height.toStringAsFixed(2)}',

textAlign: TextAlign.center,

style: TextStyle(fontSize: 20, color: Colors.white),

),

),

),

),

);

Prepared by: G SUDHAKAR RAJU Page 8 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Output:

Note:

The 0.8 and 0.3 multipliers in the code are used to make the container size a
percentage of the screen size. Here's why:

 screenSize.width * 0.8: This makes the container's width 80% of the

screen's width, which ensures that the container scales proportionally to
different screen sizes. Using 80% of the screen width leaves some margin
on either side, making the layout more flexible and visually balanced.
 screenSize.height * 0.3: This makes the container's height 30% of the
screen's height, making it take up less vertical space compared to its
width. This also ensures the container size adapts to different screen
heights while keeping a proportional layout.

The specific values (0.8 and 0.3) are chosen based on design preferences and
can be adjusted to fit your design needs. For example:

 You could make the container wider by increasing 0.8 to 0.9 (90% of the
screen width).
 You could increase the height by changing 0.3 to 0.5 (50% of the screen
height).

Prepared by: G SUDHAKAR RAJU Page 9 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

ii) Breakpoinsts example

import 'package:flutter/material.dart';

void main() {
runApp(ResponsiveApp());
}

// Custom breakpoints for responsiveness

class Breakpoints {
static const double mobile = 600; // Mobile breakpoint: less than
600px
static const double tablet = 1200; // Tablet breakpoint: between
600px and 1200px
}

class ResponsiveApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive Layout Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ResponsiveHomePage(),
);
}
}

class ResponsiveHomePage extends StatelessWidget {

@override
Widget build(BuildContext context) {
// Get media query data
var mediaQuery = MediaQuery.of(context);
var screenWidth = mediaQuery.size.width;
var orientation = mediaQuery.orientation;

return Scaffold(
appBar: AppBar(
title: Text("Responsive Layout with Custom Breakpoints"),
),
body: LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
// Use custom breakpoints defined in the Breakpoints class
if (screenWidth < Breakpoints.mobile) {
// Handle mobile layout with orientation detection
if (orientation == Orientation.portrait) {
return buildMobileLayout();

Prepared by: G SUDHAKAR RAJU Page 10 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

} else {
return buildMobileLandscapeLayout();
}
} else if (screenWidth < Breakpoints.tablet) {
// Handle tablet layout
return buildTabletLayout();
} else {
// Handle desktop layout
return buildDesktopLayout();
}
},
),
);
}

// Mobile Layout (Portrait Mode)

Widget buildMobileLayout() {
return Column(
children: [
Container(
color: Colors.blue,
height: 100,
width: double.infinity,
child: Center(child: Text("Mobile Layout (Portrait)", style:
TextStyle(color: Colors.white))),
),
Container(
color: Colors.green,
height: 100,
width: double.infinity,
child: Center(child: Text("Content 1", style: TextStyle(color:
Colors.white))),
),
Container(
color: Colors.orange,
height: 100,
width: double.infinity,
child: Center(child: Text("Content 2", style: TextStyle(color:
Colors.white))),
),
],
);
}

// Mobile Layout (Landscape Mode)

Widget buildMobileLandscapeLayout() {
return Row(

Prepared by: G SUDHAKAR RAJU Page 11 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

children: [
Container(
color: Colors.blue,
width: 100,
height: double.infinity,
child: Center(child: Text("Mobile Layout (Landscape)", style:
TextStyle(color: Colors.white))),
),
Expanded(
child: Container(
color: Colors.green,
child: Center(child: Text("Content 1", style: TextStyle(color:
Colors.white))),
),
),
Expanded(
child: Container(
color: Colors.orange,
child: Center(child: Text("Content 2", style: TextStyle(color:
Colors.white))),
),
),
],
);
}

// Tablet Layout (Screens between 600px and 1200px)

Widget buildTabletLayout() {
return Row(
children: [
Expanded(
child: Container(
color: Colors.blue,
height: double.infinity,
child: Center(child: Text("Tablet Layout", style: TextStyle(color:
Colors.white))),
),
),
Expanded(
child: Column(
children: [
Container(
color: Colors.green,
height: 100,
child: Center(child: Text("Content 1", style: TextStyle(color:
Colors.white))),
),

Prepared by: G SUDHAKAR RAJU Page 12 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Container(
color: Colors.orange,
height: 100,
child: Center(child: Text("Content 2", style: TextStyle(color:
Colors.white))),
),
],
),
),
],
);
}

// Desktop Layout (Screens larger than 1200px)

Widget buildDesktopLayout() {
return GridView.count(
crossAxisCount: 3,
children: [
Container(
color: Colors.blue,
child: Center(child: Text("Desktop Layout", style: TextStyle(color:
Colors.white))),
),
Container(
color: Colors.green,
child: Center(child: Text("Content 1", style: TextStyle(color:
Colors.white))),
),
Container(
color: Colors.orange,
child: Center(child: Text("Content 2", style: TextStyle(color:
Colors.white))),
),
],
);
}
}

Prepared by: G SUDHAKAR RAJU Page 13 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

Output:

1. Mobile Layout (Portrait)

2. Mobile Layout (Landscape)

Prepared by: G SUDHAKAR RAJU Page 14 of 15

UI DESIGN-FLUTTER LAB – AY – 2024-25 B.Tech IV Year I Semester - IT- A & B

3. Tablet Layout

4. Desktop Layout

Prepared by: G SUDHAKAR RAJU Page 15 of 15