Tips All

Hello people with the spirit of learning! Banyak sekali nih hal-hal yang bisa kita lakukan untuk mempercantik tampilan aplikasi Flutter yang ingin kita buat. Nah, kali ini kita akan belajar gimana caranya menambahkan icon atau gambar agar aplikasi yang kita buat lebih menarik. Yuk langsung aja ikutin step-step di bawah ini yah! Step 1: Membuat folder aplikasi yang ingin kita buat pada Visual Studio Code. Siapkan folder project flutter terlebih dahulu.Jika sudah, tampilan awal folder akan seperti gambar di atas ini. Step 2: Menyiapkan Icon atau Gambar Kemudian, kita perlu menyiapkan gambar atau icon yang ingin kita import atau masukkan ke dalam projek Flutter yang sudah kita buat pada step pertama. Pada artikel kali ini, kita akan menggunakan icon camera seperti di atas ini. Step 3: Menambahkan folder assets pada project Flutter. Untuk dapat memasukkan gambar camera tersebut, kita perlu menambahkan folder bernama "assets" pada project Flutter yang sudah kita buat pada step pertama diatas. Jika sudah, struktur folder project kita akan menjadi seperti gambar di atas ini. Step 4: Memasukkan gambar atau icon ke dalam folder assets. Jika folder assets sudah ada, kita perlu untuk memasukan icon camera ke dalam folder assets. Jika sudah dimasukkan, maka struktur folder kita akan tampak seperti gambar di atas ini. Step 5: Edit file pubspec.yaml Untuk dapat mengenerate gambar assets yang sudah kita masukkan, kita perlu edit file pubspec.yaml dan di sesuaikan dengan directory assets gambar menjadi contoh gambar di atas ini. assets/camera_illustration.png atau cukup dengan mengganti dengan assets/ Step 6: Proses code. Jika step-step di atas sudah berhasil kita buat, maka langkah terakhir adalah proses koding. Untuk dapat memunculkan gambar pada aplikasi kita, kita dapat menggunakan widget Image.asset seperti contoh di bawah ini. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child: Padding( padding: EdgeInsets.only( top: 40, ), child: Center( child: Column( children: [ Text( 'Import Assets ke Project Flutter', style: TextStyle(fontSize: 20), ), SizedBox(height: 5), Image.asset( 'assets/camera_Illustration.png', height: 350, width: 350, ) ], ), ), ), ), ), ); } } Step 7: DONE! Jika sudah selesai, tampilan awal aplikasi kita akan menjadi seperti gambar di atas ini. Voila! Sekarang kita sudah bisa nih mempercantik tampilan aplikasi kita dan pastikan ngga ada step yang terlewat yah.  Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Apps Development - Membuat Aplikasi Cari Kos. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya. Selamat mencoba dan selamat belajar!

