flash sale
hamburger-menu

Tips All

Meningkatkan skills menjadi 1% lebih baik

Reset
Kelas Temukan Color Palette yang Cocok dari 3 Website Ini! di BuildWithAngga

Temukan Color Palette yang Cocok dari 3 Website Ini!

Hello people with the spirit of learning! Kamu sering tidak merasa kesulitan cari color palette yang cocok baik untuk UI Design maupun ilustrasimu? Color palette sangat berpengaruh lho pada aspek desain kamu, karena warna selain memperindah namun juga mempunyai kemampuan untuk "mempengaruhi" psikologis kita. Oleh karena itu, kita perlu memilih warna yang tepat sesuai dengan tujuan karya kita. Terus bagaimana dong? Apa pinterest jadi jalan ninja nya? Oh tidak, selain pinterest berikut adalah 3 website yang bisa jadi preferensi kamu saat cari color palette! Coolors Website ini selain menyediakan macam-macam color palette tapi juga up-to-date lho! Karena disini kita dapat eksplorasi color palette yang lagi trendy di jaman kekinian tanpa harus searching dua kali. Selain itu, Coolors juga menyediakan extension yang bisa digenerate langsung ke Adobe & Chrome kita, efektif banget yah? Color Tool - Material Design Salah satu fitur dari Material Design ini dibuat khusus bagi kalian yang ingin eksplor color palette untuk User Interface kalian dengan 6 screen yang berbeda! Uniknya, kita juga bisa terapin primary, secondary dan color text secara langsung di website ini. Jadi kamu tidak perlu khawatir revisi warna untuk klien, karena Color Tool ini bisa di share link sehingga semua orang bisa mengaksesnya! Color Palette Generator - Canva Lhoo, kok ada Canva disini? Jadi, ternyata Canva juga menyediakan fitur color palette namun tidak seperti biasanya. Karena kita bisa mendapatkan color palette kita sendiri dari image / foto kita! Tidak perlu pusing lagi menghadapi klien yang masih ragu dengan color palette, karena bisa kita sesuaikan karakteristik dan produk klien kita dengan generator ini! Bagaimana? Jangan lupa dicatat yah websitenya karena siapa tau bisa digunakan kedepannya! Bagi kalian yang ingin mempelajari cara menggunakan color palette yang benar pada User Interface kalian, kalian bisa mengikuti kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Karena selain visual design, kita juga bisa mempelajari User Interface secara menyeluruh. Jadi tunggu apa lagi? Selamat belajar!

Kelas 3 Keuntungan Brainstorming dengan Whimsical di BuildWithAngga

3 Keuntungan Brainstorming dengan Whimsical

Hello people with spirit of learning! Suka merasa ribet ga kalau harus sedia alat tulis dan kertas buat brainstorming product yang mau dibuat? Atau mungkin kalian sedang kerja dan kolaborasi secara remote yang pastinya ga mungkin rekan kerja kalian bisa brainstorming bareng apalagi ngerevisi di waktu yang bersamaan kan? Nah kalo punya kendala seperti itu, coba deh pakai whimsical. Disini saya coba merangkum jadi 3 point kenapa whimsical bisa jadi solusi kalian dalam brainstorming sebelum ngedesign. Dashboard Pertama, kalian bisa kunjungin website whimsical.com, disini saya ga akan ngasih tau cara daftar dan loginnya karena saya yakin kalian udah pada bisa ya. Cukup daftar akun emailnya aja, atau kalo ga mau ribet juga bisa daftar pakai akun google mail yang udah kalian punya. Kerja Bareng Secara Real Time Sebelum kalian bisa kerja bareng, di whimsical perlu invite akunnya dulu (ya jelas juga ya, kalo ga diundang nanti siapa aja bisa ngacak-ngacak projectnya dong ya). Caranya simple, pilih menu Share, Export & Print. Setelah itu, lanjut pilih menu Get Shareable Link yang ada pada baris menunya. Nah, setelah itu kalian bisa masukkan email akun teman kolaborasinya dan pastinya udah terdaftar di whimsical yaa. Oya, perhatiin juga nih ketiga menu yang ada di bagian Add guest. Karena masing-masing menu itu fungsinya beda-beda. Viewer: Akun ini cuma bisa melihat project yang kalian buat aja.Commenter: Akun ini bisa melihat dan juga komen revisi sama brainstorming yang udah kalian buat.Editor: Akun ini punya kendali yang sama seperti pemilik utama. Bisa mengubah tampilannya atau bisa juga hapus tampilan yang udah kalian buat. So, pastiin tipe guestnya ya sebelum ngundang akunnya. Ok, kalo tadi udah ngebahas tentang whimsical dan cara kolaborasi bareng. Sekarang kita cari tau, emangnya di whimsical bisa buat brainstorming apa aja sih? 1. User Flow Pertama, di whimsical kalian bisa membuat user flow atau mungkin ada yang nyebutnya flowchart. User Flow ini jadi tahap yang penting banget buat kalian nentuin alur produk yang akan dibuat. Sehingga kalian punya gambaran tentang halaman apa saja yang akan dibuat nantinya. And the next step is... 2. Sitemap Kalo udah selesai bikin user flow, kalian bisa lanjut ke bagian sitemap biar kalian bisa lebih punya gambaran tentang design yang akan dibuat. Nah, di sitemap ini kalian bisa nentuin screen apa aja yang akan dibuat dan ga hanya itu, dengan membuat sitemap kalian juga bisa punya gambaran tentang konten apa aja yang harus dibuat dalam setiap halamannya. 3. Wireframe Yang terakhir ada wireframe yang mungkin dari kalian udah tau proses ini ya. Jadi, di wireframe ini kalian menuangkan semua hasil brainstorming dari tahap user flow dan juga sitemap dan mengubahnya ke tampilan visual dalam bentuk layouting (tanpa memikirkan warna dan tipografinya). Nah itu dia beberapa keuntungan brainstorming menggunakan whimsical yang pastinya bakal bikin proses brainstorming kalian jadi makin lebih cepat. Jika kalian tertarik mempelajari lebih dalam tentang proses brainstorming di whimsical, silahkan bergabung pada kelas Complete UI Designer: Visual Design, Prototype, Usability Testing. Dalam kelas itu, kita akan bersama-sama membedah dan mempelajari proses apa saja yang harus dilakukan dalam mendesign biar prosesnya jadi lebih cepat dan efisien. Ga hanya itu, kalian juga akan mempelajari bagaimana caranya mengubah brainstorming menjadi product design yang menarik dan menjual. Sampai jumpa di kelas yaa! Terima kasih.

Kelas Flutter Tutorial: Tips Belajar Flutter Untuk Pemula di BuildWithAngga

Flutter Tutorial: Tips Belajar Flutter Untuk Pemula

Hello people with the spirit of learning! Flutter merupakan SDK yang dikembangkan oleh Google untuk membangun aplikasi Android, iOS, Website, dan Desktop dalam single codebase. Sejak pertama kali diluncurkannya, hingga saat ini Flutter sudah digunakan oleh berbagai perusahaan besar seperti Alibaba, Tencent, Ebay, Grab, dan masih banyak lainnya. Namun, banyak developer pemula yang masih kebingungan bagaimana cara belajar Flutter secara efisien. Pada artikel kali ini, saya akan membagikan tips kepada kalian bagaimana cara yang efisien untuk belajar flutter. Konsep OOP Hal yang pertama perlu kita pelajari untuk menjadi seorang Flutter Developer adalah Konsep Object Oriented Programming (OOP). Karena di dalam Flutter hampir semua Widgets menggunakan konsep OOP, sehingga mudah digunakan secara berulang kali. Basic Widgets Setelah kita paham konsep OOP, hal berikutnya yang perlu kita pelajari adalah Basic Widgets yang ada di dalam Flutter. Seperti AppBar, Container, Text, Image, BottomNavigationBar, dan widget-widget lainnya. Karena nantinya widget-widget tersebut akan sering kita gunakan saat membuat aplikasi menggunakan Flutter. Layouting Kemudian, setelah mempelajari basic widgets, hal yang berikutnya kita pelajari adalah bagaimana cara membuat layout yang baik pada Flutter. Menurut saya belajar layouting ini sangat penting dalam proses development aplikasi kita. Karena seringkali terdapat UI Design yang memiliki layout yang sulit diimplementasi, sehingga kita harus lebih kreatif dalam melakukan slicing layout pada aplikasi. State Management Hal berikutnya yang perlu dipelajari adalah State Management. Kita bisa belajar menggunakan berbagai API baik yang sederhana seperti setState pada Stateful Widget, ataupun Plugin State Management seperti Provider, BLoC, dan GetX. Dengan adanya State Management, data-data pada aplikasi kita dapat dikelola dengan baik. Consume API Yang terakhir adalah Consume API. Kita bisa menggunakan berbagai API yang disediakan secara global atau membuatnya sendiri dengan teknologi Backend seperti Firebase, Laravel ataupun Node Js. Dengan menggunakan Consume API, data yang ada pada aplikasi kita bisa lebih dinamis. Bagaimana? Apakah kalian sudah siap menjadi seorang Flutter Developer Profesional? Jika kalian tertarik untuk mempelajari Flutter lebih lanjut, kalian bisa mengikuti kelas Fullstack Laravel Flutter E-Commerce App. Pada kelas ini kita akan belajar membuat aplikasi menggunakan Flutter dan Laravel dengan studi kasus toko online, yaitu mulai dari implementasi desain yang sudah disediakan, menambahkan consume API, dan juga menguploadnya ke Play Store agar dapat mencapai target pasar kita.

Kelas Flutter Tutorial: Menambahkan Icon SVG pada Flutter di BuildWithAngga

Flutter Tutorial: Menambahkan Icon SVG pada Flutter

Hello, people with the spirit of learning. Ketika kita sedang mengembangkan sebuah aplikasi akan ada banyak komponen di dalamnya untuk mendukung seluruh tampilan aplikasi tersebut. Mulai dari teks, icon, gambar, button dan masih banyak lagi komponen di dalamnya. Pada tutorial kali ini, kita akan belajar bersama-sama bagaimana caranya menambahkan Icon dengan format SVG pada projek Flutter kita. Mempersiapakan Komponen Download Icon Pertama-tama kita perlu mempersiapkan Icon yang ingin kita tambahkan pada projek kita. Flaticon merupakan salah satu platform yang memiliki banyak Icon yang dapat kita download secara gratis.  Kita bisa download Icon tersebut di link berikut:https://www.flaticon.com/free-sticker/woman_5046936?related_id=5046936 Lalu pilih SVG seperti contoh di atas. Nantinya Icon akan terunduh secara otomatis dan simpan file svg tersebut pada folder assets yang ada pada projek Flutter. 2. Menambahkan Package Flutter SVG Jika sudah berhasil mengunduh Icon di atas, maka selanjutnya kunjungi website Dart Packages pada link berikut: https://pub.dev/ Setelah itu search "flutter svg", dan pilih pilihan yang paling atas. Langkah selanjutnya, pilih installing menambahkan dependencies serta import flutter svg pada file pubspec.yaml yang ada dalam projek Flutter kita. flutter_svg: ^0.22.0 3. Mengubah Assets Step ketiga adalah mengubah assets pada file pubspec.yaml agar Icon yang akan kita tampilkan dapat ditampilkan pada projek Flutter. Kita dapat mengganti bagian assets ini seperti pada contoh di atas Proses Code Pada Flutter Tutorial kali ini, kita akan membuat tampilan seperti gambar di atas. Seluruh komponen yang diperlukan agar Icon SVG dapat ditampilkan sudah kita persiapkan pada step sebelumnya. Sekarang kita akan mengimplementasikan cara menambahkan Icon pada kodingan projek Flutter. Pada poin kedua Menambahkan Package Flutter SVG, kita telah menambahkan dependencies pada file pubspec.yaml, namun dibawahnya ada satu step lagi yang perlu kita lakukan, yaitu mengimport flutter_svg.dart, Oleh karena itu, langkah pertama adalah kita perlu mengimpor flutter_svg.dart pada file main.dart. import 'package:flutter_svg/flutter_svg.dart'; Menambahkan Teks pada main.dart import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 100.0), child: Column( children: [ Text( 'Hello!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 30, ), ), ], ), ), ), ); } } Hasil: 3. Menambahkan Icon SVG SvgPicture.asset( 'assets/woman.svg',), Hasil: Full Code import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Padding( padding: const EdgeInsets.only(top: 100.0), child: Column( children: [ Text( 'Hello!', style: TextStyle( fontWeight: FontWeight.bold, fontSize: 30, ), ), SvgPicture.asset( 'assets/woman.svg', ), ], ), ), ), ); } } Well done! Sekarang kita telah berhasil menambahkan Icon SVG pada projek Flutter kita. Nantikan tips-tips menarik yang lainnya yah! Ohya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas-kelas Flutter premium serta gratis yang ada di website Buildwith Angga. Disini, kita dapat memperdalam pengenalan kita terhadap Flutter serta membangun portofolio yang nantinya akan sangat berguna buat kita.  Selamat mencoba!

Kelas 5 Website Icon Gratis untuk UI/UX Designer di BuildWithAngga

5 Website Icon Gratis untuk UI/UX Designer

Hello people with the spirit of learning 👋. Siapa disini masih bingung mencari Icon untuk Visual Design kita? Jika iya, di artikel ini kita membahas tentang 5 website Icon Gratis untuk UI/UX Designer🤩. Lets Go🔥 1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita. 2. Feather Apa itu Feather? Feather adalah kumpulan ikon open source yang cantik. Setiap ikon dirancang pada kisi 24x24 dengan penekanan pada kesederhanaan, konsistensi, dan fleksibilitas. Disini kita bisa mengatur Size dan juga Stroke widthnya sesuka kita sebelum mendownloadnya. selain itu, icon yang disediakan oleh feather berstyle outline. 3. HeroIcons Apa itu HeroIcons? Heroicons merupakan Satu set 450+ ikon SVG berkualitas tinggi berlisensi MIT gratis untuk Anda gunakan dalam proyek web Anda. Tersedia sebagai ikon SVG dasar dan melalui perpustakaan React dan Vue pihak pertama. Selain mudah kita pakai, Heroicons juga menyediakan soft file Figmanya juga. Selain Style Outline, Heroicons juga memiliki Style Solid 4. Flaticon Apa itu Flaticon? Flaticon adalah layanan web yang dapat digunakan untuk mengunduh ikon vektor dengan cepat dan mudah, untuk digunakan secara bebas pada situs web atau blog Anda. 5. Material Icon Apa itu Material Icon? Material Icon adalah simbol yang menyenangkan dan dibuat dengan indah untuk tindakan dan item umum. unduh di desktop untuk menggunakannya dalam produk digital Anda untuk android, ios, dan web Okay people with the spirit of learning👋. Itulah 5 website Icon Gratis untuk visual design kita sebagai seorang UI/UX Designer. Semoga artikel ini bermanfaat

Kelas Cara Membuat Fancy Bottom Navigation di Figma di BuildWithAngga

Cara Membuat Fancy Bottom Navigation di Figma

Hello people with the spirit of learning 👋. Di artikel ini kita akan membuat fancy navigation dengan sangat mudah di figma🤩. oke langsung saja kita mulai, lets go🔥 Step 1: Buatlah Rectangle Buatlah Rectangle (r) dengan ukuran 375x80 (*Weightnya harus sesuaikan dengan ukuran frame yang kita pakai) Step 2: Buatlah Ellipse Buatlah Ellipse (e) dengan ukuran 80x80Lalu Pastikan Rata tengah dengan rectangle seperti digambar diatas. Setelah itu Duplicate Ellipse tadi,Lalu jadikan ukurannya menjadi 64x64Pastikan rata tengah dengan Ellipse sebelumnya Step 3: Boolean Groups Seleksi Rectangle dan Ellipse yang kita duplicate tadiLalu pergi ke menu Boolean GroupsSetelah itu pilih Subtract selection Step 4: Outline Stroke Pilih Rectangle yang sudah kita Subtract selection tadiLalu Klik kananPilih Outline stroke Step 5: Corner Radius 1. Klik 2x pada Rectangle 2. Pilih 2 Titik Anchor Point seperti di gambar (*pastikan sudah melakukan step 4) 3. Setelah itu diberi Corner Radius 24 Step 6: Finishing Terakhir kita tambahkan beberapa component: Tambahkan beberapa IconTambahkan juga corner radius di beberapa sudut Tadaaa, Selesai deh~ Hello people with the spirit of learning! gimana? sangat mudah bukan? terima kasih telah membaca artikel ini dan selamat mencoba :) Oiya, kalau kita mau meng convert fancy navigation ini kedalam bentuk code, kita bisa mengikuti kelas Full-Stack Laravel Flutter: E-Commerce App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus membeli sepatu online.

Kelas Top 10 Shortcuts Visual Studio Code for Fast and Efficient Development di BuildWithAngga

Top 10 Shortcuts Visual Studio Code for Fast and Efficient Development

Dalam dunia programming, sudah pasti kita tidak asing dengan yang namanya IDE. Integrated Development Environment (IDE) merupakan sebuah tools yang digunakan untuk memudahkan para developer dalam menuliskan kode untuk pengembangan perangkat lunak. Nah dalam tips kali ini, kita akan membahas keyboard shortcut yang akan mempercepat proses kita dalam pengembangan software. 1. Show All Shortcut Jika kita baru pertama kali menggunakan Visual Studio Code dan ingin mencari sebuah keyboard shortcut yang akan kita butuhkan, kita tinggal menekan Ctrl + K + S untuk pengguna Windows atau ⌘ + K + S untuk pengguna Mac. 2. Toggle Sidebar Pada saat proses koding, terkadang kita perlu untuk menutup sidebar agar kita dapat melihat tampilan layar kodingan kita terlihat lebih luas. Nah, agar proses tersebut dapat berjalan lebih cepat kita cukup menggunakan keyboard shortcut Ctrl + B untuk pengguna Windows atau ⌘ + B untuk pengguna Mac. 3. Toggle Build-in Terminal Terminal atau biasa dikenal sebagai command lines atau consoles memungkinkan user bisa mengetikkan perintah dalam bentuk teks dan memberikan instruksi pada komputer untuk mengerjakan tugas tertentu. Pada Visual Studio Code, kita dapat dengan cepat membuka terminal dengan menggunakan keyboard shortcut Ctrl + ` untuk pengguna Windows atau ^ + ` untuk pengguna Mac.  4. Trigger Suggest Terkadang saat kita sedang mengkoding sesuatu, kita mungkin kadang dapat sewaktu-waktu lupa opsi syntax yang akan kita gunakan. Visual studio code mempunyai keyboard shortcut yang dapat menjadi Code Assist atau bisa kita kenal dengan Trigger Suggest yang dapat membantu kita jika kita bingung atau lupa kode apa yang akan kita gunakan selanjutnya. Kita dapat menggunakan keyboard shortcut Ctrl + Space untuk pengguna Windows atau ^ + Space untuk pengguna Mac. 5. Tab Through Open Files Pada saat proses koding, kita seringkali perlu untuk membuka file-file lain untuk menambahkan, menghapus, ataupun mengedit kodingan kita yang sebelumnya. Pada Visual Studio Code, kita dapat dengan cepat membuka file-file yang kita butuhkan hanya dengan menggunakan keyboard shortcut Ctrl + Tab untuk pengguna Windows atau ^ + Tab untuk pengguna Mac.  6. Toggle Comment a Line Saat kita ingin menambahkan pesan atau penjelasan pada kodingan kita, kita dapat menggunakan comment agar pesan tersebut tidak dieksekusi. Kita dapat menggunakan keyboard shortcut Ctrl + / untuk pengguna Windows atau ⌘ + / untuk pengguna Mac. 7. Select Word Keyboard shortcut select word dapat digunakan untuk memilih kata yang ingin kita edit ataupun hapus. Kita dapat dengan cepat memilih kata dengan menggunakan keyboard shortcut Ctrl + D untuk pengguna Windows atau ⌘ + D untuk pengguna Mac.  8. Quick Fix Kesalahan saat penulisan kodingan merupakan hal yang sangat wajar dan terkadang untuk memperbaiki hal tersebut akan membutuhkan waktu. Pada Visual Studio Code, kita dapat dengan cepat mengganti atau mengubah kodingan yang kita butuhkan hanya dengan menggunakan keyboard shortcut Ctrl + . untuk pengguna Windows atau ⌘ + . untuk pengguna Mac. 9. Reopen Closed Editor Pada Visual Studio Code, kita dapat dengan cepat membuka kembali file-file yang sebelumnya sudah kita buka hanya dengan menggunakan keyboard shortcut Ctrl + Shift + T untuk pengguna Windows atau ⌘ + Shift + T untuk pengguna Mac.   10.  Zoom Out and Zoom In Keyboard shortcut yang terakhir yaitu untuk mempermudah kita dalam memperbesar atau memperkecil tampilan layar kita atau zoom out dan zoom In. kita dapat menggunakan keyboard shortcut Ctrl + Shift untuk pengguna Windows atau ⌘ + Shift + T untuk pengguna Mac.  Nah, itulah 10 Top Shortcut yang akan meningkatkan efisiensi ketika kita sedang mengembangkan software menggunakan Visual Studio Code. Semoga tips ini bermanfaat. 

Kelas 5 Website Inspirasi Desain untuk Flutter Developer di BuildWithAngga

5 Website Inspirasi Desain untuk Flutter Developer

Hello people with the spirit of learning.  Dalam pengembangan sebuah aplikasi mobile, akan ada banyak aspek  yang perlu diperhatikan, salah satunya adalah tampilan dari sebuah aplikasi. Tampilan yang menarik dalam sebuah aplikasi mobile seringkali menjadi hal yang cukup penting untuk diperhatikan. Oleh karena itu, pada tips ini kita akan membahas mengenai 5 website yang dapat kita jadikan sebagai inspirasi sebagai Flutter Developer.  1. Pixel Buildwith Angga Pixel Buildwith Angga merupakan platform buatan Indonesia yang dapat kita jadikan sebagai referensi apabila ingin mencari inspirasi desain. Pixel Buildwith Angga tidak hanya menyediakan UI Kits, tapi juga menyediakan icon set serta ilustrasi yang menarik. Selain desain-desain yang menarik, kita juga dapat mengunduh desain tersebut dalam bentuk file Figma. Sehingga dapat sangat memudahkan kita sebagai Developer dalam mengembangkan aplikasi kita.  2. Dribbble Mungkin sebagian banyak orang sudah tahu apa itu Dribble. Dribbble merupakan sebuah website yang dapat menjadi platform untuk designer dalam memamerkan karya mereka. Selain itu, dribbble juga dapat menjadi platform untuk designer sebagai tempat untuk menaruh portofolio desain-desain yang telah mereka buat serta mencari pekerjaan secara online. Oleh karena itu, Dribbble dapat menjadi platform yang tepat untuk developer juga dalam mencari inspirasi desain yang baik jika sedang ingin mengembangkan sebuah aplikasi.  3. Pinterest Pinterest merupakan sebuah sosial media asal Amerika yang dibuat untuk menemukan ide dalam bentuk gambar seperti resep, inspirasi rumah dan gaya, UI/UX Design dan banyak lagi. Kita juga dapat mencari inspirasi-inspirasi desain jika ingin mengembangkan sebuah aplikasi. Cukup ketik kata kunci seperti “UI Design” dan kita akan menemukan banyak sekali UI Design yang sangat bagus.  4. Uplabs Uplabs merupakan sebuah platform asal California yang dapat menjadi referensi kita dalam mencari ide design pada saat mengembangkan aplikasi. Uplabs juga menyediakan fitur dimana kita dapat mendownload UI Kits yang kita inginkan dalam bentuk File Figma, Adobe XD dan bahkan Sketch.  5. Collect UI Collect UI merupakan platform yang menyediakan banyak sekali inspirasi UI Design. Kita juga dapat memilih kategori UI Design sesuai dengan apa yang sedang kita butuhkan. Collect UI menampilkan desain-design pilihan atau hand picked yang berasal dari Dribbble, sehingga Collect UI hanya akan menerima desain yang berasal dari Dribbble. Okay people with the spirit of learning, itulah 5 website yang dapat kita jadikan sebagai referensi ketika sedang mengembangkan aplikasi kita. Semoga tips ini bermanfaat. 

Kelas Top 5 Most Used Widgets In Flutter di BuildWithAngga

Top 5 Most Used Widgets In Flutter

