TUGAS 1 FLUTTER

PEMROGRAMAN MOBILE LANJUT

MUHAMMAD HIDZYAMI 5170411338

ARJUNO TOMMY WICAKSONO 5170411360
VIKE CINDY AYU PRIBADI 5170411340

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI DAN ELEKTRO
UNIVERSITAS TEKNOLOGI YOGYAKARTA
 Landing page
Membuat sebuah landing page menggunakan framework flutter dibutuhkan beberapa langkah
sebagai berikut:

Buka aplikasi android studio lalu pilih new flutter project, flutter application lalu next.

Pertama-tama buat folder baru pada directory lib untuk memisahkan halaman screen dengan
halaman main. Kami beri nama widgets. Buat fil seperti dibawah

source code yang terdapat pada main.dart:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'Widgets/FormCard.dart';
import 'Widgets/SocialIcons.dart';
import 'CustomIcons.dart';

void main() => runApp(MaterialApp(

home: MyApp(),
debugShowCheckedModeBanner: false,
 ));

class MyApp extends StatefulWidget {

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

class _MyAppState extends State<MyApp> {

bool _isSelected = false;

void _radio() {
setState(() {
_isSelected = !_isSelected;
});
}

Widget radioButton(bool isSelected) => Container(

width: 16.0,
height: 16.0,
padding: EdgeInsets.all(2.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 2.0, color: Colors.black)),
child: isSelected
? Container(
width: double.infinity,
height: double.infinity,
decoration:
BoxDecoration(shape: BoxShape.circle, color:
Colors.black),
)
: Container(),
);

Widget horizontalLine() => Padding(

padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
width: ScreenUtil.getInstance().setWidth(120),
height: 1.0,
color: Colors.black26.withOpacity(.2),
),
);

@override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
ScreenUtil.instance =
ScreenUtil(width: 750, height: 1334, allowFontScaling: true);
return new Scaffold(
backgroundColor: Colors.white,
resizeToAvoidBottomPadding: true,
body: Stack(
fit: StackFit.expand,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
 Padding(
padding: EdgeInsets.only(top: 10.0),
),
Expanded(
child: Container(),
),
Image.asset("assets/image_02.png")
],
),
SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(left: 28.0, right: 28.0, top: 60.0),
child: Column(
children: <Widget>[
Row(
komponen yang mendukung di dalamnya ada Logo uty. Caranya adalah copy file jpg yang ada di
dalam directory laptop kita ke dalam folder asset

children: <Widget>[
Image.asset(
"assets/logo.png",
width: ScreenUtil.getInstance().setWidth(110),
height: ScreenUtil.getInstance().setHeight(110),
),
Text("UTY HEBAT",
style: TextStyle(
fontFamily: "Poppins-Bold",
fontSize: ScreenUtil.getInstance().setSp(30),
letterSpacing: .6,
fontWeight: FontWeight.bold))
],
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(180),
),
 FormCard(),
SizedBox(height: ScreenUtil.getInstance().setHeight(40)),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
SizedBox(
width: 12.0,
),
GestureDetector(
onTap: _radio,
child: radioButton(_isSelected),
),
SizedBox(
width: 8.0,
),
Text("Remember me",
style: TextStyle(
fontSize: 12, fontFamily: "Poppins-
Medium"))
],
),
InkWell(
child: Container(
width: ScreenUtil.getInstance().setWidth(330),
height: ScreenUtil.getInstance().setHeight(100),
decoration: BoxDecoration(
gradient: LinearGradient(colors: [
Color(0xFF17ead9),
Color(0xFF6078ea)
]),
borderRadius: BorderRadius.circular(6.0),
boxShadow: [
BoxShadow(
color: Color(0xFF6078ea).withOpacity(.3),
offset: Offset(0.0, 8.0),
blurRadius: 8.0)
]),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () {},
child: Center(
child: Text("SIGNIN",
style: TextStyle(
color: Colors.white,
fontFamily: "Poppins-Bold",
fontSize: 18,
letterSpacing: 1.0)),
),
),
),
),
)
],
),
 SizedBox(
height: ScreenUtil.getInstance().setHeight(40),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(30),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"New User? ",
style: TextStyle(fontFamily: "Poppins-Medium"),
),
InkWell(
onTap: () {},
child: Text("SignUp",
style: TextStyle(
color: Color(0xFF5d74e3),
fontFamily: "Poppins-Bold")),
)
],
)
],
),
),
)
],
),
);
}
}

Source code di dalam FormCard.dart:

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

class FormCard extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new Container(
width: double.infinity,
height: ScreenUtil.getInstance().setHeight(500),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 15.0),
blurRadius: 15.0),
BoxShadow(
color: Colors.black12,
offset: Offset(0.0, -10.0),
blurRadius: 10.0),
 ]),
child: Padding(
padding: EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Login",
style: TextStyle(
fontSize: ScreenUtil.getInstance().setSp(45),
fontFamily: "Poppins-Bold",
letterSpacing: .6)),
SizedBox(
height: ScreenUtil.getInstance().setHeight(30),
),
Text("Username",
style: TextStyle(
fontFamily: "Poppins-Medium",
fontSize: ScreenUtil.getInstance().setSp(26))),
TextField(
decoration: InputDecoration(
hintText: "username",
hintStyle: TextStyle(color: Colors.grey, fontSize: 12.0)),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(30),
),
Text("PassWord",
style: TextStyle(
fontFamily: "Poppins-Medium",
fontSize: ScreenUtil.getInstance().setSp(26))),
TextField(
obscureText: true,
decoration: InputDecoration(
hintText: "Password",
hintStyle: TextStyle(color: Colors.grey, fontSize: 12.0)),
),
SizedBox(
height: ScreenUtil.getInstance().setHeight(35),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Text(
"Forgot Password?",
style: TextStyle(
color: Colors.blue,
fontFamily: "Poppins-Medium",
fontSize: ScreenUtil.getInstance().setSp(28)),
)
],
)
],
),
),
);
}
}
Hasil running program sebagai berikut: