오예남

안녕하세요, 오예남 입니다. 오늘은 저번시간에 만들었던 ListView를 만들면서 발생한 Overflowed 현상을 해결하는 방법을 공유드리려고 합니다. Flutter에서 자주 발생하는 문제인데, 보통 Row/Column 위젯을 사용할때 고정되지않은 크기의 자식위젯을 사용하면 스마트폰의 범위를 벗어나면서 에러가 발생합니다. 아래 사진처럼 UI상에서 오버플로가 발생했다는 노란색,검은색 줄무늬의 에러 표시를 볼 수 있습니다. 위 현상은 Flexible 이나 Expanded 위젯을 사용하면 쉽게 해결할 수 있습니다. 저는 아래와같이 Expanded 위젯으로 Column 위젯을 wraping하여 해결하였습니다. ListView.builder( itemBuilder: (context, index) { return..

[Flutter] BottomNavigationBar 를 사용해서 화면 전환하기 안녕하세요, 오늘은 bottomNavigationBar를 사용해서 세가지 화면을 전환하는 앱을 만들어보겠습니다. bottomNavigationBar 를 활용한 앱만들기 1. 우선 Fltter project를 생성하고, 아래의 Directory와 dart file을 생성합니다. - lib/home.dart - lib/pages - lib/pages/first_page.dart - lib/pages/second_page.dart - lib/pages/third_page.dart 2. first/second/third에 Stateless Widget을 상속받는 First/Second/ThirdPage 클래스를 생성하고, 화면 중..

[Flutter] http 네트워크 통신 / 카카오 API 로 데이터 받아오기_2 안녕하세요, 오늘은 카카오 API를 활용하여 Flutter HTTP 통신을 하는 방법을 이어서 설명드리겠습니다. 이전 포스팅에서 REST API 키를 받아오는 것까지 완료하셨나요? 아직 안하신분은 아래 링크에서 확인하고 와주세요~! https://ohyenam.tistory.com/42 [Flutter] http 네트워크 통신 / 카카오 API 로 데이터 받아오기 [Flutter] http 네트워크 통신 / 카카오 API 로 데이터 받아오기 안녕하세요, 앱을 만들때 모든 기능을 구현하려면 많은 시간이 필요합니다. 그렇기 때문에 우리는 이미 만들어져있는 오픈소스 ohyenam.tistory.com Daum 동영상 정보 가져오..

[Flutter] http 네트워크 통신 / 카카오 API 로 데이터 받아오기 안녕하세요, 앱을 만들때 모든 기능을 구현하려면 많은 시간이 필요합니다. 그렇기 때문에 우리는 이미 만들어져있는 오픈소스 라이브러리를 이용해서 효율적으로 기능을 구현해야합니다. 그럼 오늘은 카카오에서 제공하는 API를 사용해서 데이터를 받아오는 방법을 공유해볼게요. HTTP 통신 네트워크를 통해 데이터를 주고받으려면 HTTP 통신이 필요합니다. 이런 중요한 기능은 당연히!! 똑똑하신 분들이 이미 만들어 놓았겠죠? https://pub.dev/packages/http http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.d..

[Flutter] FontAwesome 아이콘 사용하기 (font_awesome_flutter) 안녕하세요, 오늘은 Flutter에서 코딩할때 Font Awesom 아이콘을 사용하는 방법을 공유드릴게요. 기본적으로 Material/Cupetino 에서 지원해주는 아이콘들도 정말 많지만.. 꼭 저한테 필요한 아이콘이 없을때가 있었어요. 저도 이번에 수학관련 아이콘을 찾다가 혹시나해서 Font Awesome에서 검색해보니 바로 나오더라구요 ㅎㅎ 그래서 저같은 사람이 있을까봐 font awesome icon을 가져다 쓰는 방법을 공유하려고합니다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More ..

Flutter/Dart 앱 개발 독학하기 좋은 안녕하세요, 오늘은 IT 도서 서평을 해보려고 합니다. 요즘 앱, 웹 등 IT 기업이 각광받으면서 정말 많은 개발 관련 책이 나오고 있는데요. 이번에 제가 읽어본 책에 대해 공유드릴게요. 아무래도 입문 서적이라 그냥 편하게 읽어보려고 구매하진않고, 가까운 판교 도서관에서 대여해서 읽어보았습니다. 결론부터 말씀드리자면 정말 괜찮은 책이다! 라는 느낌이였어요. 왜 그런지는 아래에서 하나씩 말씀드릴게요. 내용 구성 개인적인 의견이지만, 입문서적의 조건은 '정말 선수지식이 없는 사람도 읽을 수 있는가?' 라는 물음에 'Yes!' 라고 답할 수 있어야 한다고 생각합니다. Flutter 라는 프레임워크, 그리고 Dart 언어에 대해 핵심적인 내용만 전해주고, 실습으로 ..

[Flutter] URL 주소로 이미지 가져오기 / 무료 이미지 사이트 picsum 안녕하세요, 오늘은 무료로 이미지를 제공해주는 사이트를 소개해드리고, Flutter 에서 URL 주소로 이미지를 가져오는 방법을 공유드릴게요 https://picsum.photos/ Lorem Picsum Lorem Ipsum... but for photos picsum.photos 코딩연습할때 이미지가 필요할 때가 많을텐데, 그때마다 이리저리 찾을 필요없이 픽썸에서 이미지를 가져오실 수 있습니다. 픽썸 사이트에 들어가면 url 사용 가이드를 볼 수 있는데, 위와 같은 url을 사용하면 랜덤이미지를 가져올 수 있습니다. 저는 위의 가이드에 나와있는것 처럼, id를 사용해서 특정 이미지를 가져와보겠습니다. class MyH..

[DartPad] 설치없이 웹에서 Dart/Flutter 코딩 연습하기 안녕하세요~! 오늘은 별도의 설치없이 Flutter (플러터) 코드를 작성하고 실행해볼 수 있는 툴을 공유 드릴게요. Flutter는 앱 개발자라면 한번쯤 들어봤을 하이브리드앱 개발 프레임워크 입니다. 언어로는 Dart를 사용하는데, Dart라는 언어가 생소해보일 수도있지만 누구나 쉽게 배울 수 있어요. Flutter를 사용하기전에 설치해야하는게 너무나도 많아서.. 시작하기도 전에 스트레스 받을수도있지만, 'DartPad' 라는 툴을 사용하면 별도의 설치없이도 간단한 코드를 연습해볼 수 있습니다. https://dartpad.dev/?null_safety=true&id DartPad dartpad.dev DartPad에 접속하면 좌우..