Flutter

[플러터] List View 애니메이션

Navigation bar에서 다른 페이지로 이동시에 화면이 부드럽게 전환되는 애니메이션을 본 적이 있을 것이다. 다른 위젯에서도 이를 적용해보자. PageView //컨트롤러 정의 PageController _pageController = new PageController(initialPage: 0); PageView( physics: NeverScrollableScrollPhysics(), //수동으로 이동이 불가능하도록 함 scrollDirection: Axis.horizontal, //가로로 이동 controller: _pageController, //컨트롤러 children: pages), //List 이래도 되나 싶을 정도로 간단하다. index 변수가 필요 없고 Controller에 의해서 ..

[플러터] 이미지에 그림자 넣기

이미지의 바깥 선을 따라 그림자를 넣고자 할 때, BoxShadow로는 이미지의 바깥선이 아닌 위젯에 그림자를 생성한다. 의도한대로 디자인하기 위해 패키지화 된 아래의 코드를 삽입해보자. 아래의 코드는 본래 패키지이지만 단순한 코드이므로 패키지로 추가하지 않고 코드로 빼서 사용하자. simple_shadow | Flutter Package A customizable shadow for any widget pub.dev library image_shadow; import 'dart:ui'; import 'package:flutter/material.dart'; class ImageShadow extends StatelessWidget { final Widget child; final double opaci..

[플러터] 위젯에 클릭 이벤트 부여하기 (Inkwell, GestureDetector)

플러터의 일반적인 위젯들에는 onClick, onPressed 속성이 없다. InkWell 혹은 GestureDetector으로 일반 위젯을 감싸주면 클릭 이벤트들을 부여할 수 있다. InkWell InkWell( splashColor: hoverColor: highlightColor: onTap: () { } child : Container(...) ... InkWell은 onTap, onTapDown, onHover의 기본적인 클릭 이벤트들이 내장되어있다. 또한, 위젯을 클릭 했을때 아래와 같은 클릭 애니메이션이 기본으로 발생한다. 만약 애니메이션이 마음에 들지 않는다면 Colors.transparent을 정의해주면 된다. 간단하게 클릭 기능을 만들고 싶은 위젯을 InkWell로 감싸주면된다. foc..

[플러터] Http로 Json 파싱하기

일반적으로 서버는 Rest API를 이용해 데이터를 Json의 형태로 프론트와 주고 받는다. 또한 정보를 담고있는 간단한 API들도 Json의 형태로 제공되는 경우가 많다. 보통 Json은 아래의 사이트처럼 http로 시작하는 일반적인 웹사이트이지만 텍스트로 정보들만 나열되어 있다. https://api.binance.com/api/v1/ticker/allPrices (암호화폐 거래소 Binanace의 거래목록 리스트 Json) 우리는 이러한 http 주소에서 데이터를 파싱해 dart의 자료구조로 바꿔 앱에서 사용할 수 있다. JSON 파싱 http | Dart Package A composable, multi-platform, Future-based API for HTTP requests. pub.de..

[Flutter] 플러터 2.0 null-safety 이해하기

플러터 2.0 지난 3월 플러터가 2.0으로 stable 업그레이드 되었습니다. 이전에도 beta, master 채널에서 2.0을 사용해볼 수 있었지만 stable 출시로 안정화가 된 버전을 사용할 수 있게 되었습니다. 가장 큰 변화는 플러터 웹의 정식 지원, window, mac, linux 응용 프로그램의 지원, null safety의 적용입니다. 플러터 웹과 응용 프로그램들이 정식으로 지원되지만 사실 실제 서비스를 할 수 있는 수준은 아닙니다. 단지 구글이 플러터를 웹을 당장에 포기하지 않겠다는 의지정도로만 생각하면 좋을 것 같습니다. 제가 근무하는 스타트업 Linogry에서 플러터 2.0 웹으로 사내 컨텐츠 툴을 개발해 활용하고 있습니다. 확실히 개발속도가 빠르고 플러터 앱에서 사용되던 모듈 코드..