EXPERIMENT-3A
AIM: Design a Responsive UI that adapts to different screen sizes
DESCRIPTION:
This Flutter app demonstrates how to build a Responsive User Interface (UI)
that adapts to different screen sizes (mobile, tablet, and desktop). It uses
LayoutBuilder, MediaQuery, and breakpoints to decide which layout to
display.
PROGRAM:
import 'package:flutter/material.dart';
void main() {
runApp(const ResponsiveApp());
}
class ResponsiveApp extends StatelessWidget {
const ResponsiveApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Responsive Flutter Demo',
home: const ResponsiveHome(),
debugShowCheckedModeBanner: false, ); }}
class ResponsiveHome extends StatelessWidget {
const ResponsiveHome({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Responsive UI')),
body: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) {
final width = constraints.maxWidth;
if (width >= 1000) {
return const DesktopLayout();
} else if (width >= 600) {
return const TabletLayout();
} else { return const MobileLayout(); }, ), }}
class MobileLayout extends StatelessWidget {
const MobileLayout({super.key});
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Column(
children: [
Container(
width: double.infinity,
height: size.height * 0.3,
color: Colors.blue,
child: const Center(
child: Text(
'Mobile View',
style: TextStyle(color: Colors.white, fontSize: 24), ),),),
Expanded(
child: ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: 5,
itemBuilder: (_, idx) => Card(
margin: const EdgeInsets.symmetric(vertical: 8),
child: ListTile(
title: Text('List item \$idx'),
subtitle: const Text('Mobile list', ), ), ), ],); }}
class TabletLayout extends StatelessWidget {
const TabletLayout({super.key});
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisCount: MediaQuery.of(context).size.width ~/ 200,
crossAxisSpacing: 12,
mainAxisSpacing: 12,
padding: const EdgeInsets.all(12),
children: List.generate(
8,
(i) => Container(
color: Colors.teal[100 * ((i % 8) + 1)],
child: Center(child: Text('Tile $i')), ), ), ); }}
class DesktopLayout extends StatelessWidget {
const DesktopLayout({super.key});
@override
Widget build(BuildContext context) {
return Row(
children: [
NavigationRail(
selectedIndex: 0,
destinations: const [
NavigationRailDestination(
icon: Icon(Icons.home),
label: Text('Home'),
),
NavigationRailDestination(
icon:Icon(Icons.settings),
label: Text('Settings'), ), ], ),
const VerticalDivider(width: 1),
Expanded(
child: Center(
child: Text(
'Desktop Content Area',
style: Theme.of(context).textTheme.headline4, ), ), ), ], ); }}
extension on TextTheme {
get headline4 => null;
}
CONCLUSION: This code is a good example of Flutter’s responsive design
capability, showing how a single codebase can adapt to mobile, tablet, and
desktop experiences.
OUTPUT:
