3 a) Design a responsive UI that adapts to different screen sizes.
// RESPONSIVE UI
import 'package:flutter/[Link]';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive UI Demo',
theme: ThemeData(primarySwatch: [Link]),
home: const ResponsiveHome(),
);
class ResponsiveHome extends StatelessWidget {
const ResponsiveHome({[Link]});
@override
Widget build(BuildContext context) {
double width = [Link](context).[Link];
return Scaffold(
appBar: AppBar(title: const Text('Responsive UI Example')),
body: LayoutBuilder(
builder: (context, constraints) {
if ([Link] < 600) {
// 📱 Mobile Layout
return _buildMobileLayout();
} else if ([Link] < 1200) {
// 🟨 Tablet Layout
return _buildTabletLayout();
} else {
// Desktop Layout
return _buildDesktopLayout();
},
),
);
// Mobile layout
Widget _buildMobileLayout() {
return Center(
child: Column(
mainAxisAlignment: [Link],
children: const [
Icon(Icons.phone_android, size: 50, color: [Link]),
Text("Mobile View", style: TextStyle(fontSize: 20)),
],
),
);
// Tablet layout
Widget _buildTabletLayout() {
return Center(
child: Row(
mainAxisAlignment: [Link],
children: const [
Icon(Icons.tablet_mac, size: 60, color: [Link]),
SizedBox(width: 20),
Text("Tablet View", style: TextStyle(fontSize: 24)),
],
),
);
// Desktop layout
Widget _buildDesktopLayout() {
return Center(
child: Row(
mainAxisAlignment: [Link],
children: const [
Icon(Icons.desktop_windows, size: 70, color: [Link]),
SizedBox(width: 20),
Text("Desktop View", style: TextStyle(fontSize: 28)),
],
),
);
Output:
Mobile View
Tablet View:
Desktop View:
3 b) Implement media queries and breakpoints for responsiveness.
// MEDIA QUERIES AND BREAKPOINTS
Step 1: Add HTML page into web floder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
.container {
display: flex;
flex-direction: row;
gap: 20px;
.box {
flex: 1;
padding: 20px;
background-color: lightblue;
text-align: center;
}
/* 👇 Mobile (max width: 600px) */
@media (max-width: 600px) {
.container {
flex-direction: column;
.box {
background-color: lightcoral;
/* 👇 Tablet (601px to 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
.box {
background-color: lightgreen;
</style>
</head>
<body>
<h2>Responsive Design Example</h2>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>
</body>
</html>
Step 2: import HTML file into main. dart file
import 'package:flutter/[Link]';
void main() => runApp(const ResponsiveApp());
class ResponsiveApp extends StatelessWidget {
const ResponsiveApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Responsive UI')),
body: const ResponsiveLayout(),
),
);
class ResponsiveLayout extends StatelessWidget {
const ResponsiveLayout({[Link]});
@override
Widget build(BuildContext context) {
double screenWidth = [Link](context).[Link];
if (screenWidth < 600) {
// Mobile layout
return Column(
children: buildBoxes([Link]),
);
} else if (screenWidth < 1024) {
// Tablet layout
return Row(
children: buildBoxes([Link]),
);
} else {
// Desktop layout
return Row(
children: buildBoxes([Link]),
);
List<Widget> buildBoxes(Color color) {
return [Link](3, (index) {
return Expanded(
child: Container(
margin: const [Link](8),
height: 100,
color: color,
child: Center(child: Text('Box ${index + 1}')),
),
);
});
OUTPUT:
Desktop Screen:
Tablet Screen:
Mobile Screen: