Tips All

Hello people spirit of learning! Dalam flutter terdapat banyak package yang dapat kita gunakan, salah satunya adalah spinner. Fungsi dari spinner ini adalah membuat animasi scroll sederhana yang menggilir sejumlah widget berukuran tetap. Langsung saja ke dalam tutorialnya. Kunjungi pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. Cari keyword spinner Langkah kedua adalah ketik keyword spinner. Lalu pilih yang ke 3. Install Package Langkah ke 3 menginstall package yang ingin kita pakai. Ada 2 cara untuk menginstallnya, tinggal pilih mau yang mana cara menginstallnya. Bisa baca artikelnya disini. Jika sudah menginstallnya, Maka kalian bisa mencoba packagenya. Untuk cara menggunakannya, bisa dilihat pada bagian Readme atau example package. Implementasi Package import 'package:flutter/material.dart'; import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart'; void main(List args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _timePickertestState(); } class _timePickertestState extends State { DateTime _dateTime = DateTime.now(); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( appBar: AppBar(title: Text('Tutorial Spinner')), body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ Container( child: Center( child: Text( _dateTime.hour.toString().padLeft(2, '0') + ' : ' + _dateTime.minute.toString().padLeft(2, '0') + ' : ' + _dateTime.second.toString().padLeft(2, '0'), style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500), ), ), ) ]), ), ), ); } } Disini kita mencoba implementasi packagenya ya. Disini kita gunakan statefulWidget karena datanya dinamis atau bisa berubah-ubah nantinya. Lalu kita bikin variable _datetime yang kita isi dengan Datetime.now() yang fungsi dari variable ini nantinya dijadikan waktu Realtime. Lalu kita tampilkan jam nya mulai dari Jam ,Menit, dan detiknya kita tampilkan. Lalu kita kasih jarak sedikit saja, dan tambahkan ‘0’ Agar jika angka jamnya bukan 2 digit, Maka depannya akan ditambahkan ‘0’. Widget hourMinuteSecond() { return new TimePickerSpinner( isShowSeconds: true, onTimeChange: (time) { setState(() { _dateTime = time; }); }, ); } Sesudah itu, Kita membuat widget Spinnernya yaitu Spinner untuk mengatur Jam, menit, dan waktu. Disini kita bisa menggunakan package dengan mengembalikan nilai packagenya yaitu TimePickerSpinner. Dalam TimePickerSPinner terdapat banyak properti yang bisa kita gunakan. Namun disini kita hanya membuat Spinner waktu sederhana saja. Kita hanya memakai 2 saja yaitu isShowSeconds yang fungsinya menampilkan detik waktu, dan onTimeChange fungsinya terjadi perubahan data waktu jika kita spin. Pada onTimeChange, kita isi parameter Time Dalamnya kita isi dengan setState, fungsi dari setState adalah untuk memberitahu framework bahwa ada object yang berubah pada State, kemudian akan melakukan build ulang pada Widget tersebut. Dalam setState kita isi dengan variable _datetime = time. Nanti saat kita melakukan spin, Maka waktu yang ditampilkan juga ikut berubah sesuai spin yang kita atur. Untuk hasil akhirnya, akan seperti ini. import 'package:flutter/material.dart'; import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart'; void main(List args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State createState() => _timePickertestState(); } class _timePickertestState extends State { DateTime _dateTime = DateTime.now(); Widget hourMinuteSecond() { return new TimePickerSpinner( isShowSeconds: true, onTimeChange: (time) { setState(() { _dateTime = time; }); }, ); } @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( appBar: AppBar(title: Text('Tutorial Spinner')), body: Column(mainAxisAlignment: MainAxisAlignment.center, children: [ hourMinuteSecond(), Center( child: Text( _dateTime.hour.toString().padLeft(2) + ' : ' + _dateTime.minute.toString().padLeft(2, '0') + ' : ' + _dateTime.second.toString().padLeft(2, '0'), style: TextStyle(fontSize: 24, fontWeight: FontWeight.w500), ), ), ]), ), ), ); } } Terima kasih dan semoga bermanfaat!

Hello people spirit of learning! Pada aplikasi yang sering kita buat mungkin kita sering melihat gambar yang dilapisi oleh button, kata-kata, dan lain sebagainya. Nah itu kita bisa lakukan dengan menggunakan widget Stack. Seperti namanya, Stack atau tumpukkan. Berarti bisa kita artikan widget yang berfungsi untuk menumpukkan widget-widget atau melapisi widget-widget. Disini kita ingin melakukan cara menggunakan widget stack secara sederhana. Panggil Widget Stack return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ ]), ), ); Pertama, kita panggil widget stack pastinya pada body scaffold. Widget stack ini merupakan multiple children yang artinya pada properti children kita bisa isi lebih dari 1 widget. Kita coba dengan isi 1 container return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ Container( color: Colors.blue, ) ]), ), ); Kedua, kita isi dengan container. Disini containernya tidak usah diatur lebar dan tingginya, kita biarkan saja. Anggap container ini sebagai wallpaper. Kita Isi dengan Container Lagi return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(children: [ Container( color: Colors.blue, ), Container( width: 300, height: 300, color: Colors.red, ) ]), ), ); Langkah ketiga, kita isi lagi dengan container yang lebar dan tingginya diatur. Bisa dilihat pada gambar container pertama kita tumpuk dengan container ke 2 yang berwarna merah. Tidak harus diisi container ya bisa diisi dengan widget lainnya. Tambahkan widget dan buat rata tengah return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Stack(alignment: Alignment.center, children: [ Container( color: Colors.blue, ), Container( width: 300, height: 300, color: Colors.red, ), Container( width: 200, height: 200, color: Colors.green, ), ]), ), ); Langkah terakhir tinggal isi dengan widget apapun. Pada widget stack terdapat banyak properti. Disini kita gunakan aligment yang fungsinya menempatkan baris pada isi widget stack. Disini kita buat rata tengah pada widget stack. Maka hasilnya seperti gambar diatas. Kita baru saja menggunakan widget stack secara sederhana, yang dimana berfungsi untuk menaruh widget secara berlapis. Untuk lebih lengkapnya bisa membaca dokumentasi resmi flutter disini. Terima kasih dan semoga bermanfaat!

Hello people spirit of learning! Pada aplikasi kita pasti sering menemukan tombol yang beragam-ragam. Mulai dari warna,bentuk, lengkungan tombol, dan lain sebagainya. Disini saya akan membuat custom border radius atau custom lengkungan button pada flutter. Langsung saja ke tutorialnya. Membuat ukuran button Container( width: 130, height: 45, ) Langkah pertama, kita atur ukuran pada buttonnya dengan menggunakan widget Container. Width untuk mengatur panjangnya dan Height untuk mengatur lebarnya. Gunakan Widget-widget Button Container( width: 130, height: 45, child: ElevatedButton(onPressed: () {}, child: Text('Confirm')), ) Widget button ada 3 macam, Yaitu TextButton, ElevatedButton, dan OutlineButton. Disini kita menggunakan ElevatedButton. Maka tampilannya akan seperti gambar diatas. Styling Border Radius Container( width: 130, height: 45, child: ElevatedButton( style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(17))), onPressed: () {}, child: Text('Confirm')), ) Untuk melakukan styling, gunakan properti style lalu isi dengan ElevatedButton.stylefrom. Didalamnya diisi dengan properti shape. Lalu shape diisi dengan widget RoundedRectangleBorder. Lalu diisi dengan properti BorderRadius yang fungsinya untuk mengatur lengkungan button. disini kita menggunakan getter circular (bundaran), yang fungsinya membuat radius perbatasan semua radius. Barusan kita sudah bisa membuat custom border radius pada flutter, yang fungsinya untuk mengatur tiap lengkungan sudut pada tombol atau button. Terima kasih dan semoga bermanfaat!

UI Design adalah sebuah tampilan yang sering kita lihat pada aplikasi mobile misalnya aplikasi gojek, ovo, dana, tokopedia, netflix, dan aplikasi lainnya. Tugas kita sebagai UI Designer bekerja sama dengan developer dan UX designer untuk merancang aplikasi tersebut menjadi lebih menarik ketika digunakan oleh pengguna. Sebelum kita berkarir sebagai UI designer maka ada beberapa hal utama yang perlu kita pelajari sehingga hasil design yang kita buat nanti juga memberikan kualitas yang tinggi, terlebih lagi apabila kamu saat ini belum punya background design. Mulai Dari Belajar Graphic Designer Saya mengawali karir sebagai Graphic Designer untuk memperkuat beberapa komponen design seperti color, grid, layout, typography, dan lainnya. Maka dari itu kamu juga bisa memulainya dengan mempelajari komponen-komponen pada graphic design untuk membuat sebuah design guideline pada perusahaan tempat kamu bekerja nantinya. Mempelajari Color Combination Color memiliki peran penting pada sebuah design aplikasi, setiap aplikasi memiliki tujuan dan vision yang berbeda-beda maka dari itu mereka menggunakan warna yang berbeda, misalnya aplikasi keuangan menggunakan warna biru yang memiliki arti kepercayaan dengan loyalitas yang sangat tinggi. Mulai Belajar Typography Pengguna website atau aplikasi seperti diri kita, orang tua, dan saudara tentunya membaca beberapa informasi yang disajikan pada aplikasi tersebut, misalnya ingin membeli makanan martabak maka kita akan cari item yang berjudul martabak pada app tersebut. Oleh karena itu kita perlu mempelajari typography sebagai pondasi utama UI designer sehingga kita bisa memilih jenis font yang sesuai dengan tema aplikasi yang kita design ke depannya, beda tema maka beda jenis font. Belajar Tata Letak (Layout) Setelah kita mempelajari color dan typography maka kita bisa masuk kepada layout yang di mana kita akan belajar menata judul, harga, foto produk, dan lainnya pada posisi yang benar. Kita juga bisa mulai mengenal istilah-istilah UX sehingga melakukan proses layouting menjadi lebih mudah untuk menciptakan aplikasi dan website yang menarik dan mudah digunakan. Membuat MoodBoard Design Kita butuh sebuah moodboard yang berisi inspirasi-inspirasi design yang akan kita gunakan sebagai benchmark dari design aplikasi kita nantinya, oleh karena itu kita perlu belajar memilih referensi yang tepat, tidak harus banyak tidak juga sedikit, intinya cukup dari segi warna, illustration, layout, dan interaction (animation). Kita bisa menggunakan beberapa software design gratis seperti Figma, Miro, Dribbble, Adobe XD, dan software lainnya untuk mulai pembuatan moodboard dan melakukan pembelajaran utama kita sebagai UI designer.

Goal Bekerja sama dengan developer dan designer untuk memastikan bahwa tidak adanya bug dan website dapat berjalan sebagaimana mestinya. Responsibilities Melakukan uji coba setiap adanya fitur terbaruMemeriksa fitur-fitur lama apakah berjalan dengan baikMendokumentasikan hasil kerjaan dengan rapih Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 4Fresh graduate (kuliah) boleh applySudah mengikuti minimal 1 kelas Premium (untuk memastikan bahwa kamu telah terbiasa menggunakan fitur-fitur di website BWA). Benefits Akses seluruh kelas PremiumMagang secara online dari rumahBelajar hal baru pada sebuah real-world projectUang kompensansi/jajan bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Membuat dokumentasi sederhana menggunakan Notion.so terkait 3 fitur yang tersedia pada website BuildWith Angga. Buatlah sebuah table dengan kolom URL, Goal, Criteria, Status (lihat contoh A) Simpan sebagai .PDF Untuk list Criteria, posisikan diri kamu sebagai pengguna website BuildWith Angga, kami ingin kamu menjadi kreatif, memikirkan kemungkinan apa saja yang bakalan terjadi pada setiap URL page terkait, buatlah minimal 3 Criteria pada setiap URL-nya. Contoh A URLFungsi/GoalCriteriaStatushttps://buildwithangga.com/bootcampMenampilkan beberapa Bootcamp yang tersedia di BWA sehingga student dapat melihat secara details dan mendaftar pada Bootcamp tersebutApakah student dapat melihat konten via mobile?SUCCESSApakah student dapat melihat details dari setiap Bootcamp?SUCCESSApakah student dapat melihat video trailer dari setiap Bootcamp?FAILED How to Apply [Closed. Position has been filled.] Jika sudah menyelesaikan tugas sederhana di atas, waktunya untuk apply magang software quality assurance (wfa) di BuildWith Angga. Siapkan Resume (CV) & Hasil test dengan rapihIsi subject email dengan Magang Jr. SQA Q1 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 6 Januari 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, Kami akan menambahkan informasi CLOSED pada judul loker apabila lowongan magang ini sudah ditutup dan kami sudah mendapatkan kandidat. Informasi selengkapnya bisa DM melalui Instagram kami yaitu BuildWith Angga. Terima kasih.

Goals Bekerja sama dengan ui/ux designer, software engineer, dan marketing untuk menciptakan produk yang bermanfaat untuk masyarakat. Dimulai dari melakukan research, prototyping, dan melakukan usability-testing untuk validasi ide. Responsibilities Melakukan proses Design ThinkingMembuat prototype sederhanaMelakukan usability-testingBelajar ilmu bisnis dan startup Requirements Telah mengerjakan challenge sederhana yang tersedia di bawahTerbiasa menggunakan FigmaBersedia magang selama 3-6 bulan ke depanSedang tidak bekerja full-time/part-time/freelancerSedang tidak sekolah SMA/SMKJika sedang kuliah maka minimal semester 4Fresh graduate (SMK/kuliah) boleh apply magangSudah mengikuti minimal 1 kelas Premium (untuk memastikan bahwa kamu telah terbiasa menggunakan fitur-fitur di website BWA). Benefits Akses seluruh kelas PremiumBelajar hal baru pada sebuah real-world projectUang gaji atau saku bulananProgram pelatihan berbayar di luar program BuildWith Angga Challenge Riset 1 website untuk belajar online misalnya Skillshare.comBuatlah tabel perbandingan antara website tersebut dengan buildwithangga.comTulis tabel tersebut pada Notion.so dan siapkan link yang dapat diakses secara publikKirim link tersebut melalui email di bawah How to Apply [Closed] Siapkan Resume (CV) & Hasil test (berupa link Notion public ) dengan rapihIsi subject email dengan Magang Jr Product Manager 2023Kirim lamaran ke email [email protected] semoga menjadi tercepat dan terbaik Lowongan dibuka pada tanggal 6 Jan 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok, pantau terus Instagram BuildWith Angga untuk informasi terbaru terkait magang. Terima kasih.

Memiliki website dapat memberikan manfaat yang besar dan banyak, beberapa di antaranya adalah dapat meningkatkan bisnis yang kita miliki dalam menjangkau lebih banyak customer secara online, seluruh dunia dengan cepat dan murah. Untuk membangun website kita membutuhkan keahlian koding seperti HTML, CSS, JavaScript, dan juga PHP. Well, pada kali ini kita akan berkenalan dengan Webflow untuk membantu kita dalam membangun website tanpa harus menggunakan koding. 1) Tidak Perlu Install, Daftar dan Mulai Bikin Website Yes, alasan utamanya adalah tidak perlu diribetkan dengan download dan install software terlebih dahulu. Kita hanya perlu mengunjungi website Webflow dan daftar menggunakan email atau akun google yang sudah kita miliki saat ini. 2) Tersedia Ratusan Template, Jadi Lebih Cepat Apabila kita tidak punya bakat design namun ingin memiliki website yang menarik, cantik, dan memiliki user experience yang baik maka kita bisa menggunakan template yang telah disediakan oleh profressional developer dan designer pada website Webflow. 3) Gratis, Bahkan Untuk Projek Komersil Untuk kamu yang belum punya kartu kredit atau budget untuk membangun website dari klien maka bisa menggunakan Webflow secara gratis, ya walaupun hanya untuk 1 projek saja tapi sudah lumayan banget sih, nanti hasil uang dari klien bisa kita pake untuk langganan premium. 4) Bikin Website Lalu Deploy Tidak perlu memikirkan biaya server atau cara membeli server karena pada Webflow kita bisa melakukan deployment dengan mudah sehingga projek website yang kita bangun dapat diakses secara online oleh jutaan orang dari seluruh dunia, kamu perlu cobain nih. 5) Banyak Resource Untuk Belajar Webflow Karena popularitas Webflow yang cukup tinggi maka di luar sana juga banyak yang menyediakan kelas atau tutorial untuk mempelajari Webflow, salah satunya adalah website BuildWith Angga yang didirikan oleh mentor-mentor professional dari Indonesia.

Pekerjaan Front-End Developer dapat dikatakan memiliki jenjang karir yang panjang dan sangat dibutuhkan, selain itu juga gaji yang ditawarkan untuk fresh graduate juga tergolong besar, dimulai dari 5-10 juta per bulannya, siapa yang tidak mau? hehehe. Banyak yang dari kita berpikir bahwa untuk jadi Front-End Developer harus kuliah dulu dengan jurusan sistem informasi atau teknik informatika, well, faktanya apabila kita belum punya biaya kuliah maka bisa menggunakan beberapa langkah berikut. Cara Berkarir Front-End Developer Tanpa Harus Kuliah 1) Pelajari Karir HandBook Karir HandBook adalah panduan lengkap dan resmi yang dibuat oleh BuildWith Angga, pada handbook tersebut kita bisa mengenal cara menjadi Front-End Developer serta tanggungjawab utamanya sehingga langkah awal kita menjadi lebih mudah lagi tanpa harus membuang waktu browsing sana sini. 2) Ikuti Alur Belajar BuildWith Angga BuildWith Angga saat ini menyediakan banyak sekali alur belajar untuk pekerjaan IT yang bergaji tinggi, salah satunya yaitu adalah Front-End Developer yang bisa kita pelajari saat ini juga. Pada alur belajar tersebut tersedia banyak kelas gratis yang bisa kita pelajari untuk membangun fundamental skills sebagai Front-End Developer. 3) Bangun Sebuah Mini Project Ketika mempelajari fundamental skills seperti HTML, CSS, dan JavaScript. Selanjutnya kita bisa membuat projek pertama kita misalnya landing page untuk jualan baju atau sepatu, atau bahkan website untuk cari penginapan secara online. Mini projek dapat membantu kita untuk mendapatkan pekerjaan karena perusahaan bukan hanya bertanya kita bisa skills apa saja, akan tetapi portfolio juga dibutuhkan untuk memvalidasi apakah kita sudah bisa dikatakan sebagai Front-End Developer. Ketika membangun Mini Project kita bisa mengenal beberapa tools Front-End Developer seperti Bootstrap CSS, Visual Studio Code, Postman API, Netlify, dan tools bagus lainnya. Untuk Kamu Yang Ingin Berkarir di Bidang IT Jangan menyerah apabila belum memiliki dana kuliah karena kamu bisa memulai dengan gratis dan bekerja untuk 1-2 tahun sebagai Front-End Developer lalu menabung dan melanjutkan kuliah jika dirasa dibutuhkan saat itu, tetap semangat ya.

Hello people spirit of learning! Dalam mengerjakan aplikasi project flutter, kita membutuhkan waktu yang cukup lama. Terlebih lagi jika klien ingin aplikasi yang kita bangun ingin cepat jadi. Dalam flutter ada istilah package. yang fungsinya untuk mempercepat pengerjaan project. Untuk menginstallnya kita akan langsung masuk ke dalam tutorialnya. Kunjungi Website Pub.dev Website ini berisi package-package yang kita bisa gunakan dalam pengembangan project flutter. Cari Nama Package yang kita butuhkan. Disini kita coba dengan package yang sering digunakan dalam pengembangan project flutter, yaitu Google Fonts. Pilih yang paling atas. Install Package Ada 2 cara untuk menginstall package, Cara 1 dengan menggunakan command prompt, dan cara 2 dengan menambahkan di pubspec.yaml bagian dependencies. Disini kita menggunakan cara ke 2 saja. Caranya pertama kita copy nama package nya. Setelah itu kita masuk ke dalam project flutter, pilih Pubspec.yaml Dan terakhir kita paste ke dalam dependencies Untuk cara menggunakan packagenya, bisa dilihat pada bagian Readme ataupun example pada package tersebut. Implementasi Package return MaterialApp( home: Scaffold( body: Center( child: Text( 'Hello, Roberto Janitra', style: GoogleFonts.aladin(fontSize: 20), )), )); Untuk cara implementasinya, caranya cukup mudah tinggal tambahkan GoogleFonts dan get nama fontnya pada properti style. Sangat mudah bukan ? kalian bisa menggunakan google font ini sesuai dengan kebutuhan projek kalian ingin pakai font yang mana. Package google font ini sangat efisien dalam pengerjaan project flutter, Sebelumnya kita harus ke website google font dan mendownload jenis font dan ketebalannya secara satu-satu. Dengan package ini kita tidak perlu mendownloadnya lagi karena semua font dalam google sudah tersedia. Terima kasih dan semoga bermanfaat!

Goals Membantu perusahaan untuk menjaga perfomance karyawan pada setiap tugas yang mereka jalankan sehingga dapat mencapai goal besar perusahaan dalam membantu masyarakat Indonesia belajar design dan coding dengan baik. Responsibilities Monitor staff performance and attendance activitiesHandling Recruitment, Payroll, Compensation & Benefit, KPI, BPJS, Industrial Relation, etc Prepare and monitoring employee contract agreement Prepare and monitoring Business Trip Prepare, develop and implement HR Procedure and policies Provide advice and recommendations on disciplinary actions Perform other related duties as required Requirements Minimal lulusan S1 Minimal pengalaman 1 tahunMengutamakan tinggal di Bandung, jika dari luar Bandung bisa pindah ke BandungMenguasai bahasa Inggris tingkat menengahSedang tidak bekerja freelancer, part time, full timeBoleh bekerja dari rumah maksimal 2x dalam seminggu dan sisanya akan bekerja pada kafe Starbucks (biaya kopi akan ditanggung perusahaan). Challenge Jawab beberapa pertanyaan berikut: Bagaimana langkah utama yang akan Anda lakukan apabila melihat perfomance kerja karyawan di bawah dari yang diharapkan perusahaan?Bagaimana cara Anda memastikan bahwa karyawan yang under perfomance bisa menjadi lebih baik lagi dalam 1-3 minggu ke depan?Bagaimana cara Anda mengatasi apabila ada karyawan yang mencuri dan memperjualbelikan informasi perusahaan secara ilegal? Kirim jawaban di atas melalui email di bawah. How to Apply Siapkan Resume (CV) & jawaban test pada body emailIsi subject email dengan HRD 2023 BandungKirim lamaran ke email [email protected] Lowongan dibuka pada tanggal 2 Januari 2023 dan ditutup ketika kami sudah mendapatkan beberapa kandidat yang cocok. Informasi penerimaan akan diumumkan pada Instagram BuildWith Angga, stay tuned.