Untitled
unknown
plain_text
a month ago
22 kB
2
Indexable
//2.a. Flutter program to Explore various Flutter widgets (Text, Image, Container, etc.).
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: CombinedWidget(),
);
}
}
class CombinedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Combined Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Rotating Container
Transform(
transform: Matrix4.rotationZ(0.1),
alignment: Alignment.center,
child: Container(
width: double.infinity,
height: 150.0,
color: const Color.fromARGB(255, 135, 215, 240),
margin: EdgeInsets.all(25),
padding: EdgeInsets.all(35),
alignment: Alignment.center,
child: Text(
"Hello! I am in the container widget!!",
style: TextStyle(fontSize: 25),
textAlign: TextAlign.center,
),
),
),
// Smaller Image with Caption
Padding(
padding: const EdgeInsets.all(8.0), // Reduced padding
child: Container(
width: 200, // Specify a smaller width
height: 100, // Specify a smaller height
child: AspectRatio(
aspectRatio: 2 / 1, // Adjust to maintain a specific aspect ratio
child: Image.asset(
'assets/london.png', // Ensure this image exists
fit: BoxFit.contain,
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'London, thou art the flour of cities all',
style: TextStyle(fontSize: 20.0),
textAlign: TextAlign.center,
),
),
// Simple Text Example
Padding(
padding: const EdgeInsets.all(16.0),
),
],
),
),
);
}
}
//2b) Implement different layout structures using Row, Column, and Stack widgets.
import 'package:flutter/material.dart';
void main() => runApp(CalculatorApp());
class CalculatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Simple Calculator',
home: CalculatorScreen(),
);
}
}
class CalculatorScreen extends StatefulWidget {
@override
_CalculatorScreenState createState() => _CalculatorScreenState();
}
class _CalculatorScreenState extends State<CalculatorScreen> {
String display = '0';
void onButtonPressed(String buttonText) {
setState(() {
if (buttonText == '=') {
// Implement a simple evaluation logic here
display = evaluateExpression(display);
} else if (buttonText == 'C') {
display = '0';
} else {
display = display == '0' ? buttonText : display + buttonText;
}
});
}
String evaluateExpression(String expression) {
// Basic evaluation logic (this can be expanded)
try {
final result = double.parse(expression); // Simple example
return result.toString();
} catch (e) {
return 'Error';
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Simple Calculator'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
// Display area using a Stack
Stack(
alignment: Alignment.centerRight,
children: [
Container(
height: 100,
color: Colors.grey[300],
alignment: Alignment.centerRight,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Text(
display,
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
),
),
],
),
// Buttons using Rows and Columns
Expanded(
child: Column(
children: [
// First row of buttons
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
calcButton('7'),
calcButton('8'),
calcButton('9'),
calcButton('/'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
calcButton('4'),
calcButton('5'),
calcButton('6'),
calcButton('*'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
calcButton('1'),
calcButton('2'),
calcButton('3'),
calcButton('-'),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
calcButton('C'),
calcButton('0'),
calcButton('='),
calcButton('+'),
],
),
],
),
),
],
),
);
}
Widget calcButton(String text) {
return ElevatedButton(
onPressed: () => onButtonPressed(text),
child: Text(
text,
style: TextStyle(fontSize: 24),
),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.all(20),
shape: CircleBorder(),
),
);
}
}
//3. a) Design a responsive UI that adapts to different screen sizes.
import 'package:flutter/material.dart';
void main() {
runApp(CalculatorApp());
}
class CalculatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Calculator',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Calculator(),
);
}
}
class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}
class _CalculatorState extends State<Calculator> {
String _output = "0";
String _operand = "";
String _operator = "";
bool _shouldClearOutput = false; // Added flag to reset output after each operation
void _buttonPressed(String buttonText) {
setState(() {
if (buttonText == "C") {
_output = "0";
_operand = "";
_operator = "";
_shouldClearOutput = false;
} else if (buttonText == "=") {
_output = _calculateResult();
_operand = "";
_operator = "";
_shouldClearOutput = true;
} else if ("+-*/".contains(buttonText)) {
if (_operator.isEmpty) {
_operand = _output;
_operator = buttonText;
_shouldClearOutput = true;
} else {
_output = _calculateResult();
_operand = _output;
_operator = buttonText;
_shouldClearOutput = true;
}
} else {
if (_shouldClearOutput) {
_output = buttonText; // Replace output with the new input
_shouldClearOutput = false;
} else {
if (_output == "0") {
_output = buttonText;
} else {
_output += buttonText; // Append the digit
}
}
}
});
}
String _calculateResult() {
double num1 = double.parse(_operand);
double num2 = double.parse(_output);
switch (_operator) {
case "+":
return (num1 + num2).toString();
case "-":
return (num1 - num2).toString();
case "*":
return (num1 * num2).toString();
case "/":
return (num1 / num2).toString();
default:
return "0";
}
}
Widget _buildButton(String buttonText) {
return Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
padding: EdgeInsets.all(20),
backgroundColor: Colors.lightBlue.shade200,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
onPressed: () => _buttonPressed(buttonText),
child: Text(
buttonText,
style: TextStyle(fontSize: 28),
),
),
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Calculator")),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
padding: EdgeInsets.all(24.0),
alignment: Alignment.centerRight,
child: Text(
_output,
style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
),
),
SizedBox(height: 24), // Space underneath the result section
Row(
children: [
_buildButton("7"),
_buildButton("8"),
_buildButton("9"),
_buildButton("/"),
],
),
Row(
children: [
_buildButton("4"),
_buildButton("5"),
_buildButton("6"),
_buildButton("*"),
],
),
Row(
children: [
_buildButton("1"),
_buildButton("2"),
_buildButton("3"),
_buildButton("-"),
],
),
Row(
children: [
_buildButton("C"),
_buildButton("0"),
_buildButton("="),
_buildButton("+"),
],
),
SizedBox(height: 24), // Space underneath the button section
],
),
);
}
}
//3b) Implement media queries and breakpoints for responsiveness.
import 'package:flutter/material.dart';
void main() {
runApp(CalculatorApp());
}
class CalculatorApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Calculator',
theme: ThemeData(primarySwatch: Colors.blue),
home: Calculator(),
);
}
}
class Calculator extends StatefulWidget {
@override
_CalculatorState createState() => _CalculatorState();
}
class _CalculatorState extends State<Calculator> {
String _output = "0";
String _operand1 = "";
String _operand2 = "";
String _operator = "";
void _buttonPressed(String buttonText) {
setState(() {
if (buttonText == "C") {
_output = "0";
_operand1 = "";
_operand2 = "";
_operator = "";
} else if (buttonText == "=") {
if (_operator.isNotEmpty) {
_operand2 = _output;
_output = _calculateResult();
_operand1 = "";
_operator = "";
}
} else if ("+-*/".contains(buttonText)) {
if (_operand1.isEmpty) {
_operand1 = _output;
_operator = buttonText;
_output = "0";
}
} else {
if (_output == "0") {
_output = buttonText;
} else {
_output += buttonText;
}
}
});
}
String _calculateResult() {
double num1 = double.parse(_operand1);
double num2 = double.parse(_output);
switch (_operator) {
case "+":
return (num1 + num2).toString();
case "-":
return (num1 - num2).toString();
case "*":
return (num1 * num2).toString();
case "/":
return (num1 / num2).toString();
default:
return "0";
}
}
Widget _buildButton(String buttonText, double buttonSize) {
return Container(
margin: EdgeInsets.all(4.0),
child: ElevatedButton(
onPressed: () => _buttonPressed(buttonText),
child: Text(buttonText, style: TextStyle(fontSize: 24)),
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(vertical: buttonSize / 3), // Adjust padding based on button size
fixedSize: Size(buttonSize, buttonSize),
),
),
);
}
@override
Widget build(BuildContext context) {
// Get screen width and height using MediaQuery
final screenWidth = MediaQuery.of(context).size.width;
final screenHeight = MediaQuery.of(context).size.height;
// Calculate button size based on screen width
final buttonSize = screenWidth * 0.2; // Set button size to 20% of screen width
return Scaffold(
appBar: AppBar(title: Text("Calculator")),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
alignment: Alignment.centerRight,
child: Text(
_output,
style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildButton("7", buttonSize),
_buildButton("8", buttonSize),
_buildButton("9", buttonSize),
_buildButton("/", buttonSize),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildButton("4", buttonSize),
_buildButton("5", buttonSize),
_buildButton("6", buttonSize),
_buildButton("*", buttonSize),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildButton("1", buttonSize),
_buildButton("2", buttonSize),
_buildButton("3", buttonSize),
_buildButton("-", buttonSize),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildButton("C", buttonSize),
_buildButton("0", buttonSize),
_buildButton("=", buttonSize),
_buildButton("+", buttonSize),
],
),
],
),
);
}
}
//4. Set up navigation between different screens using Navigator and Implement navigation with named routes.
import 'package:flutter/material.dart';
void main() {
runApp(GreetingApp());
}
class GreetingApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Greeting App',
theme: ThemeData(primarySwatch: Colors.blue),
initialRoute: '/',
routes: {
'/': (context) => HomeScreen(),
'/greeting': (context) => GreetingScreen(),
'/about': (context) => AboutScreen(),
},
);
}
}
class HomeScreen extends StatelessWidget {
final TextEditingController nameController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Greeting App'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: nameController,
decoration: InputDecoration(labelText: 'Enter your name'),
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pushNamed(
context,
'/greeting',
arguments: nameController.text,
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue, // Updated here
),
child: Text('Greet'),
),
SizedBox(width: 20),
ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/about');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue, // Updated here
),
child: Text('About'),
),
],
),
],
),
),
),
);
}
}
class GreetingScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final String name = ModalRoute.of(context)!.settings.arguments as String;
return Scaffold(
appBar: AppBar(
title: Text('Greeting'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hello, $name',
style: TextStyle(
fontSize: 24,
color: Colors.blue,
),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back'),
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue), // Updated here
),
],
),
),
);
}
}
class AboutScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('About'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'This is a simple Greeting App built with Flutter.',
style: TextStyle(fontSize: 24),
textAlign: TextAlign.center,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back'),
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue), // Updated here
),
],
),
),
);
}
}
//5. Implement state management using set State and Provider.
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
// CounterProvider class
class CounterProvider with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
void decrement() {
_count--;
notifyListeners();
}
}
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => CounterProvider()),
],
child: MyApp(),
),
);
}
// MyApp widget - Root of the application
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Provider Counter Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: CounterScreen(),
);
}
}
// CounterScreen widget - Displays the counter and buttons to modify it
class CounterScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
final counterProvider = Provider.of<CounterProvider>(context);
return Scaffold(
appBar: AppBar(
title: Text('Provider Counter Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'${counterProvider.count}',
style: Theme.of(context).textTheme.headlineMedium,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(Icons.add),
onPressed: counterProvider.increment,
),
IconButton(
icon: Icon(Icons.remove),
onPressed: counterProvider.decrement,
),
],
),
],
),
),
);
}
}
Editor is loading...
Leave a Comment