욱쓰 욱쓰

안녕하세요 뿔테 안경의 플러터이야기입니다. 늘 Ui 디자인을 할 때 flutter material에 한정적인 색상 때문에 한정적인 디자인을 할 수밖에 없었는데요. 이번에 Hex값을 이용해 색상을 지정할 수 있는 방법을 우연히 알게 되어 공유하고자 합니다. Flutter에서 Color의 클래스는 오직 정수만 변수로 받기때문에 문자열인 Hex의 값을 정수로 바꿔준다면 사용이 가능합니다. 그 과정에서 불투명도를 꼭 지정해주셔야 하는데요. 불투명도를 16진수로 변환한다면 ff이고 0xff뒤에 Hex값을 붙이면 사용이 가능합니다. import 'package:flutter/material.dart'; import 'package:flutter/painting.dart'; class Palette{ static c..

안녕하세요. 뿔테 안경의 플러터 이야기입니다. 오늘은 object를 활용해 리스트 뷰를 작성하는 방법을 배워 함께 공유하려고 합니다. 저는 책 카테고리를 만들기 위해서 ListView를 활용했습니다. image라는 Object를 만들어 각각의 카테고리의 이름과 이미지를 key, value 형태로 저장했습니다. 저는 ListView.builder에 count를 4로 설정했지만 object에 length로 길이 설정을 하시는 것을 권장드립니다. 다음 image에 DecorationImage를 불러와 미리 저장해놓은 경로 lib/assets/에 objectValues의 index를 추가해줍니다. 저는 container에 사이즈를 미리 지정해뒀고 그 사이즈를 채우는 이미지 크기를 원했기 때문에 fit: Boxf..

결제창을 만드는 도중 carousel_slider를 사용할 필요가 있어 배운 내용을 공유해보려 합니다. 저는 이미지를 리스트에 String타입으로 저장을 했습니다. 이후에 items에 imgList를 지정해준 다음 Map으로 변환시킨 후 위젯들을 반환해줬습니다. CarouseOptions에는 다양한 기능들이 있는데 하나하나 지정해보시면서 사용해보시면 Ui를 디자인하시는데 도움이 될 것 같습니다. 저는 특히 autoPlay기능이 너무 마음에 들었는데요. 일정한 시간이 지남에 따라 자동으로 이미지가 슬라이드 됩니다. 물론 Duration을 통해서 시간을 조절할 수 도 있습니다. 조금이나마 도움이 되셨다면 하트눌러주시면 큰 도움이 됩니다. 감사합니다.

안녕하세요 뿔테안경의 플러터 이야기입니다. 최근 네이버 도서 검색 api를 활용해 플러터 작업을 하던 도중 api로 가져온 책 문자에 특정 헤더가 함께 딸려와 작업을 하는데 골머리를 앓다 해결 방법을 알게되어 공유하려합니다. 현재 앱바에 책 제목을 넣는 작업을 하는데 위 사진과 같이 특정 헤더가 나옵니다. 저 같은 경우에는 이 문제를 해결하기 위해선 replaceAll이라는 문자열 StringMethod를 이용해 제거했습니다. replaceAll StringMethod는 특정 문자가 일치하면 특정문자를 지정한 문자로 변경해주는 StringMethod입니다. 간단한 정보이지만 도움이 되셨다면 댓글이나 하트 한번씩 눌러주시면 큰 힘이 됩니다. 감사합니다!!

안녕하세요. 뿔테 안경 개발자입니다. 최근 flutter 팀에서 flutter_lints라는 새 패키지를 만들었는데 analysis_options.yaml에 기본적으로 추가됩니다. 이전에 하던 방식으로 코드를 작성하려 하니 눈에 거슬리는 밑줄들이 보여서 신경이 많이 쓰였는데요. prefer const with constant constructors 오류를 해결하기 위해선 여러 가지 방법이 있는데 파일 상단에 무시 줄 주석을 추가해주는 방법이 있습니다. // ignore_for_file: prefer_const_constructors 이렇게 추가해주면 오류가 사라집니다. 또 다른 방법으로는 analysis_options.yaml파일을 열고 다음 린터 규칙을 추가합니다. rules 하단에 세가지를 추가해주시..

안녕하세요 뿔테 안경 개발자입니다 :) AppBar에 Gradient 속성을 부여할 수 있다는 것 알고 계셨나요? 잘 사용한다면 밋밋한 AppBar에 활력을 불어놓아 줄 Gradient 속성을 소개하고자 합니다. 아래에 AppBar 구성은 위 코드와 같습니다. 리스트 안에 담긴 Color들을 변경해주면 입맛에 따라 색상을 변경할 수 있으며 Alignment를 조정해주면 Gradient가 퍼지는 위치 변경이 가능합니다. 도움이 되셨다면 하트한번씩 눌러주시면 저에게 큰 힘이 됩니다. 감사합니다.

안녕하세요. 뿔테 안경 개발자입니다. 오늘은 앱의 꽃이라고 생각되는 AppBar에 대해서 알아보려고 합니다. 우선 기본적으로 제공되는 AppBar입니다. 일반적으로 AppBar는 Scaffold 안에서 생성이 가능합니다. 이제 AppBar의 타이틀을 변경해보고 중앙으로 옮겨도 보겠습니다. 타이틀을 중앙으로 위치시키려면 centerTitle에 값을 true로 주시면 됩니다. false를 주게 된다면 원상태로 복구가 됩니다. 다음으로는 AppBar의 색상과 높이를 변경해보도록 하겠습니다. 저는 grey 색상으로 변경하고 높이는 0으로 지정해보겠습니다. 높이는 elevation을 사용해서 조절이 가능합니다. elevation은 기본적으로 double(소수) 값을 받기 때문에 0.0으로 지정해줬습니다. 제법 그..

플러터에서 GridView 위젯을 사용할 때 스크롤이 되지 않을 때가 있습니다. 저도 이 문제를 해결하기위해 꽤 고생했는데요. 방법은 간단했습니다. GridView내에서 physics: ScrollPhysics(), 를 추가해주니 문제가 해결되었습니다. 방법이 도움이 되셨다면 하트 한번 눌러주세요! 저에겐 큰 도움이 됩니다. 감사합니다