Hello people with the spirit of learning! Kali ini kita akan mendesign tampilan Login UI Mobile Sederhana melalui Figma. Mari kita coba! Step 1: Menyiapkan Referensi Sebelum kita memulai mendesign suatu tampilan, pasti kita perlu mencari inspirasi terlebih dahulu. seperti layout, warna, Illustration, icon dan lainnya. Biasanya saya mencari referensi di Pixel.buildwithangga.com dan dribbble.com Step 2:  Membuat Frame (Artboard) Untuk membuat framenya, bisa kita tekan huruf “F” pada keyboard, Lalu pilih ukuran yang diinginkan. Biasanya saya menggunakan ukuran iphone 11 Pro (375 x 812). Step 3: Membuat Headline Setelah berhasil membuat Frame Langsung saja kita buat Title teks agar pengguna bisa mengetahui bahwa mereka sedang berada di Login Page.  Pertama kita tekan huruf “T” pada keyboard lalu klik di area Frame.selanjutnya langsung saja kita ketik teksnya “Welcome Back,”. lalu kasih margin 30px dari kiri dan margin 30px dari atas.Setelah itu, kita atur terlebih dahulu typeface, jenis font, ukuran fontnya dan warnanyaKemudian untuk membuat subtitlenya, kita copy saja bagian teks titlenya. lalu kita ubah caption teksnya dan juga teks propertiesnya. jangan lupa kasih margin 6px dari title teks dan margin 30px dari kiri. Step 4: Menambahkan Ilustrasi Oke langsung saja kita tambahkan ilustrasi agar lebih menarik. lalu Kasih margin 30px dari bawah Headline dan margin 30px dari kiri dan juga kanan. oiya Disini saya menggunakan illustration dari pixel.buildwithangga.com. Kita bisa mendownloadnya dari website tersebut. Step 5: Membuat Form Input Login Selanjutnya, mari kita membuat form input login pagenya. Pertama kita buat title teks “Email Address”, lalu kasih jarak 30px dari ilustrasiSetelah itu buatlah rectangle dengan menekan huruf “R” pada keyboard, lalu klik di area frame.Selanjutnya ubahlah Width dan Height rectangle tersebut menjadi 315 x 50 dan kasih corner radius 12. Jangan lupa kasih margin 6px dari teks “Email Address” dan margin kiri kanan 30pxKemudian ubahlah rectangle tersebut menjadi outline dengan cara menghapus Fillnya dan menambahkan stroke, Lalu beri warna light “9FADBC”.Setelah itu, tambahkan icon di dalam rectangle tadi lalu kasih padding 12px dari kiri dan 13px dari atas dan juga bawah. oiya disini saya menggunakan icon gratis buatan Alexander berikut ini linknya: https://www.figma.com/file/IQ2DGwDh2zWHb9bU4Hg9K9/Free-Basic-%26-Essentials-Icons-Set?node-id=0%3A1 (Pastikan Icon yang di copy seluruh grup iconnya).Selanjutnya tambahkan juga teks di dalam rectangle, lalu kasih padding 12px dari icon dan padding 14px dari atas dan bawahNah untuk membuat form input passwordnya. tinggal duplicate saja dengan cara tekan shortcut “Command + D” untuk pengguna Mac os dan “CTRL + D” untuk pengguna windows. Setelah di duplicate ubahlah caption tersebut dan kasih margin 30px dari form email address, seperti gambar diatas Step 6: Membuat Button CTA Forgot Password Oke selanjutnya mari kita buat button teks untuk forgot password. Caranya sangat mudah Pertama buatlah teks “Forgot Password” Lalu atur properties teks tersebut pada di gambar diatas ini. Setelah itu kasih margin 6px dari atas form input password dan margin 30px dari kanan Step 7: Membuat Button CTA Login Buatlah rectangle berukuran 315x50 lalu beri corner radius 12Buatlah rectangle berukuran 315x50Setelah itu beri jarak 30px dari teks “Forget password?” dan 30px dari kiri dan juga kananKemudian beri warna Biru “0079FB”Selanjutnya buatlah teks “Login” di dalam rectangle tersebut dengan padding 14px atas bawah dan padding 138px kiri kanan (Pastikan diatas layer rectangle tadi) Step 8: Membuat Button CTA Daftar akun Duplicate Button CTA “Forgot Password”Setelah itu ubah teks tersebut menjadi “Don’t have an account? Sign Up”Kemudian Bloklah teks “Don’t have an account? Sign Up” tersebutLalu ubahlah warna dan Jenis font seperti yang digambar (Pastikan “Don’t have an account?” dalam keaadan diblok)Selanjutnya kasih margin 30px dari bawah dan 90px dari kiri dan juga kanan Step 9: Finishing & Upload Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :)

Hello people with the spirit of learning! membuat wireframe secara cepat, kalian dapat menggunakan tools Whimsical yang bisa diakses melalui website. Oke langsung aja kita mulai. Step 1 : Kunjungi Website Whimsical Pertama, kunjungi website whimsical.com, setelah itu bisa daftarkan akun menggunakan Google mail atau membuat akun email baru pada whimsical. Step 2 : Halaman Utama Dashboard Setelah mendaftarkan akun dan juga masuk menggunakan akun yang telah terdaftar sebelumnya, kalian akan masuk ke bagian dashboard utamanya. Step 3 : Tambahkan Project Wireframe Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 4 : Menambahkan Frame Baru Berikutnya, untuk membuat sebuah frame baru, kalian bisa menekan F pada keyboard, atau pilih menu Add Frame lalu pilih ukuran frame yang ingin kalian pakai. Step 5 : Menambahkan Element Pada Frame Untuk menambahkan element atau objek pada tampilan wireframe, kalian dapat memilih menu Add Element lalu pilih element yang ingin digunakan seperti Rectangle, Solid Button, atau yang lainnya. Step 6 : Ubah Warna Background Untuk membuat sebuah project wireframe yang baru, tentunya kalian harus memilih menu +Wireframe. Step 7 : Tambahkan Text dan Icon Setelah itu, buat header menu menggunakan Add Text (T) lalu untuk iconnya kalian bisa gunakan icon yang telah tersedia pada whimsical menggunakan menu Add Icon (X). Step 8 : Menambahkan Object Lain (Button & Wireframe Image) Setelah menambahkan dan mengatur ukuran teks, tambahkan sebuah button menggunakan Solid Button (B) dan juga tambahkan satu buah wireframe untuk gambar menggunakan menu Image (I). Step 9 : Finishing dengan Menambahkan Element Lain Setelah itu, kalian bisa lanjut mebuat tampilan wireframe pada section berikutnya hingga selesai pada bagian footer suatu halaman. Dan kalian telah menyelesaikan satu tampilan wireframe yang akan diubah ke visual design pada tahap design berikutnya. Nice! kalian telah menyelesaikan tampilan wireframenya, jangan lupa untuk tag hasil belajarnya ke @buildwithangga dan @dimasomnia di instagram yaa teman-teman! Jika kalian tertarik untuk mempelajari proses design mulai dari wireframe, visual design, dan juga prototyping, kalian bisa mengikuti kelas Wordpress & UI/UX Design, di dalam kelas itu kita akan mempelajari proses design UI hingga mengubah ke dalam bentuk website menggunakan Wordpress.

