Scribd
Upload
16 views12 pages

Desain UI Aplikasi Kalkulator dan Login

The document outlines a mid-semester examination project for a multi-platform programming course, focusing on the design of a simple calculator and a login interface using Flutter. It includes detailed code snippets for both applications, showcasing UI elements such as input fields, buttons, and app bars. The project is prepared by Siti Nazwa Amanda under the guidance of Depandi Enda at Politeknik Negeri Bengkalis in 2025.

Uploaded by

Nazwa Amanda
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views12 pages

Desain UI Aplikasi Kalkulator dan Login

The document outlines a mid-semester examination project for a multi-platform programming course, focusing on the design of a simple calculator and a login interface using Flutter. It includes detailed code snippets for both applications, showcasing UI elements such as input fields, buttons, and app bars. The project is prepared by Siti Nazwa Amanda under the guidance of Depandi Enda at Politeknik Negeri Bengkalis in 2025.

Uploaded by

Nazwa Amanda
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

UJIAN TENGAH SEMESTER

PEMROGRAMAN MULTIPLATFORM

Disusun Oleh :

Siti Nazwa Amanda (6304221484)

Dosen Pengampu:
Depandi Enda, [Link]., [Link].

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/[Link]';

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

class KalkulatorApp extends StatelessWidget {


const KalkulatorApp({[Link]});

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

class KalkulatorUTS extends StatefulWidget {


const KalkulatorUTS({[Link]});

@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 [Link](vertical: 8.0),
child: Column(
crossAxisAlignment: [Link],
children: [
Text(
label,
style: const TextStyle(fontWeight:
[Link], fontSize: 16),
),
const SizedBox(height: 6),
TextField(
controller: controller,
keyboardType: const
[Link](decimal: true),
decoration: const InputDecoration(
border: OutlineInputBorder(),
contentPadding: [Link](
horizontal: 20,
vertical: 20,
),
isDense: true,
),
),
],
),
);
}
Widget _buildOperationButton(String op, double
buttonSize) {
return SizedBox(
width: buttonSize,
height: buttonSize,
child: ElevatedButton(
style: [Link](
shape: RoundedRectangleBorder(borderRadius:
[Link](8)),
),
onPressed: () {}, // Empty onPressed
child: Text(op, style: const TextStyle(fontSize:
25)),
),
);
}
@override
Widget build(BuildContext context) {
final screenWidth = [Link](context).[Link];
final buttonSize = screenWidth < 500 ? screenWidth *
0.2 : 72.0;

return Scaffold(
backgroundColor: const [Link](255, 255, 255,
255),
appBar: PreferredSize(
preferredSize: const [Link](60),
child: AppBar(
backgroundColor: const [Link](255, 255,
255, 255),
elevation: 0,
centerTitle: true,
title: const Text(
'KALKULATOR UTS',
style: TextStyle(
color: [Link],
fontWeight: [Link],
fontSize: 25,
),
),
bottom: const PreferredSize(
preferredSize: [Link](2),
child: Divider(
color: [Link](255, 24, 143, 1),
height: 2,
thickness: 2,
),
),
),
),
body: LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
padding: const [Link](16),
child: Column(
crossAxisAlignment:
[Link],
children: [
_buildInputField('Nilai 1', controller1),

_buildInputField('Nilai 2', controller2),


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

Tampilan Hasil Running


2. Design Tampilan Login

Kode flutter
import 'package:flutter/[Link]';

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

class MyApp extends StatelessWidget {


const MyApp({[Link]});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Login App',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: [Link],
inputDecorationTheme: InputDecorationTheme(
border: OutlineInputBorder(borderRadius:
[Link](4)),
contentPadding: const [Link](
horizontal: 12,
vertical: 12,
),
),
),
home: const LoginScreen(),
);
}
}

class LoginScreen extends StatelessWidget {


const LoginScreen({[Link]});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: const [Link](70),
child: AppBar(
backgroundColor: const [Link](255, 255,
174, 231),
elevation: 0,
centerTitle: true,
title: const Text(
'LOGIN',
style: TextStyle(
color: [Link],
fontWeight: [Link],
fontSize: 40,
),
),
bottom: PreferredSize(
preferredSize: const [Link](2),
child: Container(color: [Link], height:
2),
),
),
),
body: Center(
child: SingleChildScrollView(
padding: const [Link](24),
child: Column(
mainAxisSize: [Link],
children: [
const SizedBox(height: 50),

// Gambar profil
Container(
width: 150,
height: 150,
decoration: BoxDecoration(
shape: [Link],
border: [Link](
color: const [Link](255, 190,
1, 1),
width: 2,
),
image: const DecorationImage(
image:
AssetImage('images/[Link]'),
fit: [Link],
),
),
),
const SizedBox(height: 100),

// Username Row
Row(
crossAxisAlignment:
[Link],
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:
[Link],
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:
[Link],
children: [
TextButton(
onPressed: () {
// Reset password
},
child: Row(
mainAxisSize: [Link],
children: [
const Text(
'Lupa Password? Reset',
style: TextStyle(
decoration:
[Link],
),
),
const SizedBox(width: 8),
[Link]('images/[Link]',
width: 18, height: 18),
],
),
),
TextButton(
onPressed: () {
// Daftar
},
child: const Text(
'Tidak Punya Akun? Silahkan Daftar',
style: TextStyle(decoration:
[Link]),
),
),
],
),

const SizedBox(height: 16),

// Tombol Submit
ElevatedButton(
onPressed: () {
// Login handler
},
style: [Link](
padding: const [Link](
vertical: 16,
horizontal: 48,
),
backgroundColor: const
[Link](255, 255, 174, 231),
foregroundColor: [Link],
side: const BorderSide(color:
[Link]),
shape: RoundedRectangleBorder(
borderRadius:
[Link](4),
),
),
child: const Text('Submit'),
),
],
),
),
),
);
}
}
Tampilan Hasil Running

You might also like