Sign in Subscribe
atomic_flutter

TODO App with atomic_flutter

Arkar Min Tun

• 5 min read

ဒီတခါတော့ atomic_flutter package ကို အသုံးပြုပြီး TODO app တခုကို ဘယ်လို ရေးမလဲ လေ့လာကြည့်ရအောင်ပါ။

အရင်ဆုံး flutter app တခုဆောက်ပြီးတော့ မလိုတဲ့ comment တွေ ဖယ်ရှားပြီး MyHomePage widget ကိုလဲ stateless widget အဖြစ်ပြောင်းပြီးတော့ ပြင်ဆင်လိုက်ပါမယ်။

starting code ကို ကူးချင်တယ်ဆို အောက်မှာ ပေးထားပါတယ်။

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'AtomicFlutter TODO'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
      ),
      body: Placeholder(),
    );
  }
}

ပြီးရင်တော့ atomic_flutter package ကို ထည့်လိုက်ပါမယ််။ လောလောဆယ် Todo တွေကို memory ပေါ်မှာပဲ သိမ်းထားမှာဆိုတော့ တခြား package တွေ ထည့်ဖို့ မလိုသေးပါဘူး။ 

flutter pub add atomic_flutter

နောက် article တွေမှာ Local Storage, Remote Storage တွေနဲ့ setup လုပ်တာတွေကို ပြပေးသွားမှာဖြစ်လို့ စိတ်ဝင်စားရင် ကျွန်တော့် blog ကို Subscribe လုပ်ထားဖို့ ဖိတ်ခေါ်ပါတယ်။

Atom တွေ မဆောက်ခင် Todo app အတွက်လိုအပ်တာတွေ အရင်ဆုံး ပြင်ဆင်လိုက်ရအောင်ပါ။ Todo တွေသိမ်းဖို့အတွက် Todo class နဲ့ Filter အတွက် enum တခု လိုအပ်ပါမယ်။

class Todo {
  Todo({
    required this.id, 
    required this.text, 
    this.completed = false,
  });

  final int id;
  final String text;
  final bool completed;
}
enum TodoFilter { 
  all, 
  pending, 
  completed,
}

Atom အနေနဲ့ဆို ကျွန်တော်တို့ ၃ခု တည်ဆောက်ဖို့ လိုပါလိမ့်မယ်။

  • todosAtom - ဒါကတော့ ရှိသမျှ todo တွေကို သိမ်းထားပေးမယ့် atom ပဲ ဖြစ်ပါတယ်။
  • filterAtom - ဒါကတော့ user က filter ပြောင်းလိုက်တဲ့အချိန် လက်ရှိ filter ကို သိမ်းထားပေးမှာပဲ ဖြစ်ပါတယ်။
  • filteredTodosAtom - ဒါကတော့ အပေါ်က atom ၂ခုပေါ် အခြေခံပြီးတော့ ပြောင်းလဲနေမယ့် atom ပဲ ဖြစ်ပါတယ်။ todos တွေ ပြောင်းတိုင်း၊ filter ပြောင်းတိုင်း သူကလိုက်ပြီး ပြောင်းနေမှာပဲ ဖြစ်ပါတယ်။ သူ့ကိုတော့ UI မှာ ပြဖို့အတွက် သုံးမှာပဲ ဖြစ်ပါတယ်။
final todosAtom = Atom<List<Todo>>([]);

final filterAtom = Atom(TodoFilter.all);

final filteredTodosAtom = computed(() {
  final todos = todosAtom.value;
  final filter = filterAtom.value;

  switch (filter) {
    case TodoFilter.pending:
      return todos.where((todo) => !todo.completed).toList();
    case TodoFilter.completed:
      return todos.where((todo) => todo.completed).toList();
    default:
      return todos;
  }
}, tracked: [todosAtom, filterAtom]);

လိုအပ်တဲ့ atom setup ကတော့ ဒီလောက်ပဲ ဖြစ်ပါတယ်။ UI ပိုင်းတွေ ဆက်ပြီးတော့ ပြောင်းလိုက်ကြရအောင်ပါ။ Todo အသစ်ထည့်ဖို့အတွက် Scaffold အောက်ထဲမှာ floating action button တခုကို ထည့်ပြီးတော့ နှိပ်လိုက်တဲ့အခါ todo ကို type လုပ်ပြီး ထည့်လို့ရမယ့် dialog တခု ပေါ်လာမှာပဲ ဖြစ်ပါတယ်။

...
floatingActionButton: FloatingActionButton(
  onPressed: () => _onPressAddTodo(context),
  child: Icon(Icons.add),
),
,,,

အခုဆို Todo အသစ်ထည့်ဖို့အတွက် UI တည်ဆောက်ပြီးပြီပဲ ဖြစ်ပါတယ်။ Dialog ထဲမှာ Todo ကိုရေးပြီး Add ကို နှိပ်လိုက်တာနဲ့ Todo list ထဲကို သွားထည့်မှာပဲ ဖြစ်ပါတယ်။ todosAtom ထဲ သွားထည့်ဖို့ကိုတော့ အခုလိုမျိုး ရေးလိုက်ပါမယ်။ 

void _onPressAddTodo(BuildContext context) {
  final todoTextController = TextEditingController();

  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text("Add New Todo"),
        content: TextField(controller: todoTextController),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text("Cancel"),
          ),
          TextButton(
            onPressed: () {
              final text = todoTextController.text;
              if (text.isNotEmpty) {
                todosAtom.update(
                  (current) => [
                    Todo(id: DateTime.now().millisecondsSinceEpoch, text: text),
                    ...current,
                  ],
                );
              }
              Navigator.pop(context);
            },
            child: Text("Add"),
          ),
        ],
      );
    },
  );
}
0:00
/0:14

Todos တွေကို list နဲ့ပြတဲ့အခါ နောက်ဆုံးထည့်တဲ့ todo ကို အပေါ်ဆုံးမှာ ပေါ်ချင်တာ ဖြစ်တဲ့အတွက် အခုလိုမျိုးရေးထားတာပဲ​ဖြစ်ပါတယ်။

...
todosAtom.update(
  (current) => [
    Todo(
      id: DateTime.now().millisecondsSinceEpoch,
      text: text,
    ),
    ...current,
  ],
);
...

အခု todosAtom ထဲကို todo ထည့်လို့ရပြီဆိုတော့ todos တွေကို filter လုပ်ဖို့ ဆက်ပြီး ရေးသွားပါမယ်။ Idea ကတော့ todo တွေကို ပြတဲ့အခါ အကုန်ကြည့်ချင်တာပဲ ဖြစ်စေ၊ မလုပ်ရသေးတဲ့ todo တွေချည်း ကြည့်ချင်တာပဲ ဖြစ်ပါစေ၊ လုပ်ပြီးသွားတဲ့ todo တွေချည်း ကြည့်ချင်တာမျိုး ဖြစ်ပါစေ ကြည့်နိုင်အောင်ပဲ ဖြစ်ပါတယ်။ လက်ရှိ ရှိပြီးသား AppBar widget ကို အခုလိုပဲ ရေးလိုက်ပါမယ်။

appBar: AppBar(
  backgroundColor: Theme.of(context).colorScheme.inversePrimary,
  title: Text(title),
  actions: [
    PopupMenuButton(
      icon: Icon(Icons.sort),
      onSelected: _onPressFilter,
      itemBuilder: (_) {
        return [
          PopupMenuItem(
            value: TodoFilter.all, 
            child: Text('All'),
          ),
          PopupMenuItem(
            value: TodoFilter.pending,
            child: Text('Pending'),
          ),
          PopupMenuItem(
            value: TodoFilter.completed,
            child: Text('Completed'),
          ),
        ];
      },
    ),
  ],
),

Menu ကို နှိပ်ပြီး ကိုယ်လိုချင်တဲ့ filter ကို ရွေးလိုက်တဲ့အခါ filterAtom ကို update သွားလုပ်မှာပဲ ဖြစ်ပါတယ်။

void _onPressFilter(TodoFilter newValue) {
  filterAtom.set(newValue);
}
0:00
/0:09

ထည့်ထားတဲ့ todos တွေကို ဘယ်လိုပြမလဲ ဆက်ကြည့်လိုက်ရအောင်ပါ။

UI မှာပြတဲ့အခါ todosAtom ထဲက todos တွေကို မပြဘဲ filteredTodosAtom ထဲက todos တွေကို ပြမှာပဲ ဖြစ်ပါတယ်။ 

