1
2

뷰 → ref.watch → Provider → Retrofit → Dio → 인터셉터 → 서버
서버 → JSON → fromJson → Provider 상태 → .when() → 뷰

1
2
3
4
5

GET    /todos       → 전체 조회 (Read)
GET    /todos/1     → 1번 조회 (Read)
POST   /todos       → 생성 (Create)
PUT    /todos/1     → 수정 (Update)
DELETE /todos/1     → 삭제 (Delete)

1
2
3
4
5

{
  "id": 1,
  "title": "Flutter 공부",
  "completed": false
}

1
2

xxxxx.yyyyy.zzzzz
헤더   .내용   .서명

1
2
3
4

1. API 요청 → 401 Unauthorized (Access Token 만료)
2. Refresh Token으로 /auth/refresh 요청
3. 새 Access Token 발급
4. 원래 요청 재시도

1
2
3
4
5
6

// 저장
final prefs = await SharedPreferences.getInstance();
await prefs.setString('accessToken', token);

// 읽기
final token = prefs.getString('accessToken');

1
2
3
4
5
6
7

final dio = Dio(
  BaseOptions(
    baseUrl: 'https://api.example.com',
    connectTimeout: Duration(seconds: 5),
    receiveTimeout: Duration(seconds: 3),
  ),
);

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

class AuthInterceptor extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    // 모든 요청에 토큰 자동 첨부
    final token = TokenStorage.accessToken;
    if (token != null) {
      options.headers['Authorization'] = 'Bearer $token';
    }
    handler.next(options);
  }

  @override
  void onError(DioException err, ErrorInterceptorHandler handler) async {
    if (err.response?.statusCode == 401) {
      // Access Token 만료 → Refresh Token으로 갱신
      final newToken = await refreshToken();
      if (newToken != null) {
        // 토큰 갱신 성공 → 원래 요청 재시도
        err.requestOptions.headers['Authorization'] = 'Bearer $newToken';
        final response = await dio.fetch(err.requestOptions);
        return handler.resolve(response);
      }
    }
    handler.next(err);
  }
}

1

dio.interceptors.add(AuthInterceptor());

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Future<List<Todo>> getTodos() async {
  final response = await dio.get('/todos');
  return (response.data as List)
      .map((json) => Todo.fromJson(json))
      .toList();
}

Future<Todo> createTodo(Todo todo) async {
  final response = await dio.post('/todos', data: todo.toJson());
  return Todo.fromJson(response.data);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

@RestApi(baseUrl: 'https://api.example.com')
abstract class TodoApi {
  factory TodoApi(Dio dio) = _TodoApi;

  @GET('/todos')
  Future<List<Todo>> getTodos();

  @POST('/todos')
  Future<Todo> createTodo(@Body() Todo todo);

  @PUT('/todos/{id}')
  Future<Todo> updateTodo(@Path('id') int id, @Body() Todo todo);

  @DELETE('/todos/{id}')
  Future<void> deleteTodo(@Path('id') int id);
}

1

dart run build_runner build

1

dart run build_runner watch

1
2

final title = json['title'] as String; // 타입 캐스팅 필수
final id = json['id'] as int;          // 키 오타나면 런타임 에러

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@freezed
class Todo with _$Todo {
  const factory Todo({
    required int id,
    required String title,
    @Default(false) bool completed,
    DateTime? dueDate,
  }) = _Todo;

  factory Todo.fromJson(Map<String, dynamic> json) => _$TodoFromJson(json);
}

1
2
3
4
5
6
7
8

final todo = Todo(id: 1, title: 'Flutter 공부', completed: false);

// 완료 상태만 변경한 새 객체
final done = todo.copyWith(completed: true);

// 원본은 변경되지 않음
print(todo.completed);  // false
print(done.completed);  // true

1
2
3
4
5

@riverpod
Future<List<Todo>> todoList(Ref ref) async {
  final api = ref.watch(todoApiProvider);
  return api.getTodos();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

@riverpod
class TodoListNotifier extends _$TodoListNotifier {
  @override
  Future<List<Todo>> build() async {
    final api = ref.watch(todoApiProvider);
    return api.getTodos();
  }

  Future<void> addTodo(Todo todo) async {
    final api = ref.read(todoApiProvider);
    await api.createTodo(todo);
    ref.invalidateSelf(); // 목록 새로고침
  }

  Future<void> deleteTodo(int id) async {
    final api = ref.read(todoApiProvider);
    await api.deleteTodo(id);
    ref.invalidateSelf();
  }
}

1
2
3
4
5

// Provider 외부에서 새로고침
ref.invalidate(todoListNotifierProvider);

// Provider 내부에서 자기 자신 새로고침
ref.invalidateSelf();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

@riverpod
TodoApi todoApi(Ref ref) {
  final dio = ref.watch(dioProvider);
  return TodoApi(dio);
}

@riverpod
Future<List<Todo>> todoList(Ref ref) async {
  final api = ref.watch(todoApiProvider); // 다른 Provider 참조
  return api.getTodos();
}

1
2
3
4
5
6

1. 뷰에서 ref.watch(todoListNotifierProvider)
2. Provider의 build() 실행
3. Retrofit의 getTodos() 호출
4. Dio가 HTTP 요청 생성
5. AuthInterceptor가 토큰 자동 첨부
6. 서버로 GET /todos 전송

1
2
3
4
5
6

1. 서버가 JSON 응답
2. Dio가 응답 수신
3. Retrofit이 fromJson으로 List<Todo> 변환
4. Provider 상태에 저장 (AsyncData)
5. ref.watch가 변경 감지
6. 뷰의 .when()이 data 분기로 렌더링

1
2
3
4
5
6
7

1. 서버가 401 응답
2. Dio의 AuthInterceptor가 가로챔
3. Refresh Token으로 새 Access Token 발급
4. 원래 요청 재시도
5. 성공하면 정상 응답 흐름으로
6. 실패하면 Provider가 AsyncError 상태
7. 뷰의 .when()이 error 분기로 렌더링

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

┌─────────────┐
│     뷰      │  ref.watch + .when()으로 상태별 UI
├─────────────┤
│  Provider   │  상태 관리 + 캐싱 + 새로고침
├─────────────┤
│  Retrofit   │  API 인터페이스 → 구현 자동 생성
├─────────────┤
│    Dio      │  HTTP 통신 + 인터셉터 (토큰, 로깅)
├─────────────┤
│   Freezed   │  불변 모델 + JSON 변환 자동 생성
├─────────────┤
│    서버     │  REST API 제공
└─────────────┘