flutter(11)
-
Flutter 9주차 - 카카오 API를 이용해 도서 정보 가져오기
Flutter 9주차 - 카카오 API를 이용해 도서 정보 가져오기 이번 주차에서는 카카오 API를 이용해 도서 정보를 가져오는 실습을 진행할 예정이다.주요 기능은 다음과 같다. 입력 : 사용자가 원하는 검색어를 입력할 수 있는 TextField 제공.스크롤 감지 : 사용자가 리스트를 아래로 스크롤 할 때 데이터 로드.API 호출 : 카카오의 도서 정보 API로 데이터를 가져옴.결과 표시 : 가져온 데이터를 리스트 형태로 표시. 목차 http 패키지 가져오기 먼저 HTTP 통신을 통해 카카오 API에 요청할 예정이므로 HTTP 패키지가 필요하다. pub.dev 로 이동하여 패키지 설치를 진행하자. 예시대로 dependencies에 http 패키지를 추가한 후, 우측 상단에 Pub get를 눌러 패..
2024.11.05 -
Flutter 중간시험 - 계산기 프로젝트
https://youtu.be/Pj5whnY7ynI 소스코드 main.dartimport 'package:flutter/material.dart';import 'calculator_button.dart'; // 버튼 위젯을 정의한 파일 importimport 'calculator_logic.dart'; // 계산 로직을 정의한 파일 importvoid main() { runApp(const MyApp());}// MyApp 클래스는 앱의 최상위 위젯으로, 전체 앱 구조를 정의class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return co..
2024.10.23 -
Flutter 7주차 (3) - 아이콘과 아이콘 버튼 활용하기
Flutter 7주차 (3) - 아이콘과 아이콘 버튼 활용하기 목차 패키지 등록하기 먼저 폰트 어섬에서 제공하는 아이콘을 사용하기 위해서 pubspec.yaml 파일에 FontAwesomeIcons 패키지를 등록해야 한다.아래와 같이 font_awesome_flutter 패키지를 dependencies에 작성 후 Pub get을 눌러 설치하자. 다트 파일 작성하기 ilb 폴더 아래에 ch9_4 라는 디렉터리를 만들고 안에 test.dart 파일을 만들고 아래 코드를 작성하자. import 'package:flutter/material.dart';import 'package:font_awesome_flutter/font_awesome_flutter.dart';void main() { runApp..
2024.10.16 -
Flutter 7주차 (2) - http 패키지 이용하기
Flutter 7주차 (2) - http 패키지 이용하기 목차 http 패키지 설치하기 http 패키지를 사용한 통신 연습을 진행하기 위해 패키지 설치를 진행해보자. 먼저, pub.dev 로 이동하여 http를 검색해보자.실습에서 사용할 패키지는 맨 위에 검색된 http 패키지이다. 해당 패키지 이름을 클릭하여 들어가자. Using을 읽어보면 패키지를 import 할 때 as를 사용해서 http로 줄여서 사용하는 것을 권장하고 있다. 이제 Installing 탭으로 이동해서 설명처럼 pubspec.yaml 파일에 dependencies안에 http를 추가한 후 pub get을 눌러 설치하자. 다트 파일 작성하기 이제 http 패키지를 사용한 다트 파일을 아래와 같이 작성해보자. lib ..
2024.10.16 -
Flutter 7주차 (1) - 애셋 활용하기
Flutter 7주차 (1) - 애셋 활용하기 목차 프로젝트에 애셋 파일 불러오기 애셋을 활용하는 실습에 사용할 images와 assets 디렉터리를 프로젝트에 복사하자. 메인 환경 파일에 애셋 등록하기 사용할 애셋을 프로젝트 폴더 내부에 가져왔다면 메인 환경 파일인 pubspec.yaml을 열고, 아래와 같이 코드를 작성해서 가져온 애셋들을 등록해야 한다. 다트 파일 작성하기 이제 lib 폴더 아래에 ch9라는 디렉터리를 하나 만들고 그 안에 test.dart 파일을 만든 후 아래처럼 코드를 작성하자. import 'package:flutter/material.dart';import 'package:flutter/services.dart';void main() { runApp(MyApp..
2024.10.16 -
Flutter 5주차 - Dart언어의 함수
Flutter 5주차 - Dart언어의 함수 목차 함수 선언과 호출하기 먼저 다트의 함수 선언 위치를 알아보자.다트에서 함수는 톱 레벨과 클래스의 멤버, 그리고 다른 함수 내에 선언이 가능하다. 다트에서는 함수 오버로딩 기능을 제공하지 않는다.(다트에서는 옵셔널 매개변수라는 기능을 제공하고 있기 때문에 굳이 함수 오버로딩을 제공하지 않는다.) 함수의 매개변수는 타입을 명시하거나 var로 선언, 또는 타입을 생략한다.함수의 매개변수를 var로 선언하면 dynamic 타입이 된다. 매개변수의 타입을 생략하면 var로 선언한 것과 동일하게 인식된다. 다음으로 함수의 반환 타입을 살펴보자. 함수가 반환할 데이터가 없으면 void로 선언한다.만약 반환 타입을 생략하면 모든 타입의 데이터를 반환..
2024.10.06 -
Flutter 4주차 - 정적인 화면 만들기
Flutter 4주차 - 정적인 화면 만들기 이번 주차에서는 위젯의 클래스에 대해서 알아보고 StatelessWidget을 활용해 정적인 화면을 만들어 볼 예정이다. 목차 위젯의 3가지 클래스 개발자가 만드는 위젯은 아래 3가지 클래스 중 하나를 상속받아 구현하게 된다. StatelessWidget : 상태를 관리하지 않는 정적인 위젯StatefulWidget : 상태를 관리하는 동적인 위젯InheritedWidget : 여러 위젯에서 공통으로 이용할 상태 관리 위젯 여기서 InheritedWidget은 상태 관리와 관련이 있으므로 나중에 상태 관리를 배울 때 자세히 다루기로 하고, 이 글에서는 StatelessWidget과 StatefulWidget에 대해 살펴보도록 하자. StatelessWid..
2024.09.29 -
Flutter 4주차 - 외부 패키지 사용하기
Flutter 4주차 - 외부 패키지 사용하기 이번 주차에서는 pub.dev 사이트에서 제공하는 외부 패키지를 사용하여 앱을 만들어 보려고 한다. 목차 pub.dev 에서 외부 패키지 가져오기 pub.dev 에 접속하면 아래와 같은 화면이 나타나게 되는데 pub.dev에 등록된 패키지를 검색하여 이용할 수 있다. 간단하게 외부 패키지를 사용하는 실습을 진행할 예정이므로, 랜덤으로 영단어를 불러오는 english_words 패키지를 가져와보자. 검색창에 english_words 패키지를 검색해보자. 검색어에 포함된 다양한 패키지들이 나오게 되는데 우리는 맨 위에 나온 패키지를 사용한다. 좌측의 정보를 보면, 이 패키지가 얼마나 인기있는지 확인할 수 있다. 그리고 해당 패키지가 다트3 버전에 호환되..
2024.09.29 -
Flutter 3주차 - 널 안정성(null safety)
Flutter 3주차 - 널 안정성(null safety) 이번 주차에서는 Flutter로 앱을 개발하기 전, 널 안정성의 개념에 대해 이해해보는 시간을 가져보려 한다. 코드는 웹사이트에서 간단하게 실행할 수 있는 https://dartpad.dev/ 에서 테스트할 예정이다. 목차 널 안정성이란? 널 안정성(null safety)은 널 포인트 예외(NPE: null point exception)를 프로그램을 실행하기 전 코드를 작성하는 시점에 점검하는 것을 의미한다. NPE 발생 가능성을 컴파일러가 미리 점검해 주므로 널에 안전한 코드를 작성할 수 있게 되었다.플러터 2.0이 나오면서 다트언어가 2.12.0 버전으로 업데이트되었고, 이후 널 안정성을 지원하기 시작했다. pub.dev 에서 널 안정성..
2024.09.22 -
Flutter 2주차 - Hello World 텍스트 표시하기
Flutter 2주차 - Hello World 텍스트 표시하기 이번 주차에서는 화면에 Hello World를 출력하는 가장 기본적인 앱을 만들어 볼 예정이다. 목차 프로젝트 생성하기 Android Studio를 실행하고 코드를 작성할 프로젝트를 생성해보자. New Flutter Project를 클릭하면 플러터 프로젝트를 생성 할 수 있다. Flutter SDK path가 처음에 Flutter SDK를 설치한 경로와 일치한지 확인 한 후 Next를 클릭하자. 프로젝트 이름은 본인이 원하는대로 적어주면 된다.단, 프로젝트 이름은 알파벳 소문자, 특수문자 _(언더바)만 사용 가능하다. 그리고 플랫폼은 코딩했을 때 호환되는 OS를 말한다.필자는 Android에서만 테스트할꺼기 때문에 그 외의 OS는 모두..
2024.09.15