...
body: AtomBuilder(
  atom: filteredTodosAtom,
  builder: (context, todos) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        final todo = todos[index];
        return ListTile(
          title: Text(todo.text),
          trailing: Checkbox(
            value: todo.completed,
            onChanged: (_) {
              _onPressToggle(todo);
            },
          ),
        );
      },
    );
  },
),
...
atom တွေပြောင်းတိုင်းမှာ ui မှာလဲ render လုပ်ချင်တယ်ဆို AtomBuilder ကို အသုံးပြုရမှာပဲ ဖြစ်ပါတယ်။

Todo တခုချင်းစီကို ListTile widget တွေနဲ့ ပြပေးသွားမှာ ဖြစ်ပြီးတော့ Checkbox ကို နှိပ်လိုက်တဲ့အခါ todo ရဲ့ completed ကို toggle လုပ်ပေးသွားမှာပဲ ဖြစ်ပါတယ်။

void _onPressToggle(Todo todo) {
  todosAtom.update((current) {
    return current.map((t) {
      if (t.id == todo.id) {
        return Todo(id: t.id, text: t.text, completed: !t.completed);
      }
      return t;
    }).toList();
  });
}

ဒါဆိုရင်တော့ ကျွန်တော်တို့ toggle လဲ လုပ်လို့ရပြီ၊ filter လဲ လုပ်လို့ရပါပြီ။

0:00
/0:08

လုပ်လက်စနဲ့ ရှိပြီးသား todo တွေရဲ့ description text ကို update လုပ်ချင်တဲ့အခါ ဘယ်လိုလုပ်မလဲ ဆက်ကြည့်လိုက်ရအောင်ပါ။ Todo တခုချင်းစီရဲ့ ListTile widget ကို အခုလိုပဲ onTap ကို ထည့်လိုက်ပါမယ်။ အဲ့ဒါဆို Todo ကို နှိပ်လိုက်တာနဲ့ alertDialog ပေါ်လာမှာဖြစ်ပြီး လက်ရှိရှိပြီးသား text value ကိုလဲ ထည့်ပြီးသား ဖြစ်နေမှာပါ။

return ListTile(
  onTap: () {
    _onPressUpdateTodoText(context, todo);
  },
  title: Text(todo.text),
  trailing: Checkbox(
    value: todo.completed,
    onChanged: (_) {
      _onPressToggle(todo);
    },
  ),
);
void _onPressUpdateTodoText(BuildContext context, Todo todo) {
  final todoTextController = TextEditingController();
  todoTextController.text = todo.text;

  showDialog(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text("Update Todo"),
        content: TextField(controller: todoTextController),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text("Cancel"),
          ),
          TextButton(
            onPressed: () {
              final text = todoTextController.text;
              if (text.isNotEmpty) {
                todosAtom.update((current) {
                  return current.map((t) {
                    if (t.id == todo.id) {
                      return Todo(
                        id: t.id,
                        text: text,
                        completed: t.completed,
                      );
                    }
                    return t;
                  }).toList();
                });
              }
              Navigator.pop(context);
            },
            child: Text("Update"),
          ),
        ],
      );
    },
  );
}
0:00
/0:13

နောက်ဆုံး ကျန်တာကတော့ Todo တွေကို delete လုပ်တာပဲ ဖြစ်ပါတယ်။ ဒါအတွက်တော့ ကျွန်တော်တို့ Dismissable widget ကို အသုံးပြုပြီးတော့ပဲ slide လုပ်လိုက်ရင် ဖျက်ပြီးသား ဖြစ်သွားအောင် ရေးလိုက်ပါမယ်။

return Dismissible(
  key: ValueKey(todo.id),
  onDismissed: (_) {
    _onDismissTodo(todo);
  },
  child: ListTile(
    onTap: () {
      _onPressUpdateTodoText(context, todo);
    },
    title: Text(todo.text),
    trailing: Checkbox(
      value: todo.completed,
      onChanged: (_) {
        _onPressToggle(todo);
      },
    ),
  ),
);
void _onDismissTodo(Todo todo) {
  todosAtom.update((current) {
    return current.where((t) => t.id != todo.id).toList();
  });
}
0:00
/0:19

app အတွက် လိုအပ်တာတွေကတော့ ဒီလောက်ပါပဲ။ အခုဆို Todo app တခုကို atomic_flutter package နဲ့ အောင်အောင်မြင်မြင် ရေးပြီးသွားပြီပဲ ဖြစ်ပါတယ်။ 🎉

