Tips Code

Hello people spirit of learning! Pada aplikasi messaging seperti email, Saat ada message masuk pasti kita bisa menggesernya baik archive, delete , dan lain sebagainya. Itu kita bisa lakukan dengan menggunakan package Slidable. Sliable adalah item daftar yang dapat digeser dengan tindakan penggeseran arah yang dapat ditutup. Kita langsung saja masuk ke dalam tutorialnya. 1. Kunjungi Website Pub.Dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari keyword Sliadble Langkah kedua adalah ketik keyword Slidable. Pilih yang paling atas. 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. 4. Implementasi Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_slidable/flutter_slidable.dart'; void main(List args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( body: ListView(children: [ sliableExample( icon1: Icons.archive_outlined, icon2: Icons.delete, listTile: ListTile( tileColor: Colors.cyan, title: Text('Slide me Please', style: TextStyle( fontWeight: FontWeight.w700, color: Colors.white)), ), ), SizedBox(height: 30), sliableExample( listTile: ListTile( title: Text('Slide me please'), tileColor: Colors.amber, ), icon1: Icons.send_and_archive, icon2: Icons.delete) ]), ), ), ); } } class sliableExample extends StatelessWidget { final ListTile listTile; final IconData icon1; final IconData icon2; const sliableExample({ super.key, required this.listTile, required this.icon1, required this.icon2, }); @override Widget build(BuildContext context) { return Slidable( startActionPane: ActionPane(motion: ScrollMotion(), children: [ SlidableAction( onPressed: (context) {}, backgroundColor: Colors.blue, flex: 10, icon: icon1, autoClose: true, ), SlidableAction( onPressed: (context) {}, icon: icon2, backgroundColor: Colors.red, flex: 10, ) ]), child: listTile, ); } } Disini kita akan menggunakan 2 StatelessWidget yaitu MyApp dan sliadbleExample. Untuk slideableExample nantinya akan kita gunakan atau turunkan ke class MyApp. Untuk slideableExample kita akan buat variable seperti diatas dan dimasukkan ke dalam constructor. Fungsinya nantinya untuk menginisialisasikan nilai yang kita masukkan nanti. Dalam widget build kita mengembalikan nilai Packagenya yaitu Sliadble. Ada banyak properti yang kita gunakan. Untuk startActionPane fungsinya kita bisa menggeser ke kanan. untuk ScrollMotion adalah jenis animasi scrollnya, dan untuk children kita bisa isi dengan 2 SliableAction. Juga cukup banyak properti. Lalu kita turunkan ke dalam class MyApp. Namun sebelumnya kita isi dengan widget ListView dan diisi dengan 2 slidableExample. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Hello people spirit of learning! Dalam flutter, terdapat bermacam-macam jenis package yang bisa kita pakai. Salah satunya adalah Laoding Animation Widget, yang fungsinya membuat animasi loading menjadi lebih cantik. untuk tutorialnya kita langsung saja mulai ya. 1. Kunjungi Pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari Keyword Loading Animation 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. 4. Install Package import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:loading_animation_widget/loading_animation_widget.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isLoading = false; @override Widget build(BuildContext context) { return isLoading ? loading() : MaterialApp( home: Scaffold( body: Center( child: ElevatedButton( onPressed: () async { setState(() { isLoading = true; }); await Future.delayed(Duration(seconds: 3)); setState(() { isLoading = false; }); }, child: Text('Load data'))), ), ); } } class loading extends StatelessWidget { const loading({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: LoadingAnimationWidget.waveDots(color: Colors.blue, size: 100)), ), ); } } Disini kita menggunakan 2 state ya yaitu Stateful dan Stateless. kita pakai stateful karena nantinya ada perubahan data jika kita melakukan action. Untuk membuat halaman loading kita bisa menggunakan stateless saja. kita bisa menggunakan packagenya dengan memanggil widget LoadingANimationWidget dan getter dengan jenis macam nama animasi loadingnya. dan setelah itu ada 2 properti yang harus diisi yaitu Color dan size. Fungsi dari masing-masing properti yaitu untuk mengatur warna dan ukuran pada animasi loading. Setelah kita membuat halaman pada loading, Kita membuat statefulWidget. Kita buat var bertipe bool yang diisi dengan nilai false. Setelah kita membuat variable, Pada widget build stateful kita buat pekondisian, Jika loading maka Animasi Loading akan berjalan, Jika tidak maka tampilkan halaman khusus untuk Load data. Pada button, kita buat fungsi saat ditekan maka akan ubah state menjadi true, Saat di klik maka akan loading selama 3 detik, Setelah 3 detik maka state akan berubah menjadi false. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Hello people spirit of learning! Dalam flutter terdapat widget elevated button yang fungsinya adalah untuk membuat button dengan kustomisasi kita sendiri. Disini kita akan membuat button tanpa menggunakan shadow. 1. Membuat Elevated Button ElevatedButton(onPressed: () {}, child: Text('Confirm')) Pertama, pastinya kita memanggil widget Elevated Button untuk membuat widget button nya. Nanti hasilnya akan seperti gambar diatas. Untuk isinya kita isi dengan text terlebih dahulu ya dan untuk properti OnPressed nya kita isi dengan function kosong. 2. Membuat Styling Button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), primary: Colors.red, ); Kedua, untuk styling pada button kita membuatnya dengan file terpisah. Tipe data untuk syling button adalah ButtonStyle. dan di getter dengan stlyeFrom. ada banyak properti untuk styling pada button yaitu minimumSize, yang fungsinya membuat ukuran minimum pada button. Lalu shape yang fungsinya memodifikasi bentuk pada button. Primary adalah mengubah background warna pada button, Dan masih banyak lagi. 3. Implementasi Style ke dalam Elevated Button ElevatedButton( style: button, onPressed: () {}, child: Text('Confirm')) Yang ketiga, kita tinggal implementasikan style button pada elevated button. Caranya sangat mudah tinggal panggil properti style lalu isi dengan nama variable style yang baru saja kita buat. 4. Menghilangkan shadow pada elevated button ButtonStyle button = ElevatedButton.styleFrom( minimumSize: Size(130, 55), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), elevation: 0, primary: Colors.red, ); Pada Button, terdapat shadow sedikit di belakang buttonnya. Untuk menghilangkannya, gunakan properti elevation dan diisi dengan 0. fungsi dari properti elevation ialah menambahkan shadow sesuai dengan ukuran yang diisi. Semoga bermanfaat dan terima kasih!

Hello people spirit of learning! Dalam melakukan sign up / sign in, pastinya kita harus membuat suatu kondisi yang cukup panjang. Yang dimana jika tidak menggunakan @test.com atau semacamnya, maka kondisinya harus seperti bagaimana dan seterusnya akan seperti apa. Dalam flutter, terdapat package yang bernama Email Validator. Email validator fungsinya mengecheck apakah yang kita input itu berupa email atau bukan. Disini kita langsung saja masuk ke dalam tutorialnya ya. 1. Kunjungi Pub.dev Website ini adalah tempat package-package flutter berada. Jadi kalo ingin download package yang dibutuhkan bisa disini. 2. Cari keyword Email Validator Langkah kedua adalah ketik keyword email validator. Pilih yang paling atas. 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. 4. Implementasi Package import 'package:email_validator/email_validator.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatefulWidget { const MyApp({super.key}); @override State<MyApp> createState() => _MyAppState(); } class _MyAppState extends State<MyApp> { bool isEmailValid = true; @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Container( width: 325, height: 65, child: TextFormField( style: TextStyle( color: isEmailValid ? Colors.black : Colors.red), onChanged: (value) { print(value); var isValid = EmailValidator.validate(value); print(isValid); if (isValid) { setState(() { isEmailValid = true; }); } else { setState(() { isEmailValid = false; }); } }, decoration: InputDecoration( hintText: "Email", border: OutlineInputBorder( borderSide: BorderSide(color: Colors.blue))), )), ) ], )), ), ); } } State yang kita gunakan disini adalah statefulWidget. Kenapa ? Dengan menggunakan stateful data yang akan kita gunakan nantinya bersifat dinamis. Setelah itu kita membuat textformFieldnya dengan widget TextFormField, Dan mengatur ukurannya kita bisa menggunakan container. Selanjutnya kita styling textformfieldnya dengan menggunakan InputDecoration. Kita akan menggunakan Validasi email pada properti OnChange. properti ini fungsinya bila apa yang kita ketik dalam formfield maka akan terjadi suatu penkondisian yang kita buat. pada OnChange kita masukkan parameter value, dan Membuat variabel khusus untuk mengecheck validasi email menggunakan package EmailValidator dan getter validate diisi dengan parameter value. Setelah itu buat suatu penkondisian jika Validasi email nya benar, Maka setState pada isEmailValid kita jadikan true, Jika tidak maka setState pada isEmailValid kita jadikan false. Begitupun pada warna textnya juga kita buat penkondisian pada properti style. Jika validasi email benar maka warna textnya akan menjadi hitam, Sedangkan validasi email salah maka warna textnya menjadi merah. Maka hasilnya akan seperti ini. Terima kasih dan semoga bermanfaat!

Hello people spirit of learning! Dalam flutter terdapat banyak package yang dapat kita gunakan, salah satu package favorite adalah shimmer. Fungsi dari shimmer ini adalah membuat widget menjadi berkilau. Biasanya digunakan untuk me ngeload sebuah aplikasi. Seperti pada aplikasi lainnya. 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 Shimmer Langkah kedua adalah ketik keyword shimmer. Lalu pilih paling atas 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 void main(List<String> args) { runApp(MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center( child: Shimmer.fromColors( baseColor: Colors.grey, highlightColor: Colors.white, child: Text( 'Loading', textAlign: TextAlign.center, style: TextStyle( fontSize: 40.0, fontWeight: FontWeight.bold, ), ), ), ), ], )), ); } } Untuk menggunakannya kita bisa langsung saja panggil widget Shimmer. didalamnya terdapat 2 properti yaitu child dan gradient. Namun kita menggunakan getter saja yaitu get FromColors. Nantinya didalamnya ada cukup banyak properti. Basecolor untuk warna dasarnya dan highlightColor untuk warna kilaunya, dan child adalah isi dari shimmer nya nanti. Childnya kita isi sebagai text saja dan styling sesuai keinginan kalian. Terima kasih dan semoga bermanfaat!

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!

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.

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!