오공완 (with Do it! 플러터 앱 프로그램밍) #7_1

// 이곳에 쓴 내용은 앱 만들기라는 버킷리스트를 달성하기 위해 플러터를 공부하면서 정리하고 있는 내용입니다.

플러터에 대해 아는 것이 거의 없기 때문에 정리하면서 오류가 있을 수 있습니다.

오류를 발견하신 분은 댓글 남겨 주시면 감사하겠습니다.

 

  카카오 API를 이용해 책 정보 받아오기

 

오늘은 외부 패키지 이용방법에 대해 배워보자.

패키지를 다운로드할 수 있는 곳. 다운로드하고, pubspec.yaml에 등록해야 한단다.

https://pub.dev 

The official repository for Dart and Flutter packages.

 

BSD(Berkeley software distribution license)는 자유롭게 만들고 배포할 수 있는 라이선스라고 한다.

참고로 위 녀석은 BSD-3-Clause라고 되어 있다. 이게 무슨 의미일까? 

오픈소스 SW라이선스 종합정보시스템에서 BSD-3-Clause를 검색한 내용

 

 

카카오 API 이용하기

https://developers.kakao.com/

Kakao Developers

회원가입 후 - 내 애플리케이션 - 애플리케이션 추가하기-이름 등을 입력 후 저장-생성된 앱 클릭 후 REST API 키 획득

 

이제는 책 설명도 대충 보고, 과정도 건너 뛰고, github 보고 타이핑하는 수준~

그래도 오류가 덜 나오게 타이핑하고 있음에 감사하자.

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HttpApp(),
    );
  }
}

class HttpApp extends StatefulWidget {
  const HttpApp({super.key});

  @override
  State<HttpApp> createState() => _HttpApp();
}

class _HttpApp extends State<HttpApp> {
  String result = '';
  TextEditingController? _editingController;
  ScrollController? _scrollController;
  List? data;
  int page = 1;

  @override
  void initState(){
    super.initState();
    data = List.empty(growable: true);
    _editingController = TextEditingController();
    _scrollController = ScrollController();
    _scrollController!.addListener((){
      if ( _scrollController!.offset >=
           _scrollController!.position.maxScrollExtent &&
          !_scrollController!.position.outOfRange){
        print('bottom');
        page++;
        getJSONData();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: TextField(
          controller: _editingController,
          style: const TextStyle(color: Colors.white),
          keyboardType: TextInputType.text,
          decoration: const InputDecoration(hintText: '검색어를 입력하세요'),
        ),
      ),
      body: Center(
        child: data!.isEmpty
            ? const Text(
          '데이터가 존재하지 않습니다.\n검색해주세요',
          style: TextStyle(fontSize: 20),
          textAlign: TextAlign.center,
        )
            : ListView.builder(
          itemBuilder: (context, index){
            print(data![index]['thumbnail']);
            return Card(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget> [
                    if(data?[index]['thumbnail']!='')
                      Image.network(
                        data![index]['thumbnail'],
                        height: 100,
                          width:100,
                          fit: BoxFit.contain,
                      ) else const SizedBox( height: 100, width: 100,),
                    Column(
                      children: <Widget>[
                        SizedBox(
                          width:
                            MediaQuery.of(context).size.width - 150,
                          child: Text(
                            data![index]['title'].toString(),
                            textAlign: TextAlign.center,
                          ),
                        ),
                        Text(
                          '저자 : ${data![index]['authors'].toString()}'),
                        Text(
                          '가격 : ${data![index]['sale_price'].toString()}'),
                        Text(
                          '판매중 : ${data![index]['status'].toString()}'),
                      ],
                    )
                  ],
              ),
            );
          },
          itemCount: data!.length,
          controller: _scrollController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          page = 1;
          data!.clear();
          getJSONData();
        },
        child: const Icon(Icons.search),
      ),
    );
  }

  Future<String> getJSONData() async {
    var url =
        'https://dapi.kakao.com/v3/search/book?target=title&page=$page&query=${_editingController!.value.text}';

    var response = await http.get(Uri.parse(url),
        headers: {"Authorization": "KakaoAK "});

    print(response.body);

    setState(() {
      var dataConvertedToJSON = json.decode(response.body);
      List result = dataConvertedToJSON['documents'];
      data!.addAll(result);
    });
    return response.body;
  }
}

작동 원리는 모르지만 작동을 하니 만족. 문제는 키보드에 입력한 내용이 실시간으로 보이지 않는다. doit으로 타이핑하고, doit이라는 글이 보이진 않았지만 검색 버튼을 눌러 위와 같이 검색 결과가 나왔다.

별거 아니지만 원인을 발견했다. 폰트색이 white로 되어 있어서 안 보였던 것. 기본색이 연한 보랏빛으로 되어 있어서 하얀색으로 하면 보이지 않는다. 지난번에도 말했지만 난 material 버전 3은 별로인 거 같다. 시인성은 책에서 제시한 것이 훨씬 좋고, 더 이쁜 거 같다. 이게 버전 2일까?