3a) Design a responsive UI that adapts to different screen sizes.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Responsive UI')),
body: LayoutBuilder(
builder: (context, constraints) {
return Center(
child: constraints.maxWidth < 600
? Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.smartphone, size: 64, color: Colors.blue),
SizedBox(height: 16),
Text('Mobile View', style: TextStyle(fontSize: 18)),
SizedBox(height: 8),
Image.network(
'https://images.pexels.com/photos/33153/raisting-sattelit-reception-signal.jpg?_gl=1*1uz67ix*_ga*NjM0NzQ3OTQ5LjE3NTIwNDA5OTA.*_ga_8JE65Q40S6*czE3NTM5MzMyODEkbzQkZzEkdDE3NTM5MzMyOTUkajQ2JGwwJGgw',
width: 100,
),
SizedBox(height: 8),
Text(
'This is a responsive UI that adapts to screen size.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 14),
),
],
)
: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.desktop_windows, size: 64, color: Colors.green),
SizedBox(width: 24),
Text('Windows View', style: TextStyle(fontSize: 24)),
SizedBox(width: 16),
Image.network(
'https://images.pexels.com/photos/33153/raisting-sattelit-reception-signal.jpg?_gl=1*1uz67ix*_ga*NjM0NzQ3OTQ5LjE3NTIwNDA5OTA.*_ga_8JE65Q40S6*czE3NTM5MzMyODEkbzQkZzEkdDE3NTM5MzMyOTUkajQ2JGwwJGgw',
width: 400,
),
SizedBox(height: 16),
Text(
'This is a responsive UI that adapts to screen size.',
style: TextStyle(fontSize: 24),
),
],
),
);
},
),
),
);
}
}
LayoutBuilder:
LayoutBuilder is a widget in Dart that provides the current layout constraints to its child widget.
It is used to build a widget based on the available layout constraints, allowing the widget to adapt its appearance and behavior based on the available space.
builder function:
The builder function is a required parameter of the LayoutBuilder widget.
It is a callback function that takes two parameters:
context: The current build context, which provides information about the widget's position in the widget tree.
constraints: The layout constraints that the child widget must adhere to.
Center widget:
The Center widget is a layout widget that centers its child widget both horizontally and vertically within the available space.
constraints.maxWidth < 600:
This is a conditional expression that checks if the maximum width of the available layout constraints is less than 600 pixels.
The result of this expression will be either true or false, which will determine the child widget that is displayed.
MainAxisSize.min: This value sets the main axis size to the minimum size required to fit the children of the Row, Column, or Flex widget.
MainAxisSize.max: This value sets the main axis size to the maximum available space in the parent widget.
MaterialApp
└── Scaffold
├── AppBar
│ └── Text('Responsive UI')
└── Body
└── LayoutBuilder
└── builder (context, constraints) → returns:
└── Center
└── Conditional (constraints.maxWidth < 600)
├── If true (Mobile View):
│ └── Column (mainAxisSize: MainAxisSize.min)
│ ├── Icon(Icons.smartphone, size: 64, color: Colors.blue)
│ ├── SizedBox(height: 16)
│ ├── Text('Mobile View', style: fontSize 18)
│ ├── SizedBox(height: 8)
│ ├── Image.network (width: 100, from URL)
│ ├── SizedBox(height: 8)
│ └── Text(
│ 'This is a responsive UI that adapts to screen size.',
│ textAlign: center,
│ style: fontSize 14
│ )
└── If false (Windows View):
└── Column (mainAxisSize: MainAxisSize.min)
├── Icon(Icons.desktop_windows, size: 64, color: Colors.green)
├── SizedBox(height: 16)
├── Text('Windows View', style: fontSize 24)
├── SizedBox(height: 16)
├── Image.network (width: 400, from URL)
├── SizedBox(height: 16)
└── Text(
'This is a responsive UI that adapts to screen size.',
style: fontSize 24
)
3b) Implement media queries and breakpoints for responsiveness.
The MediaQuery class in Flutter is a powerful tool that allows you to access information about the device's screen size, orientation, and other media-related properties. It is a part of the material.dart library and is commonly used to create responsive and adaptive user interfaces.
Here's a breakdown of the MediaQuery class and its main functions:
MediaQuery.of(context): This static method is used to access the MediaQueryData object associated with the given BuildContext. The BuildContext represents the location of a widget in the widget tree, and the MediaQueryData object contains information about the device's screen.
MediaQueryData: This class represents the media-related data for the current device. It contains various properties that provide information about the device's screen, such as:
size: The size of the device's screen in logical pixels.
orientation: The orientation of the device (portrait or landscape).
devicePixelRatio: The ratio of physical pixels to logical pixels on the device.
padding: The system-provided padding around the edge of the screen, such as the status bar or the navigation bar.
viewInsets: The system-provided insets from the viewable area of the screen, such as the on-screen keyboard.
viewPadding: The padding around the viewable area of the screen, which may differ from the system-provided padding.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Responsive UI')),
body: LayoutBuilder(
builder: (context, constraints) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
MediaQuery.of(context).size.width < 600
? Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.smartphone, size: 64, color: Colors.blue),
SizedBox(height: 16),
Text('Mobile View', style: TextStyle(fontSize: 18)),
],
)
: MediaQuery.of(context).size.width < 1200
? Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.tablet, size: 64, color: Colors.orange),
SizedBox(width: 24),
Text('Tablet View', style: TextStyle(fontSize: 18)),
],
)
: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.desktop_windows, size: 64, color: Colors.green),
SizedBox(width: 24),
Text('Desktop View', style: TextStyle(fontSize: 18)),
],
),
SizedBox(height: 32),
Text(
'This UI adapts to different screen sizes, '
'showing a mobile view for small screens, '
'a tablet view for medium screens, and '
'a desktop view for larger screens.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
],
),
);
},
),
),
);
}
}
MaterialApp
└── Scaffold
├── AppBar
│ └── Text('Responsive UI')
└── LayoutBuilder
└── Builder (context, constraints)
└── Center
└── Column (mainAxisAlignment: center)
├── Conditional widget (based on screen width):
│ ├── If width < 600:
│ │ └── Column (mainAxisSize: min)
│ │ ├── Icon(Icons.smartphone, size: 64, color: blue)
│ │ ├── SizedBox(height: 16)
│ │ └── Text('Mobile View', fontSize: 18)
│ ├── Else if width < 1200:
│ │ └── Row (mainAxisSize: min)
│ │ ├── Icon(Icons.tablet, size: 64, color: orange)
│ │ ├── SizedBox(width: 24)
│ │ └── Text('Tablet View', fontSize: 18)
│ └── Else (width >= 1200):
│ └── Row (mainAxisSize: min)
│ ├── Icon(Icons.desktop_windows, size: 64, color: green)
│ ├── SizedBox(width: 24)
│ └── Text('Desktop View', fontSize: 18)
├── SizedBox(height: 32)
└── Text(
'This UI adapts to different screen sizes, '
'showing a mobile view for small screens, '
'a tablet view for medium screens, and '
'a desktop view for larger screens.',
textAlign: center,
fontSize: 16
)
ORIENTATION USING MEDIA QUERY CLASS
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Responsive UI with Orientation')),
body: LayoutBuilder(
builder: (context, constraints) {
return Center(
child: MediaQuery.of(context).orientation == Orientation.portrait
? Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.smartphone, size: 64, color: Colors.blue),
SizedBox(height: 16),
Text('Portrait View', style: TextStyle(fontSize: 18)),
],
)
: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.landscape, size: 64, color: Colors.red),
SizedBox(width: 24),
Text('Landscape View', style: TextStyle(fontSize: 18)),
],
),
);
},
),
),
);
}
}
MaterialApp
└── Scaffold
├── AppBar
│ └── Text('Responsive UI with Orientation')
└── Body
└── LayoutBuilder
└── builder (context, constraints) → returns:
└── Center
└── Conditional based on MediaQuery.of(context).orientation
├── If portrait:
│ └── Column (mainAxisSize: MainAxisSize.min)
│ ├── Icon(Icons.smartphone, size: 64, color: Colors.blue)
│ ├── SizedBox(height: 16)
│ └── Text('Portrait View', style: fontSize 18)
└── If landscape:
└── Row (mainAxisSize: MainAxisSize.min)
├── Icon(Icons.landscape, size: 64, color: Colors.red)
├── SizedBox(width: 24)
└── Text('Landscape View', style: fontSize 18)
Comments
Post a Comment