LAB TASK 12

SUBMITTED BY: Qurat Ul Ain

REGISTRATION NO: SP22-BCS-007

Q 1:
import 'dart:math';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
home: RandomNumberGame(),
debugShowCheckedModeBanner: false,
);
}
}

class RandomNumberGame extends StatefulWidget {

@override
_RandomNumberGameState createState() => _RandomNumberGameState();
}

class _RandomNumberGameState extends State<RandomNumberGame> {

int boxA = 0;
int boxB = 0;
int boxC = 0;
bool isGameOver = false;

void generateRandomNumber() {
if (isGameOver) return;

int randomNumber = Random().nextInt(9) + 1; // Random number between 1 and 9

setState(() {
if (randomNumber >= 1 && randomNumber <= 3) {
boxA++;
} else if (randomNumber >= 4 && randomNumber <= 6) {
boxB++;
} else if (randomNumber >= 7 && randomNumber <= 9) {
boxC++;
}

// Check if any box has reached the limit

if (boxA >= 6 || boxB >= 6 || boxC >= 6) {
isGameOver = true;
_showGameOverDialog();
}
});
}

void _resetGame() {
setState(() {
boxA = 0;
boxB = 0;
boxC = 0;
isGameOver = false;
});
}

void _showGameOverDialog() {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Game Over'),
content: Text('One of the boxes has reached the limit!'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
_resetGame();
},
child: Text('Restart'),
),
],
),
);
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Row for the boxes A, B, and C
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildBox('A', boxA, 'Range\n(1 to 3)'),
_buildBox('B', boxB, 'Range\n(4 to 6)'),
_buildBox('C', boxC, 'Range\n(7 to 9)'),
],
),
SizedBox(height: 50),
// Button
ElevatedButton(
onPressed: generateRandomNumber,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(color: Colors.black, width: 1.5)),
),
child: Text(
isGameOver ? 'Game Over' : 'Click Here',
style: TextStyle(fontSize: 18),
),
),
],
),
);
}

Widget _buildBox(String label, int value, String range) {

return Column(
children: [
Text(
label,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
Container(
width: 80,
height: 25,
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 1.5),
),
child: Center(
child: Text(
value.toString(),
style: TextStyle(fontSize: 16),
),
),
),
SizedBox(height: 10),
Text(
range,
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
],
);
}
}
Q #2
import 'package:flutter/material.dart';
import 'dart:math';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Task2(),
);
}
}

class Task2 extends StatefulWidget {

@override
_Task2State createState() => _Task2State();
}

class _Task2State extends State<Task2> {

final random = Random();
int player1Score = 0;
int player2Score = 0;
int player3Score = 0;
int player1Turn = 0;
int player2Turn = 0;
int player3Turn = 0;
int player1Outcome = 0;
int player2Outcome = 0;
int player3Outcome = 0;
void rollDice(int player) {
setState(() {
int outcome = random.nextInt(6) + 1;
if (player == 1) {
player1Score += outcome;
player1Turn++;
player1Outcome = outcome;
} else if (player == 2) {
player2Score += outcome;
player2Turn++;
player2Outcome = outcome;
} else if (player == 3) {
player3Score += outcome;
player3Turn++;
player3Outcome = outcome;
}
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
padding: EdgeInsets.all(16),
width: 600,
height: 500, // Increased height for better spacing
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 1.5),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text("Player 1",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
Text("Player 2",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
Text("Player 3",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
],
),
SizedBox(height: 40),
// Added spacing between rows
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
// Player 1 Column
Expanded(
child: Column(
children: [
Text("Current Score: $player1Score",
style: TextStyle(fontSize: 16)),
Text("Outcome: $player1Outcome",
style: TextStyle(fontSize: 16)),
Text("Target: 10", style: TextStyle(fontSize: 16)),
Text("Turn Number: $player1Turn",
style: TextStyle(fontSize: 16)),
SizedBox(height: 10), // Added space before button
ElevatedButton(
onPressed: () => rollDice(1),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
foregroundColor: Colors.black,
padding: EdgeInsets.symmetric(
horizontal: 50, vertical: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: Colors.grey, width: 1.5),
),
),
child: Text('Player 1',
style: TextStyle(fontSize: 16)),
),
],
),
),
SizedBox(width: 20), // Increased space between columns
// Player 2 Column
Expanded(
child: Column(
children: [
Text("Current Score: $player2Score",
style: TextStyle(fontSize: 16)),
Text("Outcome: $player2Outcome",
style: TextStyle(fontSize: 16)),
Text("Target: 10", style: TextStyle(fontSize: 16)),
Text("Turn Number: $player2Turn",
style: TextStyle(fontSize: 16)),
SizedBox(height: 10), // Added space before button
ElevatedButton(
onPressed: () => rollDice(2),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
foregroundColor: Colors.black,
padding: EdgeInsets.symmetric(
horizontal: 50, vertical: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: Colors.grey, width: 1.5),
),
),
child: Text('Player 2',
style: TextStyle(fontSize: 16)),
),
],
),
),
SizedBox(width: 20), // Increased space between columns
// Player 3 Column
Expanded(
child: Column(
children: [
Text("Current Score: $player3Score",
style: TextStyle(fontSize: 16)),
Text("Outcome: $player3Outcome",
style: TextStyle(fontSize: 16)),
Text("Target: 10", style: TextStyle(fontSize: 16)),
Text("Turn Number: $player3Turn",
style: TextStyle(fontSize: 16)),
SizedBox(height: 10), // Added space before button
ElevatedButton(
onPressed: () => rollDice(3),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
foregroundColor: Colors.black,
padding: EdgeInsets.symmetric(
horizontal: 50, vertical: 20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(5),
side: BorderSide(
color: Colors.grey, width: 1.5),
),
),
child: Text('Player 3',
style: TextStyle(fontSize: 16)),
),
],
),
),
],
),
SizedBox(height: 20), // Increased space after player rows
Text("Click a button to generate a random number from 1 to 6",
style: TextStyle(fontSize: 16)),
],
),
),
],
),
),
);
}
}
Q #3
import 'dart:math';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: GameScreen(),
);
}
}

class GameScreen extends StatefulWidget {

@override
_GameScreenState createState() => _GameScreenState();
}

class _GameScreenState extends State<GameScreen> {

String userValue = 'Fire'; // Default value for user
String computerValue = 'Wood'; // Default value for computer
String result = 'User'; // Default value for winner

final List<String> options = ['Fire', 'Wood', 'Water'];

// Function to generate random value for the user or computer

String generateRandomValue() {
final random = Random();
return options[random.nextInt(3)];
}

// Function to determine the winner

String determineWinner(String user, String computer) {
if (user == computer) {
return 'Draw';
}

// Fire > Wood, Wood > Water, Water > Fire

if ((user == 'Fire' && computer == 'Wood') ||
(user == 'Wood' && computer == 'Water') ||
(user == 'Water' && computer == 'Fire')) {
return 'User';
} else {
return 'Computer';
}
}

// Function to generate values and determine the winner

void generateUserValue() {
String userChoice = generateRandomValue();
setState(() {
userValue = userChoice;
});
}

void generateComputerValue() {
String computerChoice = generateRandomValue();
String winner = determineWinner(userValue, computerChoice);
setState(() {
computerValue = computerChoice;
result = winner;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// User value box (with default value)
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'User Value ',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Container(
padding: EdgeInsets.all(8),
width: 180,
height: 40, // Added height
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),

child: Text(
userValue,
style:
TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
],
),
SizedBox(height: 20),

// Computer value box (with default value)

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Computer Value ',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Container(
padding: EdgeInsets.all(8),
width: 180,
height: 40, // Added height
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),

child: Text(
computerValue,
style:
TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
],
),
SizedBox(height: 20),

// Winner box (with default value 'User')

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Winner ',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
),
Container(
padding: EdgeInsets.all(8),
width: 180,
height: 40, // Added height
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),

child: Text(
result,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: result == 'Draw'
? Colors.grey
: (result == 'User' ? Colors.green : Colors.black),
),
),
),
],
),
SizedBox(height: 30),

// Buttons to generate values

Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: generateUserValue,
child: Text('Generate User Value'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
foregroundColor: Colors.black,
textStyle: TextStyle(fontWeight: FontWeight.bold),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 10),
minimumSize: Size(
220, 90), // Adjust the width and height as needed
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(color: Colors.black, width: 1.5),
),
),
),
SizedBox(width: 20),
ElevatedButton(
onPressed: generateComputerValue,
child: Text('Generate Computer Value'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
foregroundColor: Colors.black,
textStyle: TextStyle(fontWeight: FontWeight.bold),
padding:
EdgeInsets.symmetric(horizontal: 30, vertical: 10),
minimumSize: Size(
220, 90), // Adjust the width and height as needed
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
side: BorderSide(color: Colors.black, width: 1.5),
),
),
),
],
),
],
),
),
),
);
}
}

Q #4
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

// Initial text color
Color textColor = Colors.black;

// Function to change the text color

void changeTextColor(Color color) {
setState(() {
textColor = color;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Text widget with dynamic color
Text(
'Change my color!',
style: TextStyle(fontSize: 30, color: textColor),
),
SizedBox(height: 30), // Increase space between text and buttons
// Blue button
ElevatedButton(
onPressed: () => changeTextColor(Colors.blue),
child: Text('BLUE'),
),
SizedBox(height: 20), // Add space between buttons
// Green button
ElevatedButton(
onPressed: () => changeTextColor(Colors.green),
child: Text('GREEN'),
),
],
),
),
),
);
}
}
Q #5
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ColorPickerScreen(),
);
}
}

class ColorPickerScreen extends StatefulWidget {

@override
_ColorPickerScreenState createState() => _ColorPickerScreenState();
}

class _ColorPickerScreenState extends State<ColorPickerScreen> {

final List<String> colors = ["RED", "GREEN", "BLUE"];
String selectedColor = "BLUE";

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: colors.map((color) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 4.0),
child: GestureDetector(
onTap: () {
setState(() {
selectedColor = color;
});
},
child: Container(
decoration: BoxDecoration(
color: color == "RED"
? Colors.red
: color == "GREEN"
? Colors.green
: const Color.fromARGB(255, 33, 96, 204),
borderRadius: BorderRadius.circular(5),
border: Border.all(
color: selectedColor == color
? Colors.black
: Colors.transparent,
width: 2,
),
),
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
child: Text(
color,
style: TextStyle(
color: Colors.black,
fontWeight: selectedColor == color
? FontWeight.bold
: FontWeight.normal,
fontSize: selectedColor == color ? 18 : 14,
),
),
),
),
);
}).toList(),
),
SizedBox(height: 40),
Container(
decoration: BoxDecoration(
color: selectedColor == "RED"
? Colors.red
: selectedColor == "GREEN"
? Colors.green
: const Color.fromARGB(255, 33, 96, 204),
borderRadius: BorderRadius.circular(5),
),
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
child: Text(
"$selectedColor is clicked",
style: TextStyle(
color: Colors.black,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
],
),
);
}
}

Q #6
import 'package:flutter/material.dart';
import 'dart:math';

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

class SnakesAndLaddersApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: SnakesAndLaddersGame(),
);
}
}

class SnakesAndLaddersGame extends StatefulWidget {

@override
_SnakesAndLaddersGameState createState() => _SnakesAndLaddersGameState();
}
class _SnakesAndLaddersGameState extends State<SnakesAndLaddersGame> {
int playerPosition = 1; // Player starts at position 1
int diceRoll = 1; // Initial dice value
Map<int, int> ladders = {3: 22, 5: 8, 11: 26}; // Ladders
Map<int, int> snakes = {17: 4, 19: 7, 21: 9}; // Snakes

void rollDice() {
setState(() {
diceRoll = Random().nextInt(6) + 1; // Random dice roll (1-6)
int newPosition = playerPosition + diceRoll;

// Check if the player moves beyond the last position

if (newPosition > 30) {
newPosition = playerPosition; // Stay at the current position
} else {
// Check for ladders and snakes
if (ladders.containsKey(newPosition)) {
newPosition = ladders[newPosition]!;
} else if (snakes.containsKey(newPosition)) {
newPosition = snakes[newPosition]!;
}
}

// Update the player's position

playerPosition = newPosition;

// End game condition

if (playerPosition == 30) {
showDialog(
context: context,
builder: (context) => AlertDialog(
title: Text('Game Over 🎉'),
content: Text('You reached the finish line!'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
resetGame();
},
child: Text('Play Again'),
)
],
),
);
}
});
}

void resetGame() {
setState(() {
playerPosition = 1; // Reset player to the start position
diceRoll = 1; // Reset dice roll
});
}

