Membuat sebuah aplikasi akan lebih bagus bila aplikasi tersebut sesuai dengan UI desain. Apakah itu UI ? UI adalah singkatan dari User Interface sebuah tampilan visual desain. Bagaimanakah membuat aplikasi yang sesuai dengan UI desain ? Mari kita bahas di sini secara detail dan lengkap dengan studi kasus aplikasi Mobile / Smarthphone iOS dan Android dengan Flutter.
Tool yang akan digunakan :
- Figma
- Flutter
Ini merupakan contoh desain aplikasi mobile yang dibuat dari Figma, link desain figma bisa di lihat di link ini.
Langkah selanjutnya bagaimana menerapkan nya di aplikasi mobile ?
Install terlebih dahulu Flutter yang bisa di download
Install juga Visual Studio Code untuk editor di download
Pastikan tool sudah terinstall semua baik Flutter maupun Visual Studio Code sudah jalan dengan baik.
- Buka Figma Desain
Kita akan membuat Login Form, kita bisa mengetahui ukuran, color, font yang digunakan dsb secara detail.
Di desain terlihat ukuran padding kiri 119, padding kanan 119 dan padding top 161
Di desain terlihat juga jenis font, color yang digunakan
- Buka Visual Studio Code
Selanjutnya kita implementasi desain Login Form ke aplikasi mobile menggunakan Flutter.
Buat projek / aplikasi baru dengan cara :
Klik menu View -> Command Pallete… ketikkan flutter
Pilih Flutter: New Project
Kemudian beri nama aplikasi misal : prototype_app, tekan enter
Simpan dalam sebuah Folder / Directory
Jika sudah maka akan tampil setup aplikasi yang telah kita buat seperti berikut :
Jalankan aplikasi dengan cara :
Klik menu Run -> Pilih Start Debugging atau dengan menekan Tombol F5 pada keyboard
Selanjutkan kita akan menyesuaikan dengan desain yang ada di figma
Ubah code sebagai berikut :
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ Padding( padding: const EdgeInsets.only(left: 119, right: 119, top: 161), child: Text( 'PROTOTYPE', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Color(0xFF219653), ), ), ), ], ), ); } }
Lanjutkan hingga sesuai desain hingga tampilan seperti berikut :
Code lengkap :
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( body: Column( children: <Widget>[ Padding( padding: const EdgeInsets.only(left: 119, right: 119, top: 161), child: Text( 'PROTOTYPE', style: TextStyle( fontSize: 24, fontWeight: FontWeight.bold, color: Color(0xFF219653), ), ), ), Padding( padding: const EdgeInsets.only(left: 20, right: 20, top: 73), child: TextField( decoration: InputDecoration( hintText: 'Email', hintStyle: TextStyle( fontSize: 14, fontWeight: FontWeight.bold, color: Color(0xFF4F4F4F), ), enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Color(0xFF219653)), ), contentPadding: EdgeInsets.only(top: 10), ), ), ), Padding( padding: const EdgeInsets.only(left: 20, right: 20), child: TextField( decoration: InputDecoration( hintText: 'Password', hintStyle: TextStyle( fontSize: 14, fontWeight: FontWeight.bold, color: Color(0xFF4F4F4F), ), enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Color(0xFF219653)), ), contentPadding: EdgeInsets.only(top: 20), suffixIcon: Padding( padding: const EdgeInsets.only(top: 10), child: Icon(Icons.visibility_off, color: Color(0xFF4F4F4F)), ), ), ), ), SizedBox(height: 32), Container( decoration: BoxDecoration( color: Color(0xFF27AE60), borderRadius: BorderRadius.circular(5), boxShadow: [ BoxShadow( color: Color.fromRGBO(0, 0, 0, 0.25), blurRadius: 2, spreadRadius: 1, offset: Offset(0, 2), ), ], ), child: Padding( padding: const EdgeInsets.only( left: 150, right: 150, top: 12, bottom: 12, ), child: Text( 'Login', style: TextStyle( color: Color(0xFFF2F2F2), fontSize: 14, fontWeight: FontWeight.bold, ), ), ), ), ], ), ); } }
Untuk hasil build apk ataupun ipa bisa dilihat di folder Build.
Source code lengkap bisa kunjungi di github prototype-app.
Sekian dan terima kasih.
Happy coding 🙂
I’m a result mobile engineer, as well as deep understanding of digital systems.