UJIAN TENGAH SEMESTER

PEMROGRAMAN MULTIPLATFORM

Disusun Oleh :

Siti Nazwa Amanda (6304221484)

Dosen Pengampu:
Depandi Enda, M.Kom., S.ST.

PROGRAM STUDI D-IV REKAYASA PERANGKAT LUNAK

JURUSAN TEKNIK INFORMATIKA
POLITEKNIK NEGERI BENGKALIS
2025
 Design UI Aplikasi Sederhana

1. Design Tampilan Kalkulator

Kode flutter
import 'package:flutter/material.dart';

void main() => runApp(const KalkulatorApp());

class KalkulatorApp extends StatelessWidget {

const KalkulatorApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Kalkulator UTS',
theme: ThemeData(
fontFamily: 'PlayfairDisplay',
primarySwatch: Colors.green,
useMaterial3: false,
),
debugShowCheckedModeBanner: false,
home: const KalkulatorUTS(),
);
}
}

class KalkulatorUTS extends StatefulWidget {

const KalkulatorUTS({super.key});

@override
State<KalkulatorUTS> createState() =>
_KalkulatorUTSState();
}

class _KalkulatorUTSState extends State<KalkulatorUTS> {

final TextEditingController controller1 =
TextEditingController();
 final TextEditingController controller2 =
TextEditingController();
String hasil = '';

Widget _buildInputField(String label,

TextEditingController controller) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
label,
style: const TextStyle(fontWeight:
FontWeight.bold, fontSize: 16),
),
const SizedBox(height: 6),
TextField(
controller: controller,
keyboardType: const
TextInputType.numberWithOptions(decimal: true),
decoration: const InputDecoration(
border: OutlineInputBorder(),
contentPadding: EdgeInsets.symmetric(
horizontal: 20,
vertical: 20,
),
isDense: true,
),
),
],
),
);
}
Widget _buildOperationButton(String op, double
buttonSize) {
return SizedBox(
width: buttonSize,
height: buttonSize,
 child: ElevatedButton(
style: ElevatedButton.styleFrom(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(8)),
),
onPressed: () {}, // Empty onPressed
child: Text(op, style: const TextStyle(fontSize:
25)),
),
);
}
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
final buttonSize = screenWidth < 500 ? screenWidth *
0.2 : 72.0;

return Scaffold(
backgroundColor: const Color.fromARGB(255, 255, 255,
255),
appBar: PreferredSize(
preferredSize: const Size.fromHeight(60),
child: AppBar(
backgroundColor: const Color.fromARGB(255, 255,
255, 255),
elevation: 0,
centerTitle: true,
title: const Text(
'KALKULATOR UTS',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 25,
),
),
bottom: const PreferredSize(
preferredSize: Size.fromHeight(2),
child: Divider(
color: Color.fromARGB(255, 24, 143, 1),
 height: 2,
thickness: 2,
),
),
),
),
body: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.stretch,
children: [
_buildInputField('Nilai 1', controller1),

_buildInputField('Nilai 2', controller2),

const SizedBox(height: 16),
Wrap(
spacing: 12,
runSpacing: 12,
alignment: WrapAlignment.center,
children:
['+', '-', '*', '/', '%', '^', '~/']
.map((op) =>
_buildOperationButton(op, buttonSize))
.toList(),
),
const SizedBox(height: 24),
Padding(
padding: EdgeInsets.symmetric(
horizontal: screenWidth < 400 ? 8.0 :
16.0,
),
child: const Text(
'Hasil: 4 + 6 = 8 ',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
 color: Color.fromARGB(255, 0, 0, 0),
),
textAlign: TextAlign.center,
),
),
],
),
);
},
),
);
}
}

Tampilan Hasil Running

2. Design Tampilan Login

Kode flutter
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(borderRadius:
BorderRadius.circular(4)),
contentPadding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 12,
),
),
),
home: const LoginScreen(),
);
}
}

class LoginScreen extends StatelessWidget {

const LoginScreen({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
 appBar: PreferredSize(
preferredSize: const Size.fromHeight(70),
child: AppBar(
backgroundColor: const Color.fromARGB(255, 255,
174, 231),
elevation: 0,
centerTitle: true,
title: const Text(
'LOGIN',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 40,
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(2),
child: Container(color: Colors.black, height:
2),
),
),
),
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: 50),

// Gambar profil
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: const Color.fromARGB(255, 190,
1, 1),
 width: 2,
),
image: const DecorationImage(
image:
AssetImage('images/user2.png'),
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 100),

// Username Row
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
const Text('Username', style:
TextStyle(fontSize: 16)),
const SizedBox(width: 16),
Expanded(
child: TextField(
decoration: const
InputDecoration(hintText: ''),
),
),
],
),
const SizedBox(height: 16),

// Password Row
Row(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
const Text('Password', style:
TextStyle(fontSize: 16)),
const SizedBox(width: 22),
Expanded(
child: TextField(
 obscureText: true,
decoration: const
InputDecoration(hintText: ''),
),
),
],
),
const SizedBox(height: 16),

// Lupa Password dan Daftar

Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
TextButton(
onPressed: () {
// Reset password
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'Lupa Password? Reset',
style: TextStyle(
decoration:
TextDecoration.underline,
),
),
const SizedBox(width: 8),
Image.asset('images/icon.png',
width: 18, height: 18),
],
),
),
TextButton(
onPressed: () {
// Daftar
},
child: const Text(
 'Tidak Punya Akun? Silahkan Daftar',
style: TextStyle(decoration:
TextDecoration.underline),
),
),
],
),

const SizedBox(height: 16),

// Tombol Submit
ElevatedButton(
onPressed: () {
// Login handler
},
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(
vertical: 16,
horizontal: 48,
),
backgroundColor: const
Color.fromARGB(255, 255, 174, 231),
foregroundColor: Colors.black,
side: const BorderSide(color:
Colors.black),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(4),
),
),
child: const Text('Submit'),
),
],
),
),
),
);
}
}
Tampilan Hasil Running