Code အပြည့်အစုံကို အောက်မှ ပြပေးထားပါတယ်။

import 'package:atomic_flutter/atomic_flutter.dart';
import 'package:flutter/material.dart';

class Todo {
  Todo({
    required this.id, 
    required this.text, 
    this.completed = false,
  });

  final int id;
  final String text;
  final bool completed;
}

enum TodoFilter { all, pending, completed }

final todosAtom = Atom<List<Todo>>([]);

final filterAtom = Atom(TodoFilter.all);

final filteredTodosAtom = computed(() {
  final todos = todosAtom.value;
  final filter = filterAtom.value;

  switch (filter) {
    case TodoFilter.pending:
      return todos.where((todo) => !todo.completed).toList();
    case TodoFilter.completed:
      return todos.where((todo) => todo.completed).toList();
    default:
      return todos;
  }
}, tracked: [todosAtom, filterAtom]);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      themeMode: ThemeMode.dark,
      darkTheme: ThemeData.dark(),
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'AtomicFlutter TODO'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  void _onPressAddTodo(BuildContext context) {
    final todoTextController = TextEditingController();

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text("Add New Todo"),
          content: TextField(controller: todoTextController),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            TextButton(
              onPressed: () {
                final text = todoTextController.text;
                if (text.isNotEmpty) {
                  todosAtom.update(
                    (current) => [
                      Todo(
                        id: DateTime.now().millisecondsSinceEpoch,
                        text: text,
                      ),
                      ...current,
                    ],
                  );
                }
                Navigator.pop(context);
              },
              child: Text("Add"),
            ),
          ],
        );
      },
    );
  }

  void _onPressFilter(TodoFilter newValue) {
    filterAtom.set(newValue);
  }

  void _onPressToggle(Todo todo) {
    todosAtom.update((current) {
      return current.map((t) {
        if (t.id == todo.id) {
          return Todo(id: t.id, text: t.text, completed: !t.completed);
        }
        return t;
      }).toList();
    });
  }

  void _onPressUpdateTodoText(BuildContext context, Todo todo) {
    final todoTextController = TextEditingController();
    todoTextController.text = todo.text;

    showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: Text("Update Todo"),
          content: TextField(controller: todoTextController),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text("Cancel"),
            ),
            TextButton(
              onPressed: () {
                final text = todoTextController.text;
                if (text.isNotEmpty) {
                  todosAtom.update((current) {
                    return current.map((t) {
                      if (t.id == todo.id) {
                        return Todo(
                          id: t.id,
                          text: text,
                          completed: t.completed,
                        );
                      }
                      return t;
                    }).toList();
                  });
                }
                Navigator.pop(context);
              },
              child: Text("Update"),
            ),
          ],
        );
      },
    );
  }

  void _onDismissTodo(Todo todo) {
    todosAtom.update((current) {
      return current.where((t) => t.id != todo.id).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(title),
        actions: [
          PopupMenuButton(
            icon: Icon(Icons.sort),
            onSelected: _onPressFilter,
            itemBuilder: (_) {
              return [
                PopupMenuItem(
                  value: TodoFilter.all, 
                  child: Text('All')
                ),
                PopupMenuItem(
                  value: TodoFilter.pending,
                  child: Text('Pending'),
                ),
                PopupMenuItem(
                  value: TodoFilter.completed,
                  child: Text('Completed'),
                ),
              ];
            },
          ),
        ],
      ),
      body: AtomBuilder(
        atom: filteredTodosAtom,
        builder: (context, todos) {
          return ListView.builder(
            itemCount: todos.length,
            itemBuilder: (context, index) {
              final todo = todos[index];
              return Dismissible(
                key: ValueKey(todo.id),
                onDismissed: (_) {
                  _onDismissTodo(todo);
                },
                child: ListTile(
                  onTap: () {
                    _onPressUpdateTodoText(context, todo);
                  },
                  title: Text(todo.text),
                  trailing: Checkbox(
                    value: todo.completed,
                    onChanged: (_) {
                      _onPressToggle(todo);
                    },
                  ),
                ),
              );
            },
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _onPressAddTodo(context),
        child: Icon(Icons.add),
      ),
    );
  }
}