Offset calculatePosition(int position, double boardSize) {

const int rows = 6; // Total rows on the board
const int cols = 5; // Total columns on the board
final double cellSize = boardSize / cols; // Cell size (square)

int row = (position - 1) ~/ cols; // Determine the row

int col = (position - 1) % cols; // Determine the column

// Alternate row direction for snaking effect

if (row % 2 == 1) {
col = cols - 1 - col; // Reverse column order for odd rows
}

// Calculate the position in pixels

double x = col * cellSize + cellSize * 0.25; // Center the token horizontally
double y = boardSize - ((row + 1) * cellSize) + cellSize * 0.25; // Adjust y
return Offset(x, y);
}

@override
Widget build(BuildContext context) {
return Scaffold(
body: LayoutBuilder(
builder: (context, constraints) {
// Ensure the board is square and fits within the screen
final double boardSize = min(constraints.maxWidth, constraints.maxHeight);

return Center(
child: Stack(
children: [
// Background board image
Container(
width: boardSize,
height: boardSize,
child: Image.asset(
'SnakesLaddersBoard.jpg',
fit: BoxFit.fill, // Make sure the board fills the container
),
),
// Player token
Positioned(
left: calculatePosition(playerPosition, boardSize).dx,
top: calculatePosition(playerPosition, boardSize).dy,
child: Image.asset(
'player.png',
width: boardSize / 10, // Scale player token relative to board size
height: boardSize / 10,
),
),
// Dice and Roll Button
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: Colors.white.withOpacity(0.8),
padding: EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'You rolled a $diceRoll',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: rollDice,
style: ElevatedButton.styleFrom(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child: Text(
'Throw the Dice',
style: TextStyle(fontSize: 20),
),
),
],
),
),
),
],
),
);
},
),
);
}
}

Q #8
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp(
home: const MobileForm(),
debugShowCheckedModeBanner: false,
);
}
}

class MobileForm extends StatefulWidget {

const MobileForm({Key? key}) : super(key: key);

@override
_MobileFormState createState() => _MobileFormState();
}

class _MobileFormState extends State<MobileForm> {

String _gender = "Male";
String _selectedCountry = "";
bool _isPhy = false;
bool _isChem = false;
bool _isBio = false;

@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Center(
child: Container(
width: 350,
padding: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Email Section
const Text("Email"),
const SizedBox(height: 5),
TextField(
decoration: InputDecoration(
hintText: "30 chars max",
counterText: "", // Removes the length counter
border: OutlineInputBorder(),
),
maxLength: 30,
style: const TextStyle(fontSize: 14),
),
const SizedBox(height: 10),

// Name Section
const Text("Name"),
const SizedBox(height: 5),
TextField(
decoration: InputDecoration(
hintText: "50 chars max",
counterText: "",
border: OutlineInputBorder(),
),
maxLength: 50,
style: const TextStyle(fontSize: 14),
),
const SizedBox(height: 10),

// Gender Section
const Text("Gender"),
Row(
children: [
Radio(
value: "Male",
groupValue: _gender,
onChanged: (value) {
setState(() {
_gender = value.toString();
});
},
),
const Text("Male"),
const SizedBox(width: 20),
Radio(
value: "Female",
groupValue: _gender,
onChanged: (value) {
setState(() {
_gender = value.toString();
});
},
),
const Text("Female"),
],
),
const SizedBox(height: 10),

// Country Dropdown Section

const Text("Country"),
const SizedBox(height: 5),
Container(
height: 40,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
isExpanded: true,
items: const [
DropdownMenuItem(value: "", child: Text("Select Country")),
DropdownMenuItem(value: "Pakistan", child: Text("Pakistan")),
DropdownMenuItem(value: "USA", child: Text("USA")),
DropdownMenuItem(value: "India", child: Text("India")),
],
value: _selectedCountry,
onChanged: (value) {
setState(() {
_selectedCountry = value!;
});
},
),
),
),
const SizedBox(height: 10),

// Subjects Section
const Text("Subjects"),
Row(
children: [
Checkbox(
value: _isPhy,
onChanged: (value) {
setState(() {
_isPhy = value!;
});
},
),
const Text("Phy"),
Checkbox(
value: _isChem,
onChanged: (value) {
setState(() {
_isChem = value!;
});
},
),
const Text("Chem"),
Checkbox(
value: _isBio,
onChanged: (value) {
setState(() {
_isBio = value!;
});
},
),
const Text("Bio"),
],
),
const SizedBox(height: 10),

// Skills Section
const Text("Skills"),
Container(
height: 80,
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
),
child: const Text("C++\nJava\nJavascript\nC#"),
),
const SizedBox(height: 10),

