Flutter/Flutter Widget Design

[플러터] ListView 경계선 흐리게 하기

ListView를 사용할 때 List가 끝나는 부분의 경계선을 부드럽게 만들어주고 싶을 때가 있다. 반투명을 주어 아래와 같이 자연스럽게 만들어주는 간단한 위젯이 존재한다. ShaderMask ShaderMask( shaderCallback: (Rect bounds) { return LinearGradient( //아래 속성들을 조절하여 원하는 값을 얻을 수 있다. begin: Alignment.center, end: Alignment.topCenter, colors: [ Colors.white, Colors.white.withOpacity(0.02) ], stops: [0.9, 1], tileMode: TileMode.mirror, ).createShader(bounds); }, (child: List..

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

[플러터] Font 변경하는 방법

플러터에서 글꼴, 폰트를 변경하는 방법이다. 프로젝트 설정 1. 먼저 사용할 폰트를 프로젝트내에 넣어준다. 일반적으로 assets/font/ 폴더 내에 넣는다. 2. pubspec.yaml의 최하단에 보이는 fonts:에 아래의 예시처럼 작성한다. fonts: - family: Yanolja fonts: - asset: assets/font/yanolja_Bold.otf weight: 700 - asset: assets/font/yanolja_Regular.otf - family: Jalnan fonts: - asset: assets/font/JalnanOTF.otf style: italic 예시 코드에서 사용하고자 하는 폰트는 Yanolja체와 Jalnan체이다. family가 코딩 시 사용할 폰트의 ..

[Flutter] 모서리를 둥글게 / 테두리 넣기

위젯의 모서리를 둥글게하고 테두리를 넣기 위해선 위젯의 속성에 decoration이나 shape가 있어야한다. 해당 속성에서 아래의 방법으로 위젯을 둥글게, 테두리를 디자인 할 수 있다. 아래의 두 가지 유형을 기억하면 대부분의 위젯을 처리할 수 있다. Decoration 속성을 가진 위젯 Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(50), //모서리를 둥글게 border: Border.all(color: Colors.black12, width: 3)), //테두리 Shape 속성을 가진 위젯 ButtonTheme( shape: RoundedRectangleBorder( borderRadius: BorderRadiu..