flutter

Flutter/기본

[Flutter] 애니메이션 처리를 위한 lottie 패키지 설명서

1. Lottie란 무엇인가? https://lottiefiles.com/kr/what-is-lottie Lottie 애니메이션은 무엇일까요? - 로티파일즈 Lottie는 JSON 기반의 애니메이션 포맷으로, 어느 기기와 플랫폼에서든 사용할 수 있습니다. LottieFiles을 통해 Lottie 애니메이션을 생성하고 편집하고 테스트할 수 있으며, 다른 사람과 협업하고 전 lottiefiles.com 해당 사이트에서 Lottie에 대해 정말 자세히 알려줍니다!. 2. Lottie 패키지 사용 Flutter에서는 이러한 Lottie JSON을 컨트롤할 수 있는 패키지가 있습니다. LIKES수가 엄청납니다!. 바로 사용해 보도록 하겠습니다. 2.1 패키지 설치 https://pub.dev/packages/lo..

Flutter/기본

[Flutter] IconButton 간격 줄이기 feat.패딩,마진제거

해당 IconButton들의 간격을 줄여야 하는 일이 발생했다. 간격을 줄이기 위해서 해당 아이콘들의 패딩과 마진값을 보기로 하자. Inspector로 확인한 결과 IconButton이 기본적으로 가지고 있는 패딩/마진 값이 있다는 걸 확인하였다. 대부분의 해결방안으로 아래와 같은 코드를 알려주었다. return IconButton( ... padding: EdgeInsets.zero, constraints: BoxConstraints(), ); padding에 EdgeInsets.zero를 넣고 constraints에 BoxConstraints()를 넣고 확인해 보자. 확인한 결과 패딩값은 사라진 거 같으나 결론적으로 간격이 줄어들지 않았다. 해결책을 찾던 중에 아래와 같은 방법으로 해결할 수 있었다...

Flutter/기본

[Flutter] Unit Test - 단위 테스트

1. Unit Test? Unit Test(단위 테스트)는 소프트웨어 개발에서 사용되는 테스트 방법 중 하나입니다. UnitTest는 코드의 작은 단위인 모듈, 함수, 클래스 등 의 개별적인 단위를 격리하여 테스트하는 것을 의미합니다. 2. Unit Test 장점 코드의 신뢰성 향상 코드의 각 부분을 개별적으로 테스트하므로 오류를 발견하고 수정할 수 있습니다. 리팩토링 지원 코드를 수정하거나 개선할 때, Unit Test는 기존 기능을 올바르게 유지하면서 변경 사항을 검증할 수 있습니다. 문서화 테스트 케이스는 코드의 사용법과 예상 동작에 대한 문서 역할을 할 수 있습니다. 개발자 간의 협업 테스트 케이스는 동작을 명확하게 정의하므로, 여러 개발자들이 동일한 기준으로 작업할 수 있습니다. 3. Unit ..

Flutter/기본

[Flutter] 텍스트 폰트 설정하기 (Pretendard폰트)

안녕하세요. 오늘은 Flutter에서 텍스트 폰트를 설정하는 방법을 알아보겠습니다. 다양한 폰트가 존재하고 설정방법은 크게 다르지 않습니다. 이번에는 전 세계에서 가장 대중적으로 사용되는 Pretendard폰트를 적용해 보겠습니다. 1. 폰트 다운로드 https://cactus.tistory.com/306 Pretendard Pretendard 프리텐다드 Pretendard 프리텐다드 글꼴 다운로드 일본어 버전 다운로드 GitHub에서 보기 system-ui를 대체하는 글꼴 Apple의 system-ui가 익숙한 나로서는 San Francisco와 Apple SD 산돌고딕 Neo가 없는 cactus.tistory.com 해당 사이트에서 Pretendard폰트를 다운로드하여 줍니다. Pretendard폰트..

Flutter/기본

[Flutter] 상태 표시줄 또는 스테이터스 바 설정하기

안녕하세요 오늘은 아래 사진에 있는 상단 상태표시줄과 하단 내비게이션 바를 커스텀해서 본인의 앱에 맞게 설정해 보겠습니다.    1. 기본설정상태 표시줄을 설정하기 위해서 기본적으로 SystemChrome 클래스를 사용해야 합니다. main 함수에서 호출하는 것은 상태 표시 줄의 스타일을 앱 전체에 일관되게 적용하기 위한 좋은 방법입니다. void main() async { WidgetsFlutterBinding.ensureInitialized(); await SystemChrome.setEnabledSystemUIMode(); runApp(''');}  2. 상단바, 하단바 둘 다 없애기 void main() async { WidgetsFlutterBinding.ensureInitialized(..

Flutter/기본

[Flutter] 람다함수없이 코드를 짜는 방법 feat. Tear-offs

안녕하세요. 여러분 혹시 이런 코드 보신 적 있으신가요? ElevatedButton( child: Text("increment"), onPressed: increment, ) 해당 코드에 이상한 점을 눈치채셨나요? ElevatedButton( child: Text("increment"), onPressed: () { increment(); }, ) 대부분의 사람들은 위의 코드처럼 사용하셨을 겁니다. 하지만 작업을 하다가 공부를 하다가 첫 번째 코드 같은 코드를 접해보신 분들도 있으실 겁니다. 오늘 알아볼 것이 바로 첫 번째 코드가 무엇인지? 알아보겠습니다. 1. 람다 함수를 찢어버려~ "Tear-offs" 람다 함수 없이 함수의 이름만으로 사용하는 것을 Tear-offs라고 부릅니다. 직역을 하자면 떼어..

Flutter/기본

[Flutter] flutter_dotenv 패키지 사용해보기 feat. env

이번에 사용해 볼 패키지는 flutter_dotenv라는 패키지입니다. 1. dotenv 가 무엇일까요? 설명에는 애플리케이션 전체에서 사용할 수 있는 .env 파일을 런타임에 구성을 로드하는 방법이라고 적혀 있습니다. 그렇다면 .env 파일은 어떠한 파일일까요? env 파일이란 애플리케이션의 구성 변수를 저장하는 텍스트 파일입니다. 일반적으로 ".env"라는 이름의 파일로 저장되며, 각 줄은 키-값 쌍으로 구성되어 있습니다. 구성 변수는 애플리케이션의 동작에 영향을 주는 설정 값들을 나타냅니다. 예를 들어서 api-key, 서버 URL 등 외부로 공개하기 민감한 구성 변수들을 저장하는 파일입니다. 한마디로 dotenv는 Flutter에서 env파일을 관리하고 쉽게 사용할 수 있게 도와주는 패키지입니다...

Flutter/기본

[Flutter] Text에 밑줄, 윗줄, 취소선 추가하기

1. 기본 Text( "텍스트", style: TextStyle( decoration: TextDecoration.none, ), ), 2. 밑줄 Text( "텍스트", style: TextStyle( decoration: TextDecoration.underline, ), ), 3. 윗줄 Text( "텍스트", style: TextStyle( decoration: TextDecoration.overline, ), ), 4. 취소선 Text( "텍스트", style: TextStyle( decoration: TextDecoration.lineThrough, ), ),

주톨
'flutter' 태그의 글 목록 (7 Page)