Tips All

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