Dev to webs {Coding…}

ร บทเรียนฟรีด้านการพัฒนาซอฟต์แวร์ ที่ครอบคลุมเนื้อหาหลากหลาย ตั้งแต่การเขียนโค้ดพื้นฐานไปจนถึงเทคนิคขั้นสูง

โปรเจกต์ตัวอย่าง: ToDo List App

โปรเจกต์ตัวอย่าง: ToDo List App (Minimal)

📌 ฟีเจอร์หลัก:

  • เพิ่ม / ลบ / แก้ไข task
  • ใช้ SharedPreferences บันทึก task ในเครื่อง
  • ใช้ ListView.builder
  • มีปุ่ม FloatingActionButton
  • ใช้งานได้ทั้ง Android และ iOS

🧱 โครงสร้างหลัก:

/lib
  └ main.dart
  └ todo_model.dart

🧑‍💻 ตัวอย่างโค้ด main.dart

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:convert';

void main() => runApp(TodoApp());

class TodoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo Demo',
      home: TodoHome(),
    );
  }
}

class TodoHome extends StatefulWidget {
  @override
  _TodoHomeState createState() => _TodoHomeState();
}

class _TodoHomeState extends State<TodoHome> {
  List<String> todos = [];
  final controller = TextEditingController();

  @override
  void initState() {
    super.initState();
    loadTodos();
  }

  void loadTodos() async {
    final prefs = await SharedPreferences.getInstance();
    final data = prefs.getStringList('todos') ?? [];
    setState(() => todos = data);
  }

  void saveTodos() async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setStringList('todos', todos);
  }

  void addTodo(String task) {
    setState(() => todos.add(task));
    saveTodos();
    controller.clear();
  }

  void deleteTodo(int index) {
    setState(() => todos.removeAt(index));
    saveTodos();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('My ToDo')),
      body: Column(
        children: [
          Padding(
            padding: EdgeInsets.all(12),
            child: TextField(
              controller: controller,
              decoration: InputDecoration(labelText: 'Enter task'),
              onSubmitted: addTodo,
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: todos.length,
              itemBuilder: (ctx, index) => ListTile(
                title: Text(todos[index]),
                trailing: IconButton(
                  icon: Icon(Icons.delete),
                  onPressed: () => deleteTodo(index),
                ),
              ),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => addTodo(controller.text),
        child: Icon(Icons.add),
      ),
    );
  }
}

✅ เหมาะสำหรับ:

  • นำไปใช้จริง + ฝึกขั้นตอน production
  • ปรับแต่ง UI, theme, animation ได้ตามบทก่อนหน้า
  • ทดสอบ build apk, release, split-per-abi, signing, obfuscation