서버 통신하기-1. 설정

1. 화면 내려받기

2. 서버 내려 받고 실행

java -jar 파일명

3. 완성 플러터 코드

4. 돌아가는 방향

5. 배포

• 임의로 환경변수 만들어 봄



export 로 만든 환경 변수의 경우에는 컴퓨터가 껏다 켜질 때 날아가게 된다.
 

./gradlew clean build

$ java -jar spring-blog-river-0.0.1-SNAPSHOT.jar

class PostListBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 1. ViewModel 이 만들어 져야함.
    // 2. 만들어 지면 Watch 로 보고 있어야 함(통신 완료 후 데이터 뿌리기)
    // 3. ViewModel 을 만든다. (위치, 페이지 있는데)
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: ListView.separated(
          itemBuilder: (context, index) {
            return ListTile(
              leading: Text("1"),
              title: Text("제목입니다"),
              trailing: IconButton(
                icon: Icon(Icons.arrow_forward_ios),
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => PostDetailPage(),
                      ));
                },
              ),
            );
          },
          separatorBuilder: (context, index) => Divider(),
          itemCount: 20),
    );
  }
}

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 (ViewModel)
class PostListVM extends StateNotifier<PostListModel> {
  PostListVM(super.state);
}

// 2. 창고 데이터 (State)
class PostListModel {}

// 3. 창고 관리자 (Provider)
final postListProvider =
    StateNotifierProvider<PostListVM, PostListModel>((ref) {});

import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 (ViewModel)
class PostListVM extends StateNotifier<PostListModel?> {
  PostListVM(super.state);
}

// 2. 창고 데이터 (State)
class PostListModel {}

// 3. 창고 관리자 (Provider)
final postListProvider =
    StateNotifierProvider<PostListVM, PostListModel?>((ref) {
  return PostListVM(null);
});

Post

import 'package:blog/ui/list/post_list_vm.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 (ViewModel)
class PostDetailVm extends StateNotifier<PostDetailModel?> {
  PostDetailVm(super.state);

  // 자기 상태만 바꾸기 때문에 절대 리턴 값을 주지 않는다.
  Future<void> notifyInit() async {
    // 1. 통신을 통해 응답 받기
    // 2. 상태 갱신
  }
}

// 2. 창고 데이터 (State)
class PostDetailModel {
  List<_Post> posts;

  PostListModel(this.posts);
}
class _Post {
  int id;
  String title;

  _Post.fromMap()
}

// 3. 창고 관리자 (Provider)
final postListProvider =
    StateNotifierProvider<PostDetailVm, PostDetailModel?>((ref) {
  return PostDetailVm(null);
});

String json = '{"id":1, "title":"제목1"}';
Map<String,dynamic> map = {
  "id":1,
  "title":"제목1"
};

class Post {
  int id;
  String title;
  
  Post(this.id, this.title);
}

void main() {
  Post post = Post(map["id"], map["title"]);
  print(post.id);
  print(post.title);
}

String json = '{"id":1, "title":"제목1"}';
Map<String,dynamic> map = {
  "id":1,
  "title":"제목1"
};

class Post {
  int id;
  String title;
  
  Post.fromMap(map) :
    this.id = map["id"],
    this.title = map["title"];
}

void main() {
  Post post = Post.fromMap(map);
  print(post.id);
  print(post.title);
}

class PostRepository {
  void findAll() {
    dio.get("serverIP/api/post");
  }
}

import 'package:dio/dio.dart';

final serverIP = "http://192.168.0.65:8080";

final Dio dio = Dio(
  BaseOptions(baseUrl: serverIP),
);

import 'package:blog/core/utils.dart';
import 'package:dio/dio.dart';

class PostRepository {
  void findAll() async {
    // 1. 통신 -> response [deader, body]
    Response response = await dio.get("/api/post");

    // 2. body 부분 리턴
    var responseBody = response.data;

    // list 의 map 타입
    return responseBody["body"];
  }
}

import 'package:blog/core/utils.dart';

class PostRepository {
  Future<List<dynamic>> findAll() async {
    // 1. 통신 -> response [deader, body]
    var response = await dio.get("/api/post");

    // 2. body 부분 리턴
    List<dynamic> responseBody = response.data;

    // list 의 map 타입
    return responseBody;
  }
}

import 'package:blog/data/post_repository.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// 1. 창고 (ViewModel)
class PostListVM extends StateNotifier<PostListModel?> {
  PostListVM(super.state);

  Future<void> notifyInit() async {
    // 1. 통신을 통해 응답 받기
    List<dynamic> list = await PostRepository().findAll();
    // 2. 파싱
    List<_Post> posts = list.map((e) => _Post.fromMap(e)).toList();
    // 2. 상태 갱신
  }
}

// 2. 창고 데이터 (State)
class PostListModel {
  List<_Post> posts;

  PostListModel(this.posts);
}

class _Post {
  int id;
  String title;

  _Post.fromMap(map)
      : this.id = map["id"],
        this.title = map["title"];
}

// 3. 창고 관리자 (Provider)
final postListProvider =
    StateNotifierProvider<PostListVM, PostListModel?>((ref) {
  return PostListVM(null);
});

import 'package:blog/ui/detail/post_detail_page.dart';
import 'package:blog/ui/list/post_list_vm.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

class PostListBody extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // 1. ViewModel이 만들어져야함 watch로 보기
    PostListModel? model = ref.watch(postListProvider);

    if (model == null) {
      return CircularProgressIndicator();
    } else {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(
                leading: Text("${model.posts[index].id}"),
                title: Text("${model.posts[index].title}"),
                trailing: IconButton(
                  icon: Icon(Icons.arrow_forward_ios),
                  onPressed: () {
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => PostDetailPage(),
                        ));
                  },
                ),
              );
            },
            separatorBuilder: (context, index) => Divider(),
            itemCount: model.posts.length),
      );
    }
  }
}

이렇게 감싸 줘야함.