10 Library Flutter Paling Dibutuhkan Mobile App Developer
10 Library Flutter Paling Dibutuhkan Mobile App Developer
Sebelum kamu memulai untuk belajar tentang Flutter, ada baiknya kamu harus mengenal terlebih dahulu 10 Library Flutter yang bisa kamu gunakan untuk mengembangkan aplikasi mobile, atau kamu mau lebih dalam lagi belajar tentang Flutter? Yuk join kelas Flutter di BuildWithAngga.
Library Flutter adalah kumpulan kode terbuka yang bisa digunakan untuk developer mengembangkan aplikasi Flutter. Nah kumpulan kode inilah yang nantinya bisa membuat berbagai jenis fitur maupun fungsi untuk bisa membantu developer membangun aplikasi yang lebih canggih dan kompleks. Tetapi sebelum kita mengenal 10 Library Flutter, yuk mari kenalan dulu dengan berbagai jenis library yang ada di Flutter.dev :
Core Libraries : Kumpulan kode ini memiliki fungsi dasar untuk membantu developer dalam membangun aplikasinya seperti pembuatan widget, animasi, rendering, dan UI.Material Library : Kumpulan kode ini yang membantu developer untuk membangun aplikasi mobile dengan Material Design yang berjalan dengan baik di berbagai platform.Cupertino Library : Kumpulan kode yang menyediakan widget untuk membantu developer dalam membangun aplikasi dengan iOS sehingga dapat berjalan dengan baik.Widgets : Kumpulan kode yang dapat membantu developer untuk mengembangkan UI pada aplikasi.
Setelah kamu mengenal jenis-jenis dari library yang ada di Flutter.dev. Pasti kamu tidak sabar mengenal 10 Library Flutter yang bermanfaatkan?đ€ Letâs go kita bedah.
1. Url_Launcher
Url_launcher adalah library yang dapat membantu developer dalam mengembangkan aplikasi mobile, dengan menambahkan fitur untuk pindah URL eksternal dari aplikasi yang anda buat. URL ini biasanya dibuat dalam bentuk tautan website, alamat email, dan bisa juga ke nomor telepon.
Contoh penggunaan url_launcher :
import 'package:url_launcher/url_launcher.dart';
void main() {
// Meluncurkan tautan web
launch('https://www.buildwithangga.com');
// Meluncurkan alamat email
launch('mailto:[email protected]');
// Meluncurkan nomor telepon
launch('tel:+62123456789');
}
2. Flutter_form_builder
Flutter_form_builder adalah library yang dapat membantu developer dalam membuat sebuah formulir yang berisi untuk mengumpulkan data pengguna, membuat formulir, dan memvalidasi data yang di input.
Contoh penggunaan flutter_form_builder :
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example of Population Data Form in country X',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyFormPage(),
);
}
}
class MyFormPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Example of Population Data Form in country X '),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: FormBuilder(
child: Column(
children: [
FormBuilderTextField(
name: 'name',
decoration: InputDecoration(labelText: 'Name'),
validator: FormBuilderValidators.required(context),
),
SizedBox(height: 16),
FormBuilderDropdown(
name: 'gender',
decoration: InputDecoration(labelText: 'Gender'),
items: ['Male', 'Female']
.map((gender) => DropdownMenuItem(
value: gender,
child: Text(gender),
))
.toList(),
),
SizedBox(height: 16),
FormBuilderCheckbox(
name: 'accept_terms',
title: Text('Accept Terms'),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
if (FormBuilder.of(context).validate()) {
var formData = FormBuilder.of(context).value;
print(formData);
}
},
child: Text('Submit'),
),
],
),
),
),
);
}
}
3. Path_provider
Path_provider adalah library yang dapat membantu developer dalam mendapatkan penyimpanan yang baik untuk aplikasi mobile yang dibuat di berbagai platform seperti Android, iOS, Web/Desktop. Library ini biasanya digunakan untuk menyimpan file gambar, cache maupun data aplikasi lainnya.
Contoh penggunaan path_provider :
import 'package:path_provider/path_provider.dart';
Future<void> saveImage(String imagePath, Uint8List bytes) async {
final directory = await getTemporaryDirectory(); // Mendapatkan direktori sementara
final file = File('${directory.path}/$imagePath');
await file.writeAsBytes(bytes); // Menyimpan gambar ke file
}
Future<String> loadLocalData() async {
final directory = await getApplicationDocumentsDirectory();
// Mendapatkan direktori dokumen
final file = File('${directory.path}/data.json');
if (await file.exists()) {
final contents = await file.readAsString(); // Membaca data dari file
return contents;
} else {
return ""; // Kembalikan string kosong jika file tidak ada
}
}
Tambahan untuk teman-teman :
Sebelum temen-temen harus menggunakan direktori sesuai dengan kebutuhan ya. Contohnya file sementara > direktori sementara.Periksa kembali untuk file yang sudah ada apakah sudah tertulis data ke dalamnya.
4. Scooped_model
Scoped_model adalah library yang dapat memudahkan developer untuk bisa membuat model data dari widget utama ke turunannya. Memiliki 3 jenis utama yaitu model class, scope model widget, dan scopeModelDescendant widget.
Contoh penggunaan scooped_model :
import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
void main() {
runApp(MyApp(
model: CounterModel(),
));
}
class MyApp extends StatelessWidget {
final CounterModel model;
const MyApp({Key? key, required this.model}) : super(key: key);
@override
Widget build(BuildContext context) {
// At the top level of our app, we'll, create a ScopedModel Widget. This
// will provide the CounterModel to all children in the app that request it
// using a ScopedModelDescendant.
return ScopedModel(
model: model,
child: MaterialApp(
title: 'Scoped Model Demo',
home: CounterHome('Scoped Model Demo'),
),
);
}
}
// Start by creating a class that has a counter and a method to increment it.
//
// Note: It must extend from Model.
class CounterModel extends Model {
int _counter = 0;
int get counter => _counter;
void increment() {
// First, increment the counter
_counter++;
// Then notify all the listeners.
notifyListeners();
}
}
class CounterHome extends StatelessWidget {
final String title;
CounterHome(this.title);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('You have pushed the button this many times:'),
// Create a ScopedModelDescendant. This widget will get the
// CounterModel from the nearest parent ScopedModel.
// It will hand that CounterModel to our builder method, and
// rebuild any time the CounterModel changes (i.e. after we
// `notifyListeners` in the Model).
ScopedModelDescendant(
builder: (context, child, model) {
return Text(
model.counter.toString(),
style: Theme.of(context).textTheme.headline4,
);
},
),
],
),
),
// Use the ScopedModelDescendant again in order to use the increment
// method from the CounterModel
floatingActionButton: ScopedModelDescendant(
builder: (context, child, model) {
return FloatingActionButton(
onPressed: model.increment,
tooltip: 'Increment',
child: Icon(Icons.add),
);
},
),
);
}
}
5. Flutter_bloc
Flutter_bloc adalah library yang dapat membantu developer untuk mengembangkan state aplikasi dengan cara menggunakan pola bloc (Business Logic Component). Pola bloc ini pada prinsipnya dapat membantu teman-teman untuk dapat membuat aplikasi yang lebih mudah untuk dipelihara serta dikembangkan.
Contoh penggunaan flutter_bloc :
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
void main() {
runApp(MyApp());
}
class CounterBloc extends Bloc {
CounterBloc() : super(0);
@override
Stream mapEventToState(int event) async* {
yield state + event;
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: BlocProvider(
create: (context) => CounterBloc(),
child: CounterPage(),
),
);
}
}
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final CounterBloc _counterBloc = BlocProvider.of(context);
return Scaffold(
appBar: AppBar(title: Text('Counter App')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BlocBuilder(
builder: (context, count) {
return Text(
'Count: $count',
style: TextStyle(fontSize: 24),
);
},
),
SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
onPressed: () => _counterBloc.add(1),
child: Icon(Icons.add),
),
SizedBox(width: 10),
FloatingActionButton(
onPressed: () => _counterBloc.add(-1),
child: Icon(Icons.remove),
),
],
),
],
),
),
);
}
}
6. HTTP
HTTP atau Hypertext Transfer Protocol adalah protokol yang digunakan untuk menghubungkan data komunikasi di web. Manfaatnya adalah HTTP dapat digunakan untuk mengambil data dari server, contohnya seperti data JSON.
Contoh penggunaan HTTP :
import 'package:http/http.dart' as http;
void main() async {
final response = await http.get('https://www.buildwithangga.com');
if (response.statusCode == 200) {
final body = await response.body.readAsString();
print(body);
} else {
print('Error: ${response.statusCode}');
}
}
Tambahan untuk teman-teman :
Perhatikan headers dan body requests.Error harus ditanganin dengan tepat.
7. Get/GetX
Get/GetX adalah library yang memberikan solusi kepada developer untuk mengembangkan aplikasinya dengan cara menggabungkan High-Performance State Management dan Intelligent Dependency Injection pada aplikasi. Developer tidak perlu lagi mengubah kontrol dari memori. Dengan GetX, memori yang tidak digunakan akan langsung dihapus secara default.
Contoh penggunaan Get/GetX :
void main() => runApp(MaterialApp(home: Home()));
class Home extends StatelessWidget {
var count = 0.obs;
@override
Widget build(context) => Scaffold(
appBar: AppBar(title: Text("counter")),
body: Center(
child: Obx(() => Text("$count")),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => count ++,
));
}
8. Intl
Intl adalah library yang dapat memudahkan developer untuk menangani contoh kasus seperti perbedaan bahasa, tanggal, serta angka yang ada pada aplikasi. Sehingga aplikasi dapat digunakan diberbagai platform dan diberbagai tempat.
Contoh penggunaan intl :
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Intl Package Example',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Format a date using the intl package
var formattedDate = DateFormat.yMMMMd().format(DateTime.now());
// Translate a message using the intl package
var translatedMessage = Intl.message(
'Hello, welcome to our app!',
name: 'welcomeMessage',
desc: 'Welcome message for the app',
);
return Scaffold(
appBar: AppBar(
title: Text('Intl Package Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Formatted Date: $formattedDate'),
Text(translatedMessage),
],
),
),
);
}
}
9. File_picker
File_picker adalah library yang sering digunakan oleh developer dalam mengembangkan aplikasinya. Fungsinya adalah untuk membantu developer bisa masuk ke file aslinya dengan cepat, sehingga developer dapat memilih file dengan jenis tertentu, seperti dokumen maupun gambar.
Contoh penggunaan file_picker :
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: FilePickerScreen(),
);
}
}
class FilePickerScreen extends StatefulWidget {
@override
_FilePickerScreenState createState() => _FilePickerScreenState();
}
class _FilePickerScreenState extends State {
String? _filePath;
Future _pickFile() async {
FilePickerResult? result = await FilePicker.platform.pickFiles(
type: FileType.image,
);
if (result != null) {
setState(() {
_filePath = result.files.single.path;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('File Picker Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
if (_filePath != null)
Image.file(
File(_filePath!),
height: 200,
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _pickFile,
child: Text('Pick an Image'),
),
],
),
),
);
}
}
10. Badges
Badges adalah library yang sering juga digunakan oleh developer untuk membuat icon atau teks yang dapat memberikan informasi tambahan kepada pengguna. Sebagai contoh, developer dapat menggunakan Badges untuk menampilkan pemberitahuan, jumlah item di dalam keranjang, jumlah pesan yang belum dibaca.
Contoh penggunaan badges :
import 'package:flutter/material.dart';
import 'package:badges/badges.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Badge Example'),
),
body: Center(
child: Badge(
badgeContent: Text('3'),
child: IconButton(
icon: Icon(Icons.shopping_cart),
onPressed: () {
// Open the shopping cart or perform an action
},
),
),
),
),
);
}
}
Kesimpulan
Library Flutter memiliki manfaat yang besar untuk membantu developer dalam proses pengembangan aplikasi. Tentu, untuk terjun ke Flutter kita perlu mengenal dahulu apa saja library yang bisa membantu kita dalam pembuatan aplikasi mobile. Selain menghemat waktu dan tenaga, dengan kita mengenal library kita juga bisa meningkatkan kualitas pada aplikasi yang kita buat, serta memperkaya fitur aplikasi.
Kamu bisa mempelajarinya lebih lanjut dengan mengikuti kelas online gratis belajar flutter di BuildWithAngga loh!đ Dengan belajar di BuildWithAngga kamu bisa belajar dengan mentor yang berpengalaman dan selalu siap membantu kamu untuk meningkatkan skill programming kamu. Eitss tunggu dulu, setiap kamu menyelesaikan kelasnya kamu bakal dikasih sertifikat loh!đ€© Yuk buruan belajar bersama BuildWithAngga.
Akses kelas selamanya
Masuk /
Daftar
.png)
.png)
