LAPORAN TUGAS MOBILE

MINGGU KE 4

DISUSUN OLEH :
NOVIA AL GOFUR ZEIN (362155401178)

PROGRAM STUDI
D4 TEKNOLOGI REKAYASA PERANGKAT LUNAK
POLITEKNIK NEGERI BANYUWANGI
2022
 DASAR TEORI
Dasar Teori Flutter adalah sebuah framework open-source yang dikembangkanolehGoogle untuk
membangun antarmuka (user interface/UI) aplikasi AndroiddaniOS. Rilis pada Juni 2018, Flutter ditulis
dengan menggunakan bahasa pemrograman Dart. Aplikasi yang dibuat dengan menggunakan
FrameworkFlutter dapat di build ke platform android dan iOS. Seperti diketahui, ketika ingin membangun
sebuah aplikasi iOS, maka harus menulis kode Swift/Objective C dan menggunakan iOS Development
Environment. Begitu pun ketika membangun sebuah aplikasi Android yang harus menuliskan kode dengan
bahasa pemograman Java atau Kotlin beserta penggunaan Android Development Environment. Ketika
menggunakan Flutter, developer hanya memerlukan satu bahasa pemograman yaitu Dart dan satu basis
code untuk membuat aplikasi di platform berbeda. Dart sendiri merupakan bahasa yang diciptakan oleh
Google pada tahun 2011 dan berfokus pada pengembangan frontend sehingga bisa dimanfaatkan untuk
membuat aplikasi mobile dan web. Di dalam pembuatan Login, Register , Dan Home page disini saya
menggunakan widget – widget sebagai berikut ;

1. Container : Widget container adalah sebuah widget yang bertugas sebagai pembungkus dari widget
lain. Dinamakan container karena nantinya, ia bisa memiliki properti-properti bingkai seperti: padding,
margin, border, border radius, box shawdow, dll.

2. Text Widget : aplikasi widget untuk menambahkan teks di layar beranda. Tambahkan beberapa teks di
layar beranda dengan font keren & banyak lagi opsi untuk menjadikan layar beranda indah dan
dipersonalisasi.

3. Text Field Widget : alah satu input pengguna yang umumnya pada aplikasi mobile dan Widget
Textfield menerima input berupa text yang berasal dari Keyboard. InputDecoration : property ini
digunakan ketika kita ingin membuat sebuah text petunjuk (hintText) pada TextField.

4. Elevated Button : Mengatur ukuran button.

5. Navigator Fuction : Perpindahan antar page.

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

import 'main.dart';

void main() {
runApp(const MaterialApp(home: Login()));
}

class Login extends StatelessWidget {

const Login({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
 return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const LoginPage(),
);
}
}

class LoginPage extends StatefulWidget {

const LoginPage({super.key});

@override
State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Log In Page'),
centerTitle: true,
backgroundColor: Color.fromARGB(255, 20, 73, 197),
),
body: Center(
child: Column(
children: [
const SizedBox(
height: 5.0,
),
Container(
child: const TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Username',
),
),
),
const SizedBox(
height: 10.0,
),
 Container(
child: const TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
),
),
const SizedBox(height: 10.0),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Color.fromARGB(255, 23, 65, 189),
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
return const HomePage();
}),
);
},
child: const Text('Confirm'),
),
const SizedBox(height: 30.0),
Image.asset('images/welcome.png'),
],
),
),
);
}
}

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

import 'login_page.dart';

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

class Register extends StatelessWidget {

const Register({super.key});
 // This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const RegisterPage(),
);
}
}

class RegisterPage extends StatefulWidget {

const RegisterPage({super.key});

@override
State<RegisterPage> createState() => _RegisterPageState();
}

class _RegisterPageState extends State<RegisterPage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Register Page'),
centerTitle: true,
backgroundColor: Colors.redAccent,
),
body: Center(
child: Column(
children: [
const SizedBox(
height: 5.0,
),
Container(
child: const TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Username',
),
),
),
 const SizedBox(
height: 10.0,
),
Container(
child: const TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
),
),
),
const SizedBox(height: 10.0),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.redAccent,
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) {
return const LoginPage();
}),
);
},
child: const Text('Confirm & Log In'),
),
const SizedBox(height: 30.0),
Image.asset('images/welcome.png'),
],
),
),
);
}
}

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

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

class MyApp extends StatelessWidget {

 const MyApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: const HomePage(),
);
}
}

class HomePage extends StatefulWidget {

const HomePage({super.key});

@override
State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Home'),
centerTitle: true,
backgroundColor: Colors.redAccent,
),
body: Center(
child: Image.asset('images/welcome.png'),
),
);
}
}

// ElevatedButton(
// style: ElevatedButton.styleFrom(
// backgroundColor: Colors.redAccent,
// ),
// onPressed: () {},
// child: const Text('Click'),
// ),
 KESIMPULAN

Flutter adalah sebuah framework open-source yang dikembangkanolehGoogle untuk membangun

antarmuka aplikasi AndroiddaniOS. Rilis pada Juni 2018, Flutter ditulis dengan menggunakan bahasa
pemrograman Dart. Aplikasi yang dibuat dengan menggunakan FrameworkFlutter dapat di build ke
platform android dan iOS. Seperti diketahui, ketika ingin membangun sebuah aplikasi iOS, maka harus
menulis kode Swift/Objective C dan menggunakan iOS Development Environment. Begitu pun ketika
membangun sebuah aplikasi Android yang harus menuliskan kode dengan bahasa pemograman Java atau
Kotlin beserta penggunaan Android Development Environment. Ketika menggunakan Flutter, developer
hanya memerlukan satu bahasa pemograman yaitu Dart dan satu basis code untuk membuat aplikasi di
platform berbeda. Dart sendiri merupakan bahasa yang diciptakan oleh Google pada tahun 2011 dan
berfokus pada pengembangan front-end sehingga bisa dimanfaatkan untuk membuat aplikasi mobile dan
web.