DEPARTMENT OF INFORMATION TECHNOLOGY

EXPERIMENT-3

AIM:
a) Design a responsive UI that adapts to different screen sizes.
DESCRIPTION:
Responsive

Typically, a responsive app has had its layout tuned for the available screen size. Often this means (for
example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is
especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a
laptop or desktop computer.

CODE:

import 'dart:math' as math;

import 'package:flutter/material.dart';

const int maxSeeds = 250;

void main() {
runApp(const Sunflower());
}

class Sunflower extends StatefulWidget {

const Sunflower({super.key});

@override
State<StatefulWidget> createState() {
return _SunflowerState();
}
}

class _SunflowerState extends State<Sunflower> {

int seeds = maxSeeds ~/ 2;

@override
Widget build(BuildContext context) {
 return MaterialApp(
theme: ThemeData(
brightness: Brightness.dark,
appBarTheme: const AppBarTheme(elevation: 2),
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Sunflower'),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: SunflowerWidget(seeds),
),
const SizedBox(height: 20),
Text('Showing ${seeds.round()} seeds'),
SizedBox(
width: 300,
child: Slider(
min: 1,
max: maxSeeds.toDouble(),
value: seeds.toDouble(),
onChanged: (val) {
setState(() => seeds = val.round());
},
),
),
const SizedBox(height: 20),
],
),
),
),
);
}
}
class SunflowerWidget extends StatelessWidget {
static const tau = math.pi * 2;
static const scaleFactor = 1 / 40;
static const size = 600.0;
static final phi = (math.sqrt(5) + 1) / 2;
static final rng = math.Random();

final int seeds;

const SunflowerWidget(this.seeds, {super.key});

@override
Widget build(BuildContext context) {
final seedWidgets = <Widget>[];

for (var i = 0; i < seeds; i++) {

final theta = i * tau / phi;
final r = math.sqrt(i) * scaleFactor;

seedWidgets.add(AnimatedAlign(
key: ValueKey(i),
duration: Duration(milliseconds: rng.nextInt(500) + 250),
curve: Curves.easeInOut,
alignment: Alignment(r * math.cos(theta), -1 * r * math.sin(theta)),
child: const Dot(true),
));
}

for (var j = seeds; j < maxSeeds; j++) {

final x = math.cos(tau * j / (maxSeeds - 1)) * 0.9;
final y = math.sin(tau * j / (maxSeeds - 1)) * 0.9;

seedWidgets.add(AnimatedAlign(
key: ValueKey(j),
duration: Duration(milliseconds: rng.nextInt(500) + 250),
curve: Curves.easeInOut,
alignment: Alignment(x, y),
child: const Dot(false),
));
 }

return FittedBox(
fit: BoxFit.contain,
child: SizedBox(
height: size,
width: size,
child: Stack(children: seedWidgets),
),
);
}
}

class Dot extends StatelessWidget {

static const size = 5.0;
static const radius = 3.0;

final bool lit;

const Dot(this.lit, {super.key});

@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
color: lit ? Colors.orange : Colors.grey.shade700,
borderRadius: BorderRadius.circular(radius),
),
child: const SizedBox(
height: size,
width: size,
),
);
}
}

OUTPUT:
b) Implement media queries and breakpoints for responsiveness.
What is MediaQuery Class?

The MediaQuery class in Flutter is a crucial tool for creating responsive layouts. It provides access to
the media query data from the BuildContext context. This data is used to determine the physical
characteristics of the device's screen size, such as screen width, screen height, device pixel ratio, and
more.

INTERACTIVE EXAMPLE FOR MediaQuery and OrientationBuilder:

Main.dart:
import 'package:flutter/material.dart';

import 'orientation.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({Key? key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
//home: const Media(),
home: const Oriten(),
);
}
}
Media.dart:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class Media extends StatefulWidget {

const Media({Key? key});

@override
State<Media> createState() => _MediaState();
}

class _MediaState extends State<Media> {

@override
Widget build(BuildContext context) {
final mediaQueryData = MediaQuery.of(context);
final screenWidth = mediaQueryData.size.width;
final screenHeight = mediaQueryData.size.height;
final isPortrait = mediaQueryData.orientation == Orientation.portrait;
final pixelRatio = mediaQueryData.devicePixelRatio;

return Scaffold(
appBar: AppBar(
title: const Text('Media'),
),
body: SingleChildScrollView(
child: Column(
children: [
Text(
"Hello, this is a text",
style: GoogleFonts.rubikIso(
fontSize: isPortrait ? 20 : 16,
color: Colors.green[300],
),
),
// Add your widgets here to try.
],
),
),
);
 }
}

For Package Googlefont Set the Dependency for pub.dev

orientation.dart:
import 'package:flutter/material.dart';

class Oriten extends StatefulWidget {

const Oriten({Key? key});

@override
State<Oriten> createState() => _OritenState();
}

class _OritenState extends State<Oriten> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Orientation'),
centerTitle: true,
),
body: OrientationBuilder(
builder: (context, orientation) {
if (orientation == Orientation.portrait) {
return PortraitLayout();
} else {
 return LandscapeLayout();
}
},
),
);
}
}

class PortraitLayout extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Portrait Mode",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 20,
),
Icon(
Icons.mobile_friendly,
size: 100,
),
],
);
}
}

class LandscapeLayout extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
 Text(
"Landscape Mode",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
SizedBox(
height: 20,
),
Icon(
Icons.laptop_windows,
size: 100,
),
],
);
}
}
OUTPUT: