flutter 25

[Flutter] 그림자 버튼 만들기 BoxShadow 사용하기

요즘 유행하는 그림자 버튼 UI를 만들어 보자 BoxShadow를 사용하여 그림자를 줄 수 있다. GestureDetector를 사용했지만, 버튼으로 감싸도 가능.. GestureDetector( onTap: (){// Action}, child: Container( decoration: BoxDecoration( color: Colors.white, // background color boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.5), spreadRadius: 5, blurRadius: 7, offset: Offset(0, 1), ), ], shape: BoxShape.circle, ), child: Container( margin: EdgeIn..

develop/Flutter 2023.04.09

[Flutter] iOS 개발에서 Flutter, 다시 iOS 개발자로 (Flutter 개발 후기)

iOS개발자에서 Flutter 개발자로 생계형 개발자인 본인은 안드랑 iOS랑 같이 빌드를 해서 부자가 되겠다는 부푼 꿈을 안고 flutter 개발에 뛰어 들었다. ... 뛰어만 들었다. 뭐,, 다른 이유 없이 단순계산으로 iOS앱을 안드에도 배포하면 수익이 2배!! 하며 플루터 개발을 시작한것이다. 정말 크로스 플랫폼이라는 이유로 뭐,, iOS 개발이 잘 맞았으니, flutter도 잘 맞겠지라며 안일한 생각으로 시작했다. 언제나 그렇듯 가벼운 마음으로, 푼돈이라도 벌어보자는 마음으로, 그 결과.. Flutter 개발자에서 다시 iOS개발자로 아이폰 5부터 애플 생태계를 벗어난적 없는 앱등이에게는 flutter의 기본 디자인이 너무 구렸지만 어떻게든 원하는대로 만들어 가려고 했다. 다만, 나는 디자이너 ..

develop/Flutter 2023.03.08

[Flutter] Theme 다크모드 라이트모드 설정 하기 - 시스템 모드로 사용하기

dark 모드가 세상에 나오고 개발자들과 디자이너들은 더 귀찮고 힘들어진것 같다. 물론 iOS13이후로 눈이 더 편해진 것은 사실이지만 말이다. 사용자 입장에서는 정말 편한데, 개발자와 디자이너들은 뭐.. 귀찮을 뿐이지만 말이다. 그래도 사용자 친화적으로 개발을 하기 위해서는 다크모드와 라이트모드를 모두 지원하는게 좋은 방법 중 하나이며 그렇게 하는건 역시나 귀찮다. 하지만 iOS에 비해 flutter는 파일만 복사 붙여넣기로 증식하면 되서 나름... 편한거 같다. (내 기준) Theme 사용 선언하기 그럼 다크모드를 설정해보자! Theme을 메인에서 설정해주어야 하는 부분이 있는데, 아래와 같이 적용하면 된다. main.dart void main() async { WidgetsFlutterBinding..

develop/Flutter 2023.02.10

[Flutter] Themes Playground 이용하기 앱 색조합 찾기 추천

개인 개발자, 특히 디자인 능력이 모자란 사람이 있다. 는 나.. 개인 개발을 하면서 절실히 느끼는 기획력과 디자인의 중요성 회사 다닐 때는 당연하게 생각하며 디자인 검수받을 때 단전에서 올라오는 빡침을 억누르지 못했는데, 존경하는 디자인 선생님덜.. 죄송합니다. 혼자하니, 덜 떨어진 디자인 능력이 한탄스러울 뿐.. 최근 공개된 themes Playground에서 색 조합을 추천을 해줘서.. 그나마 나은 것 같다. 빨간 워닝 색도 수십가지가 있는 게 너무.. 그 미묘한 차이라는 게 생각보다 크다. https://rydmike.com/flexcolorscheme/themesplayground-v6/#/ Themes rydmike.com 위 사이트에서 추천하는 색 조합이 있다. 이렇게, primary컬러, ..

develop/Flutter 2023.02.08

[Flutter] progress bar 진행률 계산하기 percent_indicator 사용하기

flutter는 progress bar를 지원하지만.. 예쁘지 않다.. ㅎㅎpackage:flutter/src/material/progress_indicator.dart간단하게 설명하자면value : 진행률backgroundColor : 기본 백그라운드 색 color: 테두리 색 valueColor: 진행률 색상  LinearProgressIndicator( value: 0, backgroundColor: Color.fromARGB(255, 138, 65, 65), color: Colors.black45, valueColor: AlwaysStoppedAnimation(Colors.white), minHeight: 10.0, semanticsLabe..

develop/Flutter 2023.02.07

[flutter] Flutter 샘플 코드 찾기, 예제 찾기

flutter를 배우다 보면 같은 ui를 정말 다양하게도 만드는데, 회사나, 프로젝트를 하면서 다른 사람이 코딩 하는 걸 보는게 아니라면 더더욱 그렇다. 특히 응용의 과정 중에 코드가 비대해져서 이게 맞나..? 하는 생각이 참 많이 든다. 그럴 때, 다른 코드를 보면서 인사이트를 얻는것도 좋은 방법인 것 같다. 예제 소스를 찾으면서 잘 정리되고, 애매하게 정리된 개념들을 확실 하게 잡아 줄 수 있는 것을 원했다. 그래서 여러 사이트를 돌아다니다, 괜찮은 사이트가 있어 소개하고자 한다. https://flutterawesome.com/ Flutter Awesome An awesome list that curates the best Flutter libraries and tools. flutterawesom..

develop/Flutter 2023.01.29

[git] flutter gitignore 작성하기 / 자동 생성하기

flutter 공부를 시작하면서 깃에 올리려하니, 원래 사골 처럼 우려먹던 xcode, swift 관련 gitignore를 또 사용할 수 없게 되었다..! 그럼.. 새로 적어야징..! https://www.toptal.com/developers/gitignore/ gitignore.io Create useful .gitignore files for your project www.toptal.com 추천 키워드는 flutter, android, swift, xcode, etc.. 한번 생성 해 두고 이제 두고두고 우려먹어야겠다..!!!

develop 2023.01.28

[Flutter] 앱 아이콘 변경하기 App icon

플루터의 초기 프로젝트 앱 아이콘은 위와 같은 플루터 아이콘이다. 배포할때에는 아이콘을 변경하지 않을 수 없다. = 변경해야 한다~ 아이콘을 변경하는 수 많은 방법들이 존재 하지만, 어떻게 하면 가장 빠르게 또, 다른 앱들에도 쉽게 적용 할 수 있을까? 우선 변경할 이미지 파일을 준비한다. 알파 값이 포함된 png 파일이면 iOS 심사에 리젝 당할 수 있으니, 가능한 jpeg 로 준비한다. 만든 파일을 아래 사이트에서 app icon 사이즈에 맞도록 업로드 후 다운로드 한다. https://appicon.co App Icon Generator appicon.co 위 링크에서 앱 아이콘 생성시 아래 폴더 구조로 압출 파일이 하나 다운 받아진다. android / iOS 두가지만 살펴 본다면 안드로이드 - ..

develop/Flutter 2022.10.31

[Flutter] 숫자 counter 만들기 <like iOS stepper>

우선 iOS에서 쓰던 stepper는 숫자 증감의 객체 였는데, flutter에서의 stepper는 아래 사진 처럼 음.. stepper다.. (타임 라인 작성할 때 사용하기 좋다...?!) 참 설명하기는 어렵지만 아래 사진을 보면 분명히 구분 된다. 그렇다면 iOS 처럼 숫자 counter에 사용 할 만한 객체가 flutter에 있는가? 결론은 없다. 직접 만들어야 한다. 뭐, 아래 플러그인이 존재 한다. https://pub.dev/packages/counter_button counter_button | Flutter Package Counter Button is a flutter library that allows you to create a button with animation effects w..

develop/Flutter 2022.10.30