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 :

1. Figma
2. 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.

1. 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

2. 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

Hasil running setup aplikasi

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),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Jalankan aplikasi lagi

Penjelasan code:

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 🙂