Untitled
unknown
plain_text
21 days 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