// Address Section
const Text("Address"),
const SizedBox(height: 5),
SizedBox(
height: 40,
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
maxLines: 1,
),
),
const SizedBox(height: 20),

// Submit Button
Center(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey,
minimumSize: const Size(100, 40),
),
child: const Text("Submit", style: TextStyle(color: Colors.white)),
),
),
],
),
),
),
),
),
);
}
}
Q #9
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: TabletLayout(),
);
}
}

class TabletLayout extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 700,
height: 472, // Adjusted the height to give enough space
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(color: Colors.blue),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Row 1: Email and Name
_buildRow(
[
_buildColumnWithField("Email", "30 chars max"),
_buildVerticalLine(),
_buildColumnWithField("Name", "50 chars max"),
],
),
Divider(thickness: 1, color: Colors.blue), // Line after Row 1
SizedBox(height: 10),

// Row 2: Gender and Country

_buildRow(
[
_buildGenderSection(),
_buildVerticalLine(),
_buildDropdownField("Country"),
],
),
Divider(thickness: 1, color: Colors.blue), // Line after Row 2
SizedBox(height: 10),

// Row 3: Subjects and Address

_buildRow(
[
_buildSubjectsSection(),
_buildVerticalLine(),
_buildColumnWithField("Address", "", height: 80),
],
),
Divider(thickness: 1, color: Colors.blue), // Line after Row 3
SizedBox(height: 10),

// Row 4: Skills and Submit Button

_buildRow(
[
_buildSkillsBox(),
Spacer(), // Adds flexible space between elements
_buildSubmitButton(),
],
),
],
),
),
),
);
}

Widget _buildRow(List<Widget> children) {

return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: children,
);
}

Widget _buildColumnWithField(String label, String hint, {double height = 40}) {

return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(height: 5),
Container(
height: height,
child: TextField(
decoration: InputDecoration(
hintText: hint,
border: OutlineInputBorder(),
isDense: true,
contentPadding: EdgeInsets.symmetric(horizontal: 10),
),
),
),
],
),
);
}

Widget _buildVerticalLine() {
return Container(
width: 1,
color: Colors.grey,
margin: EdgeInsets.symmetric(horizontal: 10),
);
}

Widget _buildGenderSection() {
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Gender", style: TextStyle(fontWeight: FontWeight.bold)),
Row(
children: [
_radioButton("Male"),
SizedBox(width: 10),
_radioButton("Female"),
],
),
],
),
);
}

Widget _radioButton(String title) {

return Row(
children: [
Radio(value: title, groupValue: null, onChanged: (value) {}),
Text(title),
],
);
}
Widget _buildDropdownField(String label) {
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: TextStyle(fontWeight: FontWeight.bold)),
SizedBox(height: 5),
Container(
height: 40,
padding: EdgeInsets.symmetric(horizontal: 5),
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.circular(5),
),
child: DropdownButtonHideUnderline(
child: DropdownButton<String>(
items: [
DropdownMenuItem(child: Text("Option 1"), value: "1"),
DropdownMenuItem(child: Text("Option 2"), value: "2"),
],
onChanged: (value) {},
hint: Text("Select"),
isExpanded: true,
),
),
),
],
),
);
}

Widget _buildSubjectsSection() {
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Subjects", style: TextStyle(fontWeight: FontWeight.bold)),
Row(
children: [
_checkbox("Phy"),
SizedBox(width: 10),
_checkbox("Chem"),
SizedBox(width: 10),
_checkbox("Bio"),
],
),
],
),
);
}

Widget _checkbox(String title) {

return Row(
children: [
Checkbox(value: false, onChanged: (value) {}),
Text(title),
],
);
}

Widget _buildSkillsBox() {
return Container(
width: 150,
height: 120,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
),
padding: EdgeInsets.all(10),
child: Text(
"C++\nJava\nJavascript\nC#",
style: TextStyle(fontSize: 14),
),
);
}

Widget _buildSubmitButton() {
return ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.grey[400],
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
),
onPressed: () {},
child: Text("Submit"),
);
}
}