[웹툰 앱 만들기] 웹툰 제목 overflow & 웹툰 에피소드 수 조정

웹툰 에피소드 제목 overflow

웹툰 에피소드 제목이 길 때 왼쪽 사진처럼 overflow로 인한 에러가 일어난다. 그래서 에피소드 제목이 길 때 특정 글자 수 뒷부분을 ...으로 변경하여 보여주도록 설정했다.

               Text(
                  episode.title.length >= 23
                      ? '${episode.title.substring(0, 23)}...'
                      : episode.title,
                  style: const TextStyle(
                    fontSize: 16,
                  ),

https://github.com/soaringwave/Flutter-studying/commit/27d139c7dc297e66ce7eb7c6caad8578478957a3

웹툰 에피소드 제목을 나타내는 Text 위젯이다.  만약 총 글자 수가 23 이상이라면 substring을 통해 22 인덱스의 숫자까지만 화면에 나타내고 그 문장 뒤에 ...을 붙였다. 반대로 총 글자 수가 23 미만이라면 그래도 화면에 나타낸다.

 

 

웹툰 에피소드 수 수정

특정 웹툰의 최근 에피소드 10개만 가져온다는 설명과 달리, 해당 api service와 json 코드는 평균 20개 정도의 에피소드들을 가져와 화면에 나타내는 것을 발견했다. 이 앱의 목적은 에피소드를 가능한 많이 보여주는 것이 아니기 때문에 앱의 효율성을 높이고자 정보를 가져오는 에피소드를 직접 제한했다.

static Future<List<WebtoonEpisodeModel>> getEpisodesInfoById(
      String id) async {
    var index = 0;
    List<WebtoonEpisodeModel> episodes = [];
    final url = Uri.parse('$baseUrl/$id/episodes');
    final response = await http.get(url);
    if (response.statusCode == 200) {
      final webtoonEpisodesInfoJson = jsonDecode(response.body);
      for (var episodeJson in webtoonEpisodesInfoJson) {
        index += 1;
        episodes.add(WebtoonEpisodeModel.fromJson(episodeJson));
        if (index >= 15) {
          return episodes;
        }
      }
      return episodes;
    } else {
      throw Error();
    }
  }
}

https://github.com/soaringwave/Flutter-studying/commit/791eb3aa4d352e0870288ed6aea1920268005b46

기존 api service 코드에 index라는 변수를 활용했다. json 코드의 요소인 에피소드들을 하나씩 Episode 모델로 생성하여 리스트에 추가할 때 15개의 에피소드만 그 과정을 거치도록 설정했다.