Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views8 pages

FLUTTER LAB 3,4

Uploaded by

lateefunisa56

Flutter dart programming

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

FLUTTER LAB 3,4

Uploaded by

lateefunisa56
4 views8 pages
Flutter dart programming

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

Flutter dart programming

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
4 views8 pages

FLUTTER LAB 3,4

Uploaded by

lateefunisa56
Flutter dart programming

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 8

3.a.

DESIGN RESPONSIVE UI THAT ADOPTS DIFFERENT


SCREEN SIZES.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: ResponsiveHome(),
);
}
}
class ResponsiveHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Get screen dimensions
double screenWidth = MediaQuery.of(context).size.width;
return Scaffold(
appBar: AppBar(
title: Text('Responsive UI Example'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
// Responsive Text
Text(
'Hello, Flutter!',
style: TextStyle(
fontSize: screenWidth * 0.5), // Responsive font size
),
SizedBox(height: 20),
// Responsive Row
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
flex: 2,
child: Container(
color: Colors.blue,
height: 100,
child: Center(child: Text('Box 1')),
),
),
SizedBox(width: 10),
Flexible(
flex: 3,
child: Container(
color: Colors.green,
height: 100,
child: Center(child: Text('Box 2')),
),
),
],
),
SizedBox(height: 20),
// Responsive Grid
Expanded(child: GridView.count(crossAxisCount:
screenWidth > 600 ? 4
: 2, // Adjust grid columns based on screen width
children: List.generate(6, (index) {
return Container(
margin: EdgeInsets.all(6.0),
color: Colors.red,
child: Center(child: Text('Item ${index + 1}')),
);
}),
),
),
],
),
),
),
);
}
}
3.B. IMPEMENT MEDIA QUERIES AND BREAKPOINTS FOR
RESPONSIVENSS

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


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

class ResponsiveHomePage extends StatelessWidget {


@override
Widget build(BuildContext context) {
// Get screen width
final screenWidth = MediaQuery.of(context).size.width;

if (screenWidth < 600) {


// Mobile layout
return MobileLayout();
} else if (screenWidth < 1200) {
// Tablet layout
return TabletLayout();
} else {
// Desktop layout
return DesktopLayout();
}
}
}

class MobileLayout extends StatelessWidget {


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Mobile Layout")),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"This is a Mobile View",
style: TextStyle(
fontSize: MediaQuery.of(context).size.width * 0.05,
),
),
SizedBox(height: 20),
ElevatedButton(onPressed: () {}, child: Text("Button")),
],
),
),
);
}
}

class TabletLayout extends StatelessWidget {


@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;

return Scaffold(
appBar: AppBar(title: Text("Tablet Layout")),
body: Padding(
padding: EdgeInsets.symmetric(horizontal: screenWidth *
0.05),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Tablet View",
style: TextStyle(fontSize: screenWidth * 0.04),
),
SizedBox(height: 20),
ElevatedButton(onPressed: () {}, child: Text("Button")),
],
),
),
),
);
}
}
class DesktopLayout extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Desktop Layout")),
body: Row(
children: [
Expanded(
child: Padding(
padding: EdgeInsets.all(32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"Desktop View",
style: TextStyle(
fontSize: MediaQuery.of(context).size.width * 0.03,
),
),
SizedBox(height: 20),
ElevatedButton(onPressed: () {}, child:
Text("Button")),
],
),
),
),
Expanded(
child: Container(
color: Colors.blueAccent,
child: Center(
child: Text("Additional Desktop Content"),
),
),
),
],
),
);
}
}
4.A. SETUP NAVIGATION BETWEEN TWO DIFFERNET
SCREENS USING NAVIGATION

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: FirstScreen(),
);
}
}

// First Screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigate to the Second Screen
Navigator.push(
context,
MaterialPageRoute(builder: (context) =>
SecondScreen()),
);
},
child: Text('Go to Second Screen'),
),
),
);
}
}

// Second Screen
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Go back to the First Screen
Navigator.pop(context);
},
child: Text('Back to First Screen'),
),
),
);
}
}

4.B. NAVIGATION USING NAMED ROUTES

import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation with Named Routes',
// Define named routes
routes: {
'/': (context) => FirstScreen(), // Default route
'/second': (context) => SecondScreen(),
},
initialRoute: '/’, // Set the initial screen (first screen)
);
}
}

// First Screen
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('First Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigate to the Second Screen using the named route
Navigator.pushNamed(context, '/second');
},
child: Text('Go to Second Screen'),
),
),
);
}
}
// Second Screen
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Screen'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
// Navigate back to the First Screen using Navigator.pop()
Navigator.pop(context);
},
child: Text('Back to First Screen'),
),
),
);
}
}

You might also like