Flutter

[플러터] TabBar 만들기

Tabbar를 만드는 방법에도 여러가지가 있다. AppBar와 함께 만들 수 있고 TabBar와 TabBarView 위젯으로도 만들 수 있다. 후자의 방법에 대해 알아보자. TabBar & TabBarView class _LibraryPageState extends State with SingleTickerProviderStateMixin { //클래스에 with 해준다. ... } 사용하고자하는 클래스에 TickerProvider를 with 해준다. 간단하게 Animation의 Sync를 맞춰준다고 생각하면 된다. //선언부터 한다 TabController? _tabController; @override initState(){ //정의는 initState 이후에 한다 _tabController = ne..

[플러터] 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..