DAFTAR ISI
1. Pendahuluan
Flutter adalah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi multiplatform (Android, iOS, Web, bahkan Desktop) hanya dengan satu basis kode. Salah satu proyek pemula yang paling populer adalah aplikasi To-Do List, karena selain sederhana, juga melatih kita memahami konsep dasar state management, widget, dan interaksi antar-komponen.
Pada artikel ini, kita akan membahas bagaimana cara membuat aplikasi To-Do List sederhana dengan Flutter, menjalankannya di HP Android, dan hanya menggunakan Visual Studio Code (VS Code) sebagai editor.
2. Persiapan
Sebelum mulai coding, pastikan beberapa hal berikut:
2.1 Install Flutter SDK
- Download dari flutter.dev.
- Ekstrak dan tambahkan ke PATH environment.
- Cek instalasi dengan:
flutter doctor 
2.2 Install VS Code
Pastikan Install terlebih dahulu extension Flutter dan Dart.
2.3 Android SDK & Emulator / Device Fisik
- Bisa menggunakan HP Android langsung dengan mengaktifkan USB Debugging (di menu Developer Options) di device Android kalian.
- Pastikan HP terdeteksi dengan:
flutter devicesJika device kalian terdeteksi maka akan muncul :
3. Membuat Project Flutter
1.Buka terminal di VS Code lalu jalankan:
flutter create (nama_project)Perintah ini akan membuat folder project flutter yang nanti nya akan kalian gunakan.
Mau Kuasai Bukan Cuma Tampilan, Ini Cara Bikin To-Do List Flutter dengan State Management yang Rapi Sampai Bisa Praktik Langsung?
Materi ini juga kami ajarkan langsung di kelas Edusoft Center, dibimbing mentor, sampai kamu bisa praktik nyata — bukan cuma baca teori.
Tanya Kursus via WhatsApp Lihat contoh project nyata dari siswa kami →
2. Masuk ke folder project:
cd todo_app
3. Jalankan project default untuk memastikan sudah berjalan:
flutter run 4. Membuat Struktur Aplikasi To-Do List
- Bersihkan File
main.dart - Buka
lib/main.dartlalu hapus kode bawaan dan ganti dengan kode ini:
/*
Complete Flutter To-Do List App (single-file example)
- File: lib/main.dart
Dependencies (add to pubspec.yaml under dependencies):
flutter:
sdk: flutter
provider: ^6.0.5
sqflite: ^2.2.8+4
path: ^1.8.3
intl: ^0.18.1
uuid: ^3.1.1
How to run:
1. Create a new Flutter project: `flutter create todo_app`
2. Replace lib/main.dart with this file.
3. Add the dependencies above to pubspec.yaml and run `flutter pub get`.
4. Run in VSCode (debug/run) or `flutter run`.
Features implemented:
- Add / Edit / Delete tasks
- Mark complete / incomplete
- Title, description, due date, priority, tags
- Search, filter by status, priority, sort by due date or creation
- Local persistence using sqflite
- Swipe to delete, undo via SnackBar
- Simple statistics (counts)
NOTE: This is a single-file demo for clarity. In production, split into multiple files.
*/
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart' as p;
import 'package:uuid/uuid.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
final db = await DatabaseHelper.instance.database;
runApp(MyApp());
}
// ----------------------------- Models -----------------------------
class Task {
String id;
String title;
String description;
DateTime? dueDate;
int priority; // 0 low, 1 normal, 2 high
bool completed;
List<String> tags;
DateTime createdAt;
Task({
required this.id,
required this.title,
this.description = '',
this.dueDate,
this.priority = 1,
this.completed = false,
List<String>? tags,
DateTime? createdAt,
}) : tags = tags ?? [],
createdAt = createdAt ?? DateTime.now();
Map<String, dynamic> toMap() {
return {
'id': id,
'title': title,
'description': description,
'dueDate': dueDate?.toIso8601String(),
'priority': priority,
'completed': completed ? 1 : 0,
'tags': jsonEncode(tags),
'createdAt': createdAt.toIso8601String(),
};
}
factory Task.fromMap(Map<String, dynamic> m) {
return Task(
id: m['id'],
title: m['title'],
description: m['description'] ?? '',
dueDate: m['dueDate'] != null ? DateTime.tryParse(m['dueDate']) : null,
priority: m['priority'] ?? 1,
completed: (m['completed'] ?? 0) == 1,
tags: (m['tags'] != null && m['tags'] != '')
? List<String>.from(jsonDecode(m['tags']))
: [],
createdAt: m['createdAt'] != null
? DateTime.parse(m['createdAt'])
: DateTime.now(),
);
}
}
// ----------------------------- Database -----------------------------
class DatabaseHelper {
static final DatabaseHelper instance = DatabaseHelper._init();
static Database? _database;
DatabaseHelper._init();
Future<Database> get database async {
if (_database != null) return _database!;
_database = await _initDB('todo.db');
return _database!;
}
Future<Database> _initDB(String filePath) async {
final dbPath = await getDatabasesPath();
final path = p.join(dbPath, filePath);
return await openDatabase(path, version: 1, onCreate: _createDB);
}
Future _createDB(Database db, int version) async {
await db.execute('''
CREATE TABLE tasks(
id TEXT PRIMARY KEY,
title TEXT,
description TEXT,
isDone INTEGER,
createdAt TEXT
)
''');
}
Future<void> insertTask(Task task) async {
final db = await instance.database;
await db.insert(
'tasks',
task.toMap(),
conflictAlgorithm: ConflictAlgorithm.replace,
);
}
Future<void> updateTask(Task task) async {
final db = await instance.database;
await db.update(
'tasks',
task.toMap(),
where: 'id = ?',
whereArgs: [task.id],
);
}
Future<void> deleteTask(String id) async {
final db = await instance.database;
await db.delete('tasks', where: 'id = ?', whereArgs: [id]);
}
Future<List<Task>> getAllTasks() async {
final db = await instance.database;
final result = await db.query('tasks');
return result.map((m) => Task.fromMap(m)).toList();
}
}
// ----------------------------- Provider -----------------------------
class TaskProvider with ChangeNotifier {
List<Task> _tasks = [];
List<Task> get tasks => _tasks;
bool _isLoading = true;
bool get isLoading => _isLoading;
TaskProvider() {
loadTasks();
}
Future<void> loadTasks() async {
_isLoading = true;
notifyListeners();
_tasks = await DatabaseHelper.instance.getAllTasks();
// sort by dueDate then createdAt
_tasks.sort((a, b) {
if (a.dueDate == null && b.dueDate == null) {
return a.createdAt.compareTo(b.createdAt);
}
if (a.dueDate == null) return 1;
if (b.dueDate == null) return -1;
return a.dueDate!.compareTo(b.dueDate!);
});
_isLoading = false;
notifyListeners();
}
Future<void> addTask(Task task) async {
_tasks.add(task);
await DatabaseHelper.instance.insertTask(task);
notifyListeners();
}
Future<void> updateTask(Task updated) async {
final idx = _tasks.indexWhere((t) => t.id == updated.id);
if (idx != -1) _tasks[idx] = updated;
await DatabaseHelper.instance.updateTask(updated);
notifyListeners();
}
Future<void> deleteTask(String id) async {
_tasks.removeWhere((t) => t.id == id);
await DatabaseHelper.instance.deleteTask(id);
notifyListeners();
}
Future<void> toggleComplete(String id) async {
final idx = _tasks.indexWhere((t) => t.id == id);
if (idx == -1) return;
final t = _tasks[idx];
t.completed = !t.completed;
await DatabaseHelper.instance.updateTask(t);
notifyListeners();
}
// filtering helpers
List<Task> filter({
String? q,
int? priority,
bool? completed,
String sortBy = 'due',
}) {
var list = _tasks.toList();
if (q != null && q.trim().isNotEmpty) {
final qq = q.toLowerCase();
list = list
.where(
(t) =>
t.title.toLowerCase().contains(qq) ||
t.description.toLowerCase().contains(qq) ||
t.tags.any((tag) => tag.toLowerCase().contains(qq)),
)
.toList();
}
if (priority != null) {
list = list.where((t) => t.priority == priority).toList();
}
if (completed != null) {
list = list.where((t) => t.completed == completed).toList();
}
if (sortBy == 'due') {
list.sort((a, b) {
if (a.dueDate == null && b.dueDate == null) {
return a.createdAt.compareTo(b.createdAt);
}
if (a.dueDate == null) return 1;
if (b.dueDate == null) return -1;
return a.dueDate!.compareTo(b.dueDate!);
});
} else if (sortBy == 'priority') {
list.sort((a, b) => b.priority.compareTo(a.priority));
} else if (sortBy == 'created') {
list.sort((a, b) => b.createdAt.compareTo(a.createdAt));
}
return list;
}
int countCompleted() => _tasks.where((t) => t.completed).length;
int countPending() => _tasks.where((t) => !t.completed).length;
}
// ----------------------------- UI -----------------------------
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (_) => TaskProvider(),
child: MaterialApp(
title: 'ToDo App',
theme: ThemeData(primarySwatch: Colors.indigo, useMaterial3: true),
home: HomePage(),
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String _search = '';
int? _filterPriority;
bool? _filterCompleted;
String _sortBy = 'due';
final _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
final prov = Provider.of<TaskProvider>(context);
return Scaffold(
appBar: AppBar(
title: Text('ToDo — lengkap & efisien'),
actions: [
IconButton(
icon: Icon(Icons.settings),
onPressed: () => _openSettings(context),
),
],
bottom: PreferredSize(
preferredSize: Size.fromHeight(88),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8),
child: Column(
children: [
Row(
children: [
Expanded(child: _buildSearchField()),
SizedBox(width: 8),
ElevatedButton.icon(
icon: Icon(Icons.filter_list),
label: Text('Filter'),
onPressed: () => _openFilterDialog(),
),
],
),
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Sort: ${_sortBy == 'due'
? 'Due date'
: _sortBy == 'priority'
? 'Priority'
: 'Created'}',
),
Wrap(
spacing: 8,
children: [
ChoiceChip(
label: Text('Due'),
selected: _sortBy == 'due',
onSelected: (_) => setState(() => _sortBy = 'due'),
),
ChoiceChip(
label: Text('Priority'),
selected: _sortBy == 'priority',
onSelected: (_) =>
setState(() => _sortBy = 'priority'),
),
ChoiceChip(
label: Text('Created'),
selected: _sortBy == 'created',
onSelected: (_) =>
setState(() => _sortBy = 'created'),
),
],
),
],
),
],
),
),
),
),
body: prov.isLoading
? Center(child: CircularProgressIndicator())
: RefreshIndicator(
onRefresh: () => prov.loadTasks(),
child: Column(
children: [
_buildStats(prov),
Expanded(child: _buildList(prov)),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => _openTaskEditor(context),
child: Icon(Icons.add),
),
);
}
Widget _buildSearchField() {
return TextField(
decoration: InputDecoration(
hintText: 'Cari judul, deskripsi, atau tag...',
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 0),
),
onChanged: (v) => setState(() => _search = v),
);
}
Widget _buildStats(TaskProvider prov) {
return Padding(
padding: const EdgeInsets.all(12.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_statCard('Total', prov.tasks.length.toString(), Icons.list),
_statCard(
'Selesai',
prov.countCompleted().toString(),
Icons.check_circle,
),
_statCard('Pending', prov.countPending().toString(), Icons.pending),
],
),
);
}
Widget _statCard(String title, String value, IconData icon) {
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12),
child: Column(
children: [
Icon(icon),
SizedBox(height: 6),
Text(
value,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Text(title),
],
),
),
);
}
Widget _buildList(TaskProvider prov) {
final items = prov.filter(
q: _search,
priority: _filterPriority,
completed: _filterCompleted,
sortBy: _sortBy,
);
if (items.isEmpty) {
return ListView(
physics: AlwaysScrollableScrollPhysics(),
children: [
SizedBox(height: 120),
Icon(Icons.inbox, size: 80, color: Colors.grey[300]),
SizedBox(height: 12),
Center(
child: Text(
'Belum ada tugas sesuai filter',
style: TextStyle(color: Colors.grey[600]),
),
),
],
);
}
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, idx) {
final t = items[idx];
return Dismissible(
key: Key(t.id),
background: Container(
color: Colors.red,
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 20),
child: Icon(Icons.delete, color: Colors.white),
),
secondaryBackground: Container(
color: Colors.red,
alignment: Alignment.centerRight,
padding: EdgeInsets.only(right: 20),
child: Icon(Icons.delete, color: Colors.white),
),
onDismissed: (direction) async {
final prov = Provider.of<TaskProvider>(context, listen: false);
await prov.deleteTask(t.id);
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Tugas dihapus'),
action: SnackBarAction(
label: 'Undo',
onPressed: () async {
await prov.addTask(t);
},
),
),
);
},
child: Card(
margin: EdgeInsets.symmetric(horizontal: 12, vertical: 6),
child: ListTile(
leading: Checkbox(
value: t.completed,
onChanged: (_) => Provider.of<TaskProvider>(
context,
listen: false,
).toggleComplete(t.id),
),
title: Text(
t.title,
style: TextStyle(
decoration: t.completed ? TextDecoration.lineThrough : null,
),
),
subtitle: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (t.description.isNotEmpty)
Text(
t.description,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 4),
Row(
children: [
if (t.dueDate != null)
Row(
children: [
Icon(Icons.calendar_today, size: 14),
SizedBox(width: 4),
Text(
DateFormat.yMMMd().add_jm().format(t.dueDate!),
),
],
),
SizedBox(width: 8),
_priorityChip(t.priority),
SizedBox(width: 6),
...t.tags
.take(3)
.map(
(tag) => Padding(
padding: EdgeInsets.only(left: 6),
child: Chip(
label: Text(
tag,
style: TextStyle(fontSize: 12),
),
),
),
),
],
),
],
),
trailing: IconButton(
icon: Icon(Icons.edit),
onPressed: () => _openTaskEditor(context, task: t),
),
),
),
);
},
);
}
Widget _priorityChip(int p) {
String label = p == 2
? 'High'
: p == 1
? 'Normal'
: 'Low';
Color color = p == 2
? Colors.red
: p == 1
? Colors.orange
: Colors.green;
return Container(
padding: EdgeInsets.symmetric(horizontal: 6, vertical: 4),
decoration: BoxDecoration(
color: color.withOpacity(0.15),
borderRadius: BorderRadius.circular(8),
),
child: Text(label, style: TextStyle(color: color)),
);
}
void _openTaskEditor(BuildContext context, {Task? task}) {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (_) => Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom,
),
child: TaskEditor(task: task),
),
);
}
void _openFilterDialog() {
showDialog(
context: context,
builder: (ctx) {
int? tmpPriority = _filterPriority;
bool? tmpCompleted = _filterCompleted;
return AlertDialog(
title: Text('Filter'),
content: StatefulBuilder(
builder: (context, setState) {
return Column(
mainAxisSize: MainAxisSize.min,
children: [
DropdownButton<int?>(
value: tmpPriority,
hint: Text('Pilih priority (semua)'),
isExpanded: true,
items: [null, 0, 1, 2]
.map(
(e) => DropdownMenuItem(
value: e,
child: Text(
e == null
? 'Semua'
: e == 2
? 'High'
: e == 1
? 'Normal'
: 'Low',
),
),
)
.toList(),
onChanged: (v) => setState(() => tmpPriority = v),
),
SizedBox(height: 8),
DropdownButton<bool?>(
value: tmpCompleted,
isExpanded: true,
items: [null, true, false]
.map(
(e) => DropdownMenuItem(
value: e,
child: Text(
e == null
? 'Semua status'
: e
? 'Selesai'
: 'Pending',
),
),
)
.toList(),
onChanged: (v) => setState(() => tmpCompleted = v),
),
],
);
},
),
actions: [
TextButton(
onPressed: () => Navigator.pop(ctx),
child: Text('Batal'),
),
ElevatedButton(
onPressed: () {
setState(() {
_filterPriority = tmpPriority;
_filterCompleted = tmpCompleted;
});
Navigator.pop(ctx);
},
child: Text('Terapkan'),
),
],
);
},
);
}
void _openSettings(BuildContext context) {
showModalBottomSheet(context: context, builder: (_) => SettingsSheet());
}
}
class SettingsSheet extends StatelessWidget {
const SettingsSheet({super.key});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Pengaturan',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 12),
ListTile(
leading: Icon(Icons.info),
title: Text('Tentang'),
subtitle: Text(
'Aplikasi ToDo demo - local persistence menggunakan sqlite',
),
),
ListTile(
leading: Icon(Icons.restore),
title: Text('Reset semua data'),
onTap: () async {
final prov = Provider.of<TaskProvider>(context, listen: false);
final all = prov.tasks.toList();
for (var t in all) {
await prov.deleteTask(t.id);
}
Navigator.pop(context);
},
),
],
),
);
}
}
class TaskEditor extends StatefulWidget {
final Task? task;
const TaskEditor({super.key, this.task});
@override
_TaskEditorState createState() => _TaskEditorState();
}
class _TaskEditorState extends State<TaskEditor> {
final _formKey = GlobalKey<FormState>();
final _titleCtrl = TextEditingController();
final _descCtrl = TextEditingController();
DateTime? _dueDate;
int _priority = 1;
final _tagsCtrl = TextEditingController();
@override
void initState() {
super.initState();
if (widget.task != null) {
_titleCtrl.text = widget.task!.title;
_descCtrl.text = widget.task!.description;
_dueDate = widget.task!.dueDate;
_priority = widget.task!.priority;
_tagsCtrl.text = widget.task!.tags.join(', ');
}
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
widget.task == null ? 'Tambah Tugas' : 'Edit Tugas',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
SizedBox(height: 12),
TextFormField(
controller: _titleCtrl,
decoration: InputDecoration(
labelText: 'Judul',
border: OutlineInputBorder(),
),
validator: (v) => v == null || v.trim().isEmpty
? 'Judul tidak boleh kosong'
: null,
),
SizedBox(height: 8),
TextFormField(
controller: _descCtrl,
minLines: 2,
maxLines: 5,
decoration: InputDecoration(
labelText: 'Deskripsi',
border: OutlineInputBorder(),
),
),
SizedBox(height: 8),
Row(
children: [
Expanded(
child: InkWell(
onTap: () async {
final now = DateTime.now();
final pickedDate = await showDatePicker(
context: context,
initialDate: _dueDate ?? now,
firstDate: now.subtract(Duration(days: 3650)),
lastDate: now.add(Duration(days: 3650)),
);
if (pickedDate != null) {
final pickedTime = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(
_dueDate ?? DateTime.now(),
),
);
setState(() {
_dueDate = DateTime(
pickedDate.year,
pickedDate.month,
pickedDate.day,
pickedTime?.hour ?? 0,
pickedTime?.minute ?? 0,
);
});
}
},
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 12,
vertical: 14,
),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(8),
),
child: Row(
children: [
Icon(Icons.calendar_today),
SizedBox(width: 8),
Text(
_dueDate == null
? 'Pilih due date (opsional)'
: DateFormat.yMMMd().add_jm().format(
_dueDate!,
),
),
],
),
),
),
),
SizedBox(width: 8),
DropdownButton<int>(
value: _priority,
items: [0, 1, 2]
.map(
(e) => DropdownMenuItem(
value: e,
child: Text(
e == 2
? 'High'
: e == 1
? 'Normal'
: 'Low',
),
),
)
.toList(),
onChanged: (v) => setState(() => _priority = v ?? 1),
),
],
),
SizedBox(height: 8),
TextFormField(
controller: _tagsCtrl,
decoration: InputDecoration(
labelText: 'Tags (pisah dengan koma)',
border: OutlineInputBorder(),
),
),
SizedBox(height: 12),
Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () async {
if (!_formKey.currentState!.validate()) return;
final prov = Provider.of<TaskProvider>(
context,
listen: false,
);
final tags = _tagsCtrl.text
.split(',')
.map((s) => s.trim())
.where((s) => s.isNotEmpty)
.toList();
if (widget.task == null) {
final id = Uuid().v4();
final task = Task(
id: id,
title: _titleCtrl.text.trim(),
description: _descCtrl.text.trim(),
dueDate: _dueDate,
priority: _priority,
tags: tags,
);
await prov.addTask(task);
} else {
final t = widget.task!;
final updated = Task(
id: t.id,
title: _titleCtrl.text.trim(),
description: _descCtrl.text.trim(),
dueDate: _dueDate,
priority: _priority,
completed: t.completed,
tags: tags,
createdAt: t.createdAt,
);
await prov.updateTask(updated);
}
Navigator.pop(context);
},
child: Text(widget.task == null ? 'Tambah' : 'Simpan'),
),
),
if (widget.task != null) SizedBox(width: 8),
if (widget.task != null)
OutlinedButton(
onPressed: () async {
final prov = Provider.of<TaskProvider>(
context,
listen: false,
);
await prov.deleteTask(widget.task!.id);
Navigator.pop(context);
},
child: Text('Hapus'),
),
],
),
],
),
),
),
);
}
@override
void dispose() {
_titleCtrl.dispose();
_descCtrl.dispose();
_tagsCtrl.dispose();
super.dispose();
}
}5. Menjalankan di HP Android
- Hubungkan HP dengan kabel USB.
- Pastikan sudah aktif USB Debugging.
- Jalankan perintah berikut di terminal atau dengan ctrl+f5 :
flutter run 
6. Fitur yang Bisa Ditambahkan
Jika ingin mengembangkan lebih lanjut, bisa menambahkan:
- Checkbox untuk menandai tugas selesai.
- SharedPreferences agar data tetap tersimpan meskipun aplikasi ditutup.
- UI lebih menarik dengan tema gelap (Dark Mode).
7. Kesimpulan
Membuat aplikasi To-Do List dengan Flutter di VS Code adalah cara yang tepat untuk belajar dasar-dasar Flutter, mulai dari widget, state, hingga interaksi pengguna. Dengan langkah-langkah di atas, kamu sudah bisa membuat aplikasi sederhana, menjalankannya langsung di HP, dan menjadikannya sebagai pondasi untuk proyek Flutter yang lebih kompleks.
Mau Kuasai Bukan Cuma Tampilan, Ini Cara Bikin To-Do List Flutter dengan State Management yang Rapi Sampai Bisa Praktik Langsung?
Materi ini juga kami ajarkan langsung di kelas Edusoft Center, dibimbing mentor, sampai kamu bisa praktik nyata — bukan cuma baca teori.
Tanya Kursus via WhatsApp Lihat contoh project nyata dari siswa kami →