Hello people with the spirit of learning. Pada saat mengembangkan aplikasi menggunakan Flutter, kita akan selalu membutuhkan widget-widget untuk membangun aplikasi Flutter kita. Widget adalah komponen-komponen pendukung pada Flutter seperti Button, Text, Icon dan lain sebagainya. Semua yang berada pada tampilan aplikasi kita disebut dengan Widget. Dibawah ini kita akan membahas widget-widget yang paling sering dipakai pada Flutter. 1. Image Image.asset( 'assets/images.png', width: 267, height: 200, ), Image merupakan sebuah widget untuk menambahkan dan menampilkan gambar pada Flutter. Gambar sangat penting untuk setiap aplikasi. Gambar juga dapat memberikan informasi penting atau berfungsi sebagai alat bantu visual untuk meningkatkan estetika aplikasi kita. Contoh diatas merupakan kodingan untuk menampilkan gambar. 2. Text Text( 'Hello people with the spirit of learning', style: TextStyle( color: Color(0xff007DFF), fontSize: 26, fontWeight: FontWeight.bold, ), ), Pada saat membangun sebuah aplikasi, pasti akan membutuhkan banyak sekali text di dalamnya, karena Text merupakan bagian penting dalam UI aplikasi mobile manapun. Text pada Flutter juga dapat dimodifikasi mulai dari ukuran teks, ketebalan hingga jenis font yang ingin kita gunakan seperti pada contoh diatas.  3. AppBar AppBar( title: Text('AppBar Demo'), backgroundColor: Colors.blue, ), AppBar atau Application Bar adalah salah satu widget yang digunakan sebagai menu penunjuk atau dapat menampilkan beberapa navigasi dari aplikasi. Biasanya widget AppBar ini terletak pada bagian paling atas aplikasi seperti pada contoh gambar di atas. Kodingan di atas merupakan contoh kodingan untuk membuat sebuah AppBar.  4. Container Container( width: 370, height: 51, color: Colors.black, ), Pada saat slicing UI Design dengan Flutter, Container merupakan widget yang cukup akan sering kita gunakan. Widget container akan sangat membantu kita dalam menempatkan widget serta mengatur layout atau ukuran serta jarak antar Widget. Container memiliki properti-properti seperti padding, margin, border, border radius dan lain sebagainya. 5. Bottom Navigation Bar BottomNavigationBar( selectedItemColor: Color(0xff6A6AE3), items: <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Padding( padding: const EdgeInsets.only(top: 8.0, bottom: 15.0), child: Image.asset( 'assets/calls.png', width: 24, height: 24, ), ), label: 'Calls', ) ], ), Bottom Navigation Bar merupakan sebuah widget material yang dapat digunakan untuk membuat sebuah navigasi antar halaman yang ada pada sebuah aplikasi Flutter. Contohnya icon home pada gambar dibawah ini menunjukkan navigasi jika kita ingin masuk ke halaman home tersebut. Nah, itulah 5 widget Flutter yang akan sering kita gunakan pada saat kita ingin mengembangkan aplikasi kita. Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Mastering UI Design to Flutter: Jobs App. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana proses Design to Code menggunakan Flutter.

Kelas Flutter Tutorial: Simple Notes App Using Provider di BuildWithAngga

Flutter Tutorial: Simple Notes App Using Provider

Hello people with the spirit of learning. Pada tips kali ini, kita akan belajar bagaimana mengimplementasikan State Management menggunakan provider pada Flutter. Untuk demo aplikasi, kalian dapat melihat pada video di bawah ini : Pada Flutter, ada beberapa jenis State Management selain Provider, seperti Bloc, Redux, GetIt dan lain sebagainya. Nah pada tips kali ini, kita akan langsung coba belajar untuk membuat aplikasi sederhana menggunakan Provider. So, let’s begin. Step 1: Install Package Provider Install provider di Provider Pacakage.Masukkan provider: ^5.0.0  pada pubspec.yaml pada depedencies Step 2: Menambahkan 2 Folder Baru Membuat folder models untuk memasukkan kelas Note dan NotesOperation yang berfungsi untuk membuat String dan membuat object note serta list note.Membuat folder screen untuk membuat tampilan notes dan tampilan notes ketika akan menambahkan note atau task baru. Source Code Step 3: Membuat File NotesOperation (User Model Folder) import 'package:flutter/cupertino.dart'; import 'package:task_manager/models/note.dart'; class NotesOperation with ChangeNotifier { //List of note List<Note> _notes = []; List<Note> get getNotes { return _notes; } NotesOperation() { addNewNote('First Note', 'First Note Description'); } void addNewNote(String title, String description) { //Note object Note note = Note(title, description); _notes.add(note); notifyListeners(); } } Kita perlu membuat file notes_operation.dart pada folder models yang telah kita buat pada step ke-2. Pada kelas NotesOperation mempunya list dengan tipe note di mana kita akan menyimpan semua data yang dibuat pengguna untuk menyimpan catatan ToDo List. Fungsi addNewNote berfungsi untuk menambahkan data ke List catatan Array. Step 4: Membuat File Note (User Model Folder) class Note { String title; String description; Note(this.title, this.description); } Selanjutnya, kita perlu membuat file note.dart pada folder models. Pada file note ini terdapat dua field String untuk menyimpan data, yaitu title, description serta sebuah constructor. Step 5: Membuat File Home Screen (Screen Folder) import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/note.dart'; import 'package:task_manager/models/notes_operation.dart'; import 'package:task_manager/screen/add_screen.dart'; class HomeScreen extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blueGrey, floatingActionButton: FloatingActionButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => AddScreen(), ), ); }, child: Icon(Icons.add, size: 30, color: Colors.blueGrey), backgroundColor: Colors.white, ), appBar: AppBar( title: Text( 'Task Manager', style: TextStyle( fontSize: 25, fontWeight: FontWeight.bold, ), ), centerTitle: true, elevation: 0, backgroundColor: Colors.transparent, ), body: Consumer<NotesOperation>( builder: (context, NotesOperation data, child) { return ListView.builder( itemCount: data.getNotes.length, itemBuilder: (context, index) { return NotesCard(data.getNotes[index]); }, ); }, ), ); } } class NotesCard extends StatelessWidget { final Note note; NotesCard(this.note); @override Widget build(BuildContext context) { return Container( margin: EdgeInsets.all(15), padding: EdgeInsets.all(15), height: 150, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(15), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( note.title, style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), SizedBox(height: 5), Text( note.description, style: TextStyle(fontSize: 17), ), ], ), ); } } File home_screen.dart ini perlu kita masukkan ke folder screen yang sebelumnya sudah kita buat. Step 6: Membuat File Main import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/notes_operation.dart'; import 'package:task_manager/screen/home_screen.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider<NotesOperation>( create: (context) => NotesOperation(), child: MaterialApp( debugShowCheckedModeBanner: false, home: HomeScreen(), ), ); } } File main.dart ini perlu kita masukkan ke folder lib. Step 7: Membuat File Add Screen (Screen Folder) import 'package:flutter/material.dart';import 'package:provider/provider.dart';import 'package:task_manager/models/notes_operation.dart'; class AddScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {String titleText;String descriptionText; import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'package:task_manager/models/notes_operation.dart'; class AddScreen extends StatelessWidget { @override Widget build(BuildContext context) { String titleText; String descriptionText; return Scaffold( backgroundColor: Colors.blueGrey, appBar: AppBar( title: Text('Task Manager'), centerTitle: true, elevation: 0, backgroundColor: Colors.transparent, ), body: Padding( padding: EdgeInsets.only( top: 15, left: 15, right: 15, bottom: 80, ), child: Column( children: [ TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'Title', hintStyle: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white, ), ), style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white, ), onChanged: (value) { titleText = value; }, ), Expanded( child: TextField( decoration: InputDecoration( border: InputBorder.none, hintText: 'Enter Description', hintStyle: TextStyle( fontSize: 18, color: Colors.white, ), ), style: TextStyle( fontSize: 18, color: Colors.white, ), onChanged: (value) { descriptionText = value; }, ), ), TextButton( onPressed: () { Provider.of<NotesOperation>(context, listen: false) .addNewNote(titleText, descriptionText); Navigator.pop(context); }, style: TextButton.styleFrom( padding: EdgeInsets.only(left: 30, right: 30, top: 10, bottom: 10), backgroundColor: Colors.white, ), child: Text('Add Note', style: TextStyle( fontSize: 20, fontWeight: FontWeight.bold, color: Colors.blueGrey, )), ) ], ), ), ); } } File add_screen.dart ini perlu kita masukkan ke folder screen yang sebelumnya sudah kita buat. All done! Akhirnya kita dapat membuat sebuah aplikasi notes sederhana untuk dapat memasukkan task atau to-do list kita menggunakan provider.  Oiya, kalau kamu mau belajar lebih dalam mengenai Flutter, kamu bisa mengikuti kelas Flutter Developer: Provider State Management. Pada kelas itu kita akan belajar membuat aplikasi menggunakan Flutter dengan studi kasus pencarian kerja IT secara online dan belajar bagaimana mengimplementasikan State Management dengan Provider. Silahkan mencoba dan selamat belajar! File Github: Task Manager