Git Product home page Git Product logo

cleanarchitecturetodoapptrainingwithflutter's Introduction

CleanArchitectureTodoAppTrainingWithFlutter

Flutter + CleanArchitecture + sqflite + riverpod + state_notifier + freezed!

Motivation

I wanted to practice making a flutter app using riverpod and state_notifier with CleanArchitecture.

UI

sfbz3-z9p0f.mp4

Architecture Diagram

Please let me know if there's anything I can do to improve it, or any other better ways! architecture

No Consideration

  • performance
  • error handling
  • UI/UX

cleanarchitecturetodoapptrainingwithflutter's People

Contributors

okaryo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

cleanarchitecturetodoapptrainingwithflutter's Issues

What is the difference between `read` and `watch`

@riverpod
class CreateTodoUseCaseImpl extends _$CreateTodoUseCaseImpl
    implements CreateTodoUseCase {
  @override
  Future<Todo> build(
    String title,
    String? description,
    bool isCompleted,
    DateTime dueDate,
  ) {
    final TodosRepository repository =
        ref.read(todosRepositoryImplProvider.notifier);
    return repository.createTodo(
      title: title,
      description: description,
      isCompleted: isCompleted,
      dueDate: dueDate,
    );
  }
}
@riverpod
class GetTodoListUseCaseImpl extends _$GetTodoListUseCaseImpl implements GetTodoListUseCase {
  @override
  Future<List<Todo>> build() async {
    final repository = ref.watch(todosRepositoryImplProvider);
    return repository.valueOrNull ?? [];
  }
}

One is ref.read(todosRepositoryImplProvider.notifier); and the other is ref.watch(todosRepositoryImplProvider);. What is the difference between the two, and why does the first use read and the second use watch

ViewModelとDIを書き直し

What

  • riverpodとstate_notifierの使用箇所を書き直す
  • DIはdainを使っていたが、providerを使うよう修正

フィルター機能

About

  • Youtubeの上部にあるようなChipsをつける
  • 以下のフィルターをできるようにする
    • 全て
    • 完了
    • 未完了

ユースケース層の作成

About

  • ViewModelで使うためのユースケースを作成する

What

  • Todoリスト一覧取得
  • Todoリスト作成
  • Todoリスト更新
  • Todoリスト削除

備考

  • テストも書け

データ層の作成

About

  • レポジトリの実装クラス
  • sqfliteのラップクラス
  • sqfliteから受け取ったJSONをモデルに変換するマッパークラス

備考

  • テストちゃんと書く

dateをdueDateに修正

About

  • Todoクラスのdateがなんの日付が曖昧でわかりにく
  • 締切を表す日付にしておく

README整備

概要

  • UIのっけたり
  • アーキテクチャ図のっけたり

README微修正

概要

  • ちょっと気になることあったので修正

一覧ページの作成

About

  • 一覧ページを作成するよ
  • 詳細ページや作成・編集ページは今回は作らない

This project is great. i want to know how to use usecase

My code is like this

class InitChatListUsecase {
  final IChatRepository repository;

  InitChatListUsecase({required this.repository});

  Future<Result<List<ChatModel>>> call() {
    return repository.getAllChatList();
  }
}

The code in the project looks like this

@riverpod
class DeleteTodoUseCaseImpl extends _$DeleteTodoUseCaseImpl
    implements DeleteTodoUseCase {
  @override
  Future<void> build(final int id) {
    final TodosRepository repository =
        ref.read(todosRepositoryImplProvider.notifier);
    return repository.deleteTodo(id);
  }
}

I want to know why Usecase is used as “StateNotifier” ?I'm a fresh on Riverpod, hope you can tell me about it

モデルの作成

About

作成するクラス

  • ToDo class
  • ToDoList class

使用ライブラリ

  • freezed(使ってみたい)

備考

  • テスト書くべきところはちゃんと書く

作成・編集ページの作成

Story

  • 一覧ページ下部のフローティングボタンをタップすると作成ページに遷移
  • IDの有無で作成と編集を出し分け
  • 一覧ページのToDoをタップすると詳細ページ(兼 編集ページ)に遷移する
  • 詳細ページの右上には削除アイコンもある
  • 削除後は一覧ページに遷移
  • 詳細ページ上で内容を編集することも可能
  • 編集後は保存ボタンを押して、一覧ページに遷移
  • 削除する際は確認モーダルを表示
  • 編集・削除ともに完了後はスナックバーが表示される

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.