욱쓰 욱쓰

안녕하세요! 이전에 했던 예제를 이어서 진행해보겠습니다. price와 title은 가져와보셨나요? Stack( children: [ ClipRRect( borderRadius: BorderRadius.circular(60), child: Container( width: 80, height: 80, child: Image.network( foodList[index]["image"], fit: BoxFit.cover, ))), Padding( padding: EdgeInsets.only(left: 110.0), child: Text( foodList[index]["title"], style: TextStyle( fontWeight: FontWeight.bold, fontSize: 21), ), ), Padd..

안녕하세요 사랑니 뽑기 전에 긴장된 마음을 가라앉히고자 만든 간단한 가게 이름 선택 예제 앱을 만들어 보았습니다. 제작하면서 머릿속에 흐트러져있는 개념도 정리하고 정보도 나누고 싶어 작성하는 것이니 부족한 점이 있다면 피드백 주셔도 괜찮습니다. 우선 완성된 앱은 이렇습니다. 각자 취향에 따라 좋아하는 이미지와 텍스트를 입력하셔도 됩니다! 우선 StatefulWidget으로 foodList라는 List를 하나 만들어주었습니다. List foodList = [ { "title": "군침이 마카롱", "price": 3900, "image": "https://t1.daumcdn.net/cfile/tistory/99758C355F7F04AA25", "thx": "반갑습니다." }, { "title": "햄깅이 ..

BottomNavigationBar에 item 속성에 label을 수정하려면 item에 바깥으로 나와 selectLabelStyle을 적용해주면 됩니다. bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.today,color: Palette.bottomColor,), label: "기록", ), BottomNavigationBarItem( icon: Icon(Icons.calendar_today_outlined), label: "기록 모아보기", ), BottomNavigationBarItem( icon: Icon(Icons.bar_chart), label: "통계", ), ], selec..

안녕하세요 뿔테 안경의 플러터 이야기입니다. 오늘은 listview.builder를 사용해 예제를 만들어 보려고 합니다. 제가 준비한 예제는 해당 widget을 터치하면 텍스트 필드에 즉시 반영이 되는 기능입니다. 선택 가능한 widget들을 만들기 위해서 listview.builder을 활용했습니다. List iconList = [ '안녕하세요 🙌', '뿔테안경의 플러터 🤩', 'Cool 👍🏼', 'Amazing 👍🏼', ]; 우선 list를 String타입으로 만들어주었습니다. 다음 listview.builder에 높이와 넓이를 지정하기 위해 Container에 높이를 설정해 주었습니다. Container( width: MediaQuery.of(context).size.width, height: 10..

안녕하세요 뿔테 안경의 플러터이야기입니다. 늘 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입니다. 간단한 정보이지만 도움이 되셨다면 댓글이나 하트 한번씩 눌러주시면 큰 힘이 됩니다. 감사합니다!!