Hello people with the spirit of learning! Fonts merupakan salah satu komponen yang dapat membuat tampilan aplikasi kita menjadi lebih menarik. Flutter menyediakan sebuah package bernama google_fonts yang dapat kita gunakan untuk melakukan kustomisasi fonts pada aplikasi yang sedang kita buat. Beberapa contoh fonts yang tersedia dalam google_fonts adalah: RobotoLatoPoppinsMontserrat Pada artikel kali ini, kita akan belajar bagaimana cara menggunakan package google_fonts dalam aplikasi yang sedang kita kembangkan menggunakan Flutter. Step 1: Menambahkan Google_Fonts Pada Dependencies Project Hal pertama yang harus kita dilakukan adalah menambahkan package google_fonts ke dalam project kita. Caranya: Kunjungi pub.dev, kemudian ketikkan "google_fonts" pada kolom pencarian package.Pilih package google_fonts.Pilih tab "Installing".Copy baris berikut: 5. Tambahkan pada file pubspec.yaml di project Flutter kita. Misalnya seperti ini: 6. Tekan shortcut save "command + s" untuk pengguna macOS atau "ctrl + s" untuk pengguna windows. Step 2: Menambahkan Widget Text Setelah menambahkan pada dependencies project, langkah berikutnya adalah menambahkan widget Text pada project kita. Kamu bisa copy code berikut dan paste kan pada file main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Step 3: Menambahkan Widget TextStyle Setelah menambahkan widget Text, langkah berikutnya adalah menambahkan properti style pada widget Text yang telah dibuat. Misalnya seperti ini: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', style: TextStyle( fontSize: 24, color: Colors.blue, ), ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Step 4: Menambahkan Style Dengan Google Fonts Untuk menggunakan package google_fonts, pertama-tama kita perlu melakukan import terlebih dahulu. Tambahkan code berikut sebelum fungsi main(): import 'package:google_fonts/google_fonts.dart'; Kemudian ubah widget TextStyle dengan widget GoogleFonts, dan pilihlah font family yang ingin digunakan. Apabila kamu ingin menggunakan font family Montserrat, kamu bisa menuliskannya seperti ini: import 'package:flutter/material.dart'; import 'package:google_fonts/google_fonts.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Text( 'Better Way For You', style: GoogleFonts.montserrat( fontSize: 24, color: Colors.blue, ), ), ), ), ); } } Sehingga ketika project dijalankan, akan menampilkan hasil seperti ini: Sekarang coba bandingkan dengan versi sebelumnya: Bagaimana? mudah bukan! Jika kalian tertarik untuk mempelajari Flutter lebih lanjut, kalian dapat mengikuti rekomendasi kelas dibawah ini. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pemesanan kos-kosan secara online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar orang lain dapat mencobanya.

Hello people with the spirit of learning! Kali ini kita akan coba membuat Icon Rocket melalui Figma. Let's dive in! Step 1 : Color Palette Color 1 : FFFFFFColor 2 : FCC69BColor 3 : FFAE48Color 4 : FE4881 Tentukan color palette untuk icon agar dengan lebih mudah kita modifikasi warnanya dengan memakai eye-dropper Step 2 : Size & Frame Buatlah frame ( F ) dengan size 256 x 256 px (size yang dianjurkan untuk icon karena high-resolution) Step 3 : Background Untuk background icon bisa kita tambahkan Gradient linear warna orange-pink seperti ini. Step 4 : Dasar Rocket Sekarang kita membuat dasar rocket. Buat Ellipse ( O ) lalu atur Anchor Point atas dengan double-click pada elips tersebut.Gabungkan kedua Anchor Point (sebelah kanan kiri) hingga ke tengah Anchor Point.Lalu atur radius Anchor Point atas elips sebesar 10 Step 5 : Substract selection Buatlah Ellipse ( O ) lagi dan Rectangle ( R ) di atas layer dasar rocketBlock semua shapes (termasuk dasar roket & lakukan Substract selection) Step 6 : Sayap Rocket Buat Rectangle ( R )Atur Anchor Point nya seperti sayap dan berikan radius 1 . Lalu duplicate untuk sayap sebelahnya Step 7 : Extras Tambahkan Ellipse ( O ) ditengah rocket agar terlihat seperti jendela & Rectangle (R) dibawah dasar rocketTambah Lines ( L ) sebagai arah luncur rocket dengan stroke 5 dan cap Rounded Step 8 : Finish Modifikasi arah rocket menjadi menyamping dengan memblok semua layersIcon Rocket sudah finish dan siap di export Good effort teman-teman! Kita sudah selesai finishing Icon Rocket, dan kami berharap steps ini dapat membantu dalam project mu yang mendatang, Goodluck! Oh iya, jangan lupa untuk mengikuti rekomendasi kelas Mastering Blender 3D: Design Icon Set dan juga share karyamu dengan tag @Buildwithangga