Untitled

 avatar
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