Belajar Flutter dan Membuat Navigasi Menggunakan flutlab.io
FlutLab.io: Solusi Pengembangan Flutter Langsung dari Browser
FlutLab.io adalah platform inovatif yang dirancang khusus untuk para pengembang aplikasi menggunakan Flutter. Dengan FlutLab, Anda tidak perlu repot-repot menginstal Android Studio, Visual Studio Code, atau perangkat lunak lain untuk mulai membuat aplikasi. Semua kebutuhan pengembangan Flutter sudah tersedia secara online. Platform ini memadukan kemudahan akses, kecepatan, dan efisiensi, menjadikannya pilihan ideal bagi pemula maupun profesional.
Kelebihan FlutLab.io
Pengembangan Langsung di Browser
Tidak perlu instalasi perangkat lunak. Cukup buka browser, login ke FlutLab.io, dan mulai membuat aplikasi.Kompatibilitas Penuh dengan Flutter
Mendukung seluruh fitur Flutter, termasuk widget terbaru, pustaka eksternal, dan fitur desain modern.Realtime Editor dan Emulator
Anda bisa menulis kode, menjalankan aplikasi, dan melihat hasilnya secara langsung di emulator bawaan FlutLab.Kolaborasi Tanpa Batas
Bagikan proyek dengan tim atau teman Anda, sehingga pengembangan aplikasi dapat dilakukan secara bersamaan.Penghematan Sumber Daya
Tidak memerlukan komputer dengan spesifikasi tinggi. Semua proses dijalankan di server FlutLab, membuat pengembangan lebih ringan dan cepat.Mudah diakses Kapan Saja, Di Mana Saja
Selama Anda memiliki koneksi internet, FlutLab dapat digunakan di perangkat apa pun, baik itu PC, laptop, atau tablet.
Cara Menggunakan FlutLab.io
Daftar dan Login
- Buka FlutLab.io.
- Buat akun dengan email atau login menggunakan akun Google.
Buat Proyek Baru
- Setelah login, klik tombol "Create Project" di dashboard.
- Pilih template aplikasi atau mulai dari awal dengan template kosong.
Mulai Menulis Kode
- Gunakan editor kode yang sudah tersedia.
- Editor FlutLab mendukung fitur seperti auto-complete dan highlight sintaks untuk mempermudah penulisan kode.
- main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Aplikasi Flutter'),
),
body: Center(
child: Text('Halo, Flutter!'),
),
),
);
}
}
Jalankan dan Lihat Hasilnya
- Klik tombol Run untuk menjalankan aplikasi Anda.
- Hasilnya akan muncul langsung di emulator bawaan.
Ekspor Proyek
- Jika sudah selesai, Anda dapat mengunduh proyek dan melanjutkan pengembangan di IDE lokal seperti Android Studio.
- FlutLab juga memungkinkan Anda untuk menghasilkan file APK atau IPA (untuk iOS).
Bagikan Proyek Anda
- FlutLab menyediakan tautan khusus untuk membagikan kode atau hasil proyek dengan orang lain.
Mengapa Memilih FlutLab.io?
FlutLab adalah solusi ideal bagi mereka yang ingin belajar Flutter dengan cepat atau ingin mengembangkan prototipe tanpa hambatan teknis. Dukungan yang konsisten terhadap versi terbaru Flutter dan fleksibilitasnya membuat FlutLab menjadi salah satu platform terbaik untuk pengembangan aplikasi lintas platform. Berikut contoh kodingan pada flutter.io
1. Cara membuat Form sederhana
a. main.dart
import 'package:flutter/material.dart';
import 'profile.dart';
import 'form_profile.dart';
void main() {
runApp(Widget_Text()); # sesuaikan dengan judul program
}
class Widget_Text extends StatelessWidget { # nama class = void main
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Membuat Form Profile', # tampilan judul
debugShowCheckedModeBanner: false,
home: Form_profile(), # Nama File yang diambil dari nama Class
);
}
}
b. form_profile.dart
import 'package:flutter/material.dart';
class Form_profile extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Latihan Text Form Field'),
backgroundColor: Color(0xff8fc9f9),
),
body: SingleChildScrollView( # Form nama
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
prefixIcon: Icon(Icons.person),
hintText: 'Masukan Nama Anda',
labelText: 'Nama',
),
),
SizedBox(
height: 15, # memberi jarak antar baris
),
TextFormField( # form number / numerik
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
prefixIcon: Icon(Icons.phone), # menambahkan icon
hintText: ' Masukan Nomor Telepon',
labelText: 'Nomor Telepon',
prefixText: '+62'),
),
SizedBox(
height: 15,
),
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
prefixIcon: Icon(Icons.email),
hintText: 'Masukan Email Anda',
labelText: 'Email',
),
),
SizedBox(
height: 15,
),
TextFormField(
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Masukan Pegalaman Anda',
labelText: 'Pengalaman',
),
),
SizedBox(
height: 15,
),
TextFormField( # membuat form harga
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Salary',
prefixText: '\$',
suffixText: 'Rupiah',
suffixStyle: TextStyle(color: Colors.green),
),
),
SizedBox(
height: 15,
),
TextFormField( # form password
obscureText: true,
maxLength: 8,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
suffixIcon: Icon(Icons.visibility),
labelText: 'Password',
),
),
SizedBox(
height: 15,
),
],
),
),
),
);
}
}
c. deskripsi.dart
import 'package:flutter/material.dart';
class Deskripsi extends StatelessWidget { # nama Class
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Deskripsi'),
backgroundColor: Colors.amberAccent,
),
body: Padding(
padding: EdgeInsets.all(10),
child: Text( # deskripsi
'mari belajar flutter bersamakuu :)',
maxLines: 10,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'just_shemy', # jenis font
color: Color(0xfffffdfc), # warna font
fontStyle: FontStyle.italic, # font miring
fontWeight: FontWeight.bold, # font tebal
fontSize: 35, # ukuran font
backgroundColor: Colors.green, # warna latar belakang
decoration: TextDecoration.underline, # garis bawah
),
),
),
);
}
}
2. Cara membuat Profile sederhana
a. main.dart
import 'package:flutter/material.dart';
import 'profile.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Profile Mahasiswa',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Profile(),
);
}
}
b. profile.dart
import 'package:flutter/material.dart';
class Profile extends StatelessWidget { # nama class
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile Siswa'),
backgroundColor: Color(blue),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
CircleAvatar( # upload foto
radius: 40,
backgroundImage:
AssetImage('assets/abc.jpg'), // Pastikan jalurnya benar
child: ClipOval(
child: Image.asset(
'assets/abc.jpg', // Pastikan jalurnya benar
fit: BoxFit.cover, // Pastikan gambar terisi penuh
width: 100, // Ukuran lebar
height: 100, // Ukuran tinggi
),
),
),
SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Indah Pertiwi',
style:
TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
Text(
'Nomor : 22446688',
style: TextStyle(fontSize: 16, color: Colors.grey),
),
],
),
],
),
SizedBox(height: 10), # jarak
Divider(),
buildProfileItem(Icons.school, 'Program Studi', 'IPA'),
buildProfileItem(Icons.book, 'Program', 'SMA'),
buildProfileItem(Icons.class_, 'Kelas', 'IPA2'),
buildProfileItem(
Icons.person_outline, 'Wali Kelas', 'Ibu Nur S.kom.'),
buildProfileItem(Icons.location_on, 'Alamat',
'Jalan S. Parman Semarang'),
Divider(),
Text(
'Tentang Saya:',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Text(
'Saya seorang siswi di jurusan IPA Biologi, '
'saya ingin menjadi Dokter yang hebat.',
style: TextStyle(
fontSize: 20,
fontFamily: 'chillin_notez', #jenis font
color: Color(0xffed6ac6), #warna font
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
# berikut adalah widget logikanya Widget buildProfileItem(IconData icon, String title, String value) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Row(
children: [
Icon(icon, color: Color(0xffd891b4)),
SizedBox(width: 16),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
Text(
value,
style: TextStyle(fontSize: 16),
),
],
),
],
),
);
}
}
c. pubspec.yaml
name: coba_profile # nama projek
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=3.0.0 <4.0.0"
dependencies:
flutter:
sdk: flutter
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.2
flutter: # memanggil file gambar
uses-material-design: true
assets:
- assets/abc.jpg # nama file foto
- assets/bcd.jpg # tempat foto berada
fonts: # memanggil font custom
- family: chillin_notez
fonts:
- asset: assets/fonts/Chillin Notez.ttf # tempat font berada
3. Cara membuat Navigasi sederhana
a. main.dart
import 'package:flutter/material.dart';
import 'menu_kel10.dart';
import 'profile_kel10.dart';
import 'tentang_kel10.dart';
import 'buku_tamu_kel10.dart';
void main() {
runApp(Tugas_kelompok10());
}
class Tugas_kelompok10 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tugas Kelompok 10',
debugShowCheckedModeBanner: false,
home: Menu_kel10(),
routes: {
'/profile_kel10': (BuildContext context) => Profile_kel10(),
'/tentang_kel10': (BuildContext context) => Tentang_Kel10(),
'/buku_tamu_kel10': (BuildContext context) => Buku_tamu_kel10(),
},
);
}
}
b. Menu.dart
import 'package:flutter/material.dart';
class Menu_kel10 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kelompok 10'),
backgroundColor: Colors.blue,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Divider(),
MaterialButton(
color: Color(0xffff4040),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.person, color: Colors.white),
SizedBox(width: 10),
Text('Profile Kelompok 10'),
],
),
onPressed: () {
Navigator.of(context).pushNamed('/profile_kel10');
},
),
Divider(),
MaterialButton(
color: Colors.amberAccent,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.book, color: Colors.white),
SizedBox(width: 10),
Text('Buku Tamu'),
],
),
onPressed: () {
Navigator.of(context).pushNamed('/buku_tamu_kel10');
},
),
Divider(),
MaterialButton(
color: Color(0xff73ff40),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.info, color: Colors.white),
SizedBox(width: 10),
Text('Tentang Kelompok 10'),
],
),
onPressed: () {
Navigator.of(context).pushNamed('/tentang_kel10');
},
),
Divider(),
],
),
);
}
}
c. Profile.dart
import 'dart:html';
import 'package:flutter/material.dart';
import 'package:tugas_kelompok10/profile_kel10_rasty.dart';
import 'package:tugas_kelompok10/profile_kel10_selvi.dart';
import 'package:tugas_kelompok10/profile_kel10_lilis.dart';
class Profile_kel10 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile Kelompok 10'),
backgroundColor: Colors.green,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Divider(),
MaterialButton(
color: Color(0xffb2a9fc),
child: Text('Lilis Oktavia'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Profile_kel10_lilis()),
);
},
),
Divider(),
MaterialButton(
color: Color(0xfff991df),
child: Text('Selvi Hidayah'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Profile_kel10_selvi()),
);
},
),
Divider(),
MaterialButton(
color: Color(0xffcdffba),
child: Text('Putri Rastya Rosmila'),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Profile_kel10_rasty()),
);
},
),
Divider(),
],
),
);
}
}
d. Deskripsi.dart
import 'package:flutter/material.dart';
void main() {
runApp(Tentang_Kel10());
}
class Tentang_Kel10 extends StatelessWidget {
final String deskripsiKelompok =
'Di Kelompok 10, kita punya trio dengan kekuatan super.';
final String deskripsiSelvi =
'Selvi si pengatur waktu yang selalu memastikan setiap tugas dimulai tepat waktu. Dengan gaya manajerialnya, Selvi mengatur segala hal dari deadline hingga camilan rapat, memastikan semuanya berjalan lancar.';
final String deskripsiRasty =
'Rasty si kreatif dengan ide-ide brilian. Saat tim kesulitan mencari solusi, Rasty hadir dengan ide segar yang kadang bikin terkejut. Semangatnya memotivasi kami untuk berpikir di luar kotak.';
final String deskripsiLilis =
'Lilis multitasker handal yang bisa mengerjakan banyak hal sekaligus tanpa kehilangan fokus. Keahliannya dalam coding dan memecahkan bug membuat tugas selesai dengan cepat, sambil tetap menjaga mood grup tetap ceria.';
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Tentang Kami - Kelompok 10'),
backgroundColor: Color(0xffec98b4),
),
backgroundColor: Color(0xfff8f4fc),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildProfileCard(
context,
'Selvi',
deskripsiSelvi,
'https://i.pinimg.com/1200x/a7/c1/7f/a7c17f5f595a4ee54e9a76cec0ed9874.jpg', // URL Avatar Selvi
),
SizedBox(height: 10),
_buildProfileCard(
context,
'Rasty',
deskripsiRasty,
'https://i.pinimg.com/736x/9c/b6/6d/9cb66d85ff67c75b1d33f490211a80cf.jpg', // URL Avatar Rasty
),
SizedBox(height: 10),
_buildProfileCard(
context,
'Lilis',
deskripsiLilis,
'https://i.pinimg.com/736x/62/b8/b8/62b8b8845bd918afb23179beea084502.jpg', // URL Avatar Lilis
),
SizedBox(height: 20),
MaterialButton(
color: Color(0xffe99cb8),
child: Text('Kembali'),
onPressed: () {
Navigator.pop(context);
},
),
],
),
),
),
),
),
);
}
Widget _buildProfileCard(
BuildContext context, String name, String description, String avatarUrl) {
return Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
elevation: 5,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
backgroundImage: NetworkImage(avatarUrl),
radius: 30,
onBackgroundImageError: (error, stackTrace) {
// Jika gambar tidak bisa dimuat, gunakan warna latar belakang
print('Gagal memuat gambar: $error');
},
backgroundColor: Colors.grey[200],
),
SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.pinkAccent,
),
),
SizedBox(height: 5),
Text(
description,
style: TextStyle(fontSize: 16),
),
],
),
),
],
),
),
);
}
}
e. Form.dart
import 'package:flutter/material.dart';
class Buku_tamu_kel10 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Form Buku Tamu'),
backgroundColor: Color(0xff8fc9f9),
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(10),
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
prefixIcon: Icon(Icons.person),
hintText: 'Masukan Nama Anda',
labelText: 'Nama',
),
),
SizedBox(
height: 15,
),
TextFormField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
prefixIcon: Icon(Icons.phone),
hintText: ' Masukan Nomor Telepon',
labelText: 'Nomor Telepon',
prefixText: '+62'),
),
SizedBox(
height: 15,
),
TextFormField(
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
prefixIcon: Icon(Icons.email),
hintText: 'Masukan Email Anda',
labelText: 'Email',
),
),
SizedBox(
height: 15,
),
TextFormField(
maxLines: 3,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Masukan Pegalaman Anda',
labelText: 'Pengalaman',
),
),
SizedBox(
height: 15,
),
TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Salary',
prefixText: '\$',
suffixText: 'Rupiah',
suffixStyle: TextStyle(color: Colors.green),
),
),
SizedBox(
height: 15,
),
TextFormField(
obscureText: true,
maxLength: 8,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
suffixIcon: Icon(Icons.visibility),
labelText: 'Password',
),
),
SizedBox(
height: 15,
),
],
),
),
),
);
}
}
Terima Kasih yang Tulus untuk Dukungan Anda
Kami ingin mengucapkan terima kasih yang sebesar-besarnya kepada Anda karena telah meluangkan waktu untuk mengikuti dan mendukung blog kami. Setiap kunjungan, komentar, dan apresiasi yang Anda berikan adalah sumber motivasi terbesar bagi kami untuk terus berbagi informasi, ide, dan inspirasi melalui setiap tulisan yang kami sajikan.
Melalui blog ini, kami berkomitmen untuk memberikan konten yang bermanfaat, menarik, dan relevan dengan kebutuhan serta minat Anda. Dukungan Anda tidak hanya membantu kami tumbuh, tetapi juga memberikan semangat untuk terus meningkatkan kualitas dan memperluas wawasan yang kami bagikan.
Kami sangat menghargai kepercayaan Anda, dan kami berharap hubungan ini akan terus terjalin dengan baik. Jangan ragu untuk memberikan masukan, ide, atau saran, karena kontribusi Anda adalah bagian penting dari perjalanan kami.
Sekali lagi, terima kasih atas waktu dan perhatian Anda. Kami sangat menghargai keberadaan Anda di komunitas kecil ini, dan kami berharap blog ini dapat terus menjadi tempat yang nyaman untuk Anda kunjungi. 🙏😊
Komentar
Posting Komentar