본문 바로가기
반응형

flutter111

Flutter[플러터] / FadeTransition 을 사용하여 페이드 효과 애니메이션 주기 (불투명도 애니메이션) FadeTransition (Flutter Widget of the Week) FadeTransition class위젯의 불투명도를 애니메이션으로 표현합니다.두 자식의 크기 사이에서 자동으로 애니메이션을 적용하고 그 사이에서 페이드 아웃하는 위젯의 경우 AnimatedCrossFade 를 참조하세요.https://youtu.be/rLwWVbv3xDQ공식 문서 코드 FadeTransition 은 간단한 페이드 효과 애니메이션을 줄 수 있는 위젯이다.위젯 자체는 간단하지만 animationController 를 사용하기 때문에 마냥 쉬운건 또 아니다.먼저 하위 속성을 보고 알아보도록 하자. 하위 속성속성명타입기본값설명 opacity Animation -자식 위젯의 투명도를 제어하는 애니메이션 alwaysIncludeSemantics bool false애니메이션 중에도 자식의 시맨틱.. 2025. 4. 26.
Flutter[플러터] / FutureBuilder 를 사용하여 로딩바 만들기 (미래 관리 하기) FutureBuilder (Flutter Widget of the Week) FutureBuilder classFuture 와의 상호작용에 대한 최신 스냅샷을 기반으로 자체적으로 빌드되는 위젯입니다. https://youtu.be/zEdw_1B7JHY공식 문서 코드 FutureBuilder 는 비동기 작업의 결과를 기다렸다가, 그 결과에 따라 UI 를 업데이트시켜주는 위젯이다.솔직히 공식 문서나 영상을 봐도 이해가 바로 가진 않을 것인데 쉽게 풀어서 설명해 보도록 하겠다. 1. 사용처 서버에서 데이터를 받아와서 화면에 보여주는 상황서버에서 데이터를 받아오게 되면 필연적으로 지연(딜레이)이 되기 마련이다. 이럴 때에 보통의 앱은 인디케이터(로딩바)를 보여주게 되는데 FutureBuilder 가 그 동작을 도와준다고 생각하면 된다.2. 작동 방식 FutureBuilder는 Futu.. 2025. 4. 25.
Flutter[플러터] / Opacity 를 사용하여 투명도 조절하기 (오파시티) Opacity(Flutter Widget of the Week) Opacity class자식 위젯을 부분적으로 투명하게 만드는 위젯입니다. 이 클래스는 자식을 중간 버퍼에 칠한 다음 자식을 다시 부분적으로 투명한 장면에 혼합합니다.불투명도 값이 0.0과 1.0이 아닌 경우, 이 클래스는 자식 요소를 중간 버퍼에 페인팅해야 하므로 상대적으로 비용이 많이 듭니다. 불투명도 값이 0.0이면 자식 요소는 전혀 페인팅되지 않습니다. 불투명도 값이 1.0이면 자식 요소는 중간 버퍼 없이 즉시 페인팅됩니다.기본적으로 투명한 배경을 가진 중간 버퍼가 존재하면 일부 자식 위젯의 동작이 달라질 수 있습니다. 예를 들어, BackdropFilter 자식 위젯은 이 위젯과 배경 자식 위젯 사이의 콘텐츠에만 필터를 적용할 수 있으며, 원하는 결과를 얻으려면 BackdropFilter.ble.. 2025. 4. 24.
Flutter[플러터] / AnimatedContainer 를 사용하여 움직이는 컨테이너 만들기(애니메이션 컨테이너) AnimatedContainer (Flutter Widget of the Week) AnimatedContainer class시간이 지남에 따라 값이 점차 바뀌는 Container 의 애니메이션 버전입니다. AnimatedContainer 는 제공된 곡선과 지속 시간을 사용하여 속성의 이전 값과 새 값 사이에서 자동으로 애니메이션을 적용합니다. null인 속성은 애니메이션이 적용되지 않습니다. 자식 및 하위 항목도 애니메이션이 적용되지 않습니다.이 클래스는 내부 AnimationController 를 사용하여 Container 의 여러 매개변수 간에 간단한 암시적 전환을 생성하는 데 유용합니다. 더 복잡한 애니메이션의 경우 DecoratedBoxTransition 과 같은 AnimatedWidget 의 하위 클래스를 사용하거나 자체 AnimationController를 사용하는 것이 좋.. 2025. 4. 23.
Flutter[플러터] / Wrap 을 사용하여 반응형으로 정렬하기 (유동적 레이아웃) Wrap (Flutter Widget of the Week) Wrap class자식 위젯을 여러 개의 수평 또는 수직 방향으로 표시하는 위젯입니다. Wrap 은 각 자식 요소를 배치하고, direction 에 따라 주어진 주축에서 이전 자식 요소와 인접하게 배치합니다. 이때 자식 요소 사이에는 간격을 둡니다. 자식 요소를 배치할 공간이 충분하지 않으면 Wrap 은 교차축에서 기존 자식 요소 옆에 새 런을 생성합니다.모든 자식이 런에 할당된 후, 런 내의 자식은 주축의 정렬과 교차축의 crossAxisAlignment 에 따라 배치됩니다.그런 다음 런 자체는 runSpacing 및 runAlignment 에 따라 교차 축에 배치됩니다. https://www.youtube.com/watch?v=z5iw2SeFx2M 공식 문서 코드 Wrap 은 반응형 정렬하는 것에 있.. 2025. 4. 22.
Flutter[플러터] / Expanded 를 사용하여 크기 차지하기(확장하기) Expanded (Flutter Widget of the Week) Expanded classRow, Column 또는 Flex 의 자식을 확장하여 자식이 사용 가능한 공간을 채우는 위젯입니다. Expanded 위젯을 사용하면 Row, Column, Flex 의 자식 위젯이 주축을 따라 사용 가능한 공간(예: Row 의 경우 가로, Column 의 경우 세로)을 채우도록 확장됩니다. 여러 자식 위젯이 확장되는 경우, 사용 가능한 공간은 flex 요소에 따라 각 자식 위젯에 분배됩니다.Expanded 위젯은 Row, Column, Flex 의 자손이어야 하며 Expanded 위젯에서 이를 둘러싼 Row, Column, Flex 까지의 경로에는 StatelessWidget 이나 StatefulWidget 만 포함되어야 합니다 (RenderObjectWidget 과 같은 다른.. 2025. 4. 21.
Flutter[플러터] / SafeArea 를 사용하여 화면에 전체적인 패딩 주기, 화면 보호하기 SafeArea (Flutter Widget of the Week) SafeArea class운영 체제의 침입을 피하기 위해 충분한 패딩으로 자식 위젯을 삽입하는 위젯입니다. https://www.youtube.com/watch?v=lkF0TQJO0bA 공식 문서 코드 SafeArea 는 앱을 구성할 때 빠질 수 없는 중요 위젯이다.어떠한 역할을 수행하는가 하면 바로 앱을 화면의 가장자리로부터 패딩을 띄워주는 역할을 한다.이는 굉장히 중요한 역할을 하는 것인데 우리가 만든 앱이 화면에 가려져 보이지 않는 불상사를 방지해 준다.공식 문서의 예제를 보면 굉장히 복잡한 것 같지만 사실 우리는 그냥 하나만 알면 된다.SafeArea( child: Container(),)그냥 SafeArea 위젯으로 씌워주기. 끝이다.SafeArea는 웹이나 dartpad 로 실행하면 "이.. 2025. 4. 20.
Flutter[플러터] / 다트 패드 임베딩 하기 (dartPad Embedding) 블로그에 다트 패드 삽입 (dart pad) 오늘은 한번 블로그에 다트 패드 삽입하는 방법을 알아볼 것이다. 바로 알아보도록 하자.1. 아이디 발급받기 일단 가장 먼저 다트 패드에 넣을 코드를 작성해야 한다.이제 그 코드를 github gist 에 올리면 된다.https://gist.github.com/ Discover gistsGitHub Gist: instantly share code, notes, and snippets.gist.github.com여기 들어가 준다. 그럼 이제 이런 화면이 나올 건데 여서 Filenname including extension 이 부분이 누가 봐도 알 수 있듯이 제목이다만 유의할 점은 우리가 dartpad 에 넣는 것이기 때문에 dart 여야 한다.확장자 .dart 를 붙여주도록 하자. 그런 후 바디에 코드를 .. 2025. 4. 20.
Flutter[플러터] / Live Templates 만들고 사용하기 (라이브 탬플릿, 자동 완성) Intellij IDEA 에서는 Live Templates 라는 편리 기능을 지원하고 있다.오늘 한번 사용해보자.Live Templates 들어가기 일단 File 에서 Settings 로 넘어가 준다. 그 후 Editor 안에 Live Templates 이라고 있는데 여기에 들어가 준다.그리고 사진처럼 Flutter 탭을 선택하고 열 것이다. 탭을 열면 이렇게 나올 텐데 자주 사용하는 stless 나 stful 도 보이는 모습이다.그리고 사진 속에서 지금 위에 3개가 파란색으로 되어 있는데 저 3개가 내가 새로 추가한 거다. 한번 추가해 보자. 사진 속 순서대로 Flutter 를 선택한 후 위의 + 버튼을 누르고 Live Template 를 선택한다. 그럼 위와 같이 라고 하나 만들어졌을 것이다. 지금.. 2025. 3. 27.
Flutter[플러터] / Expended 제대로 사용하기!! (Expanded 사용법) 오랜만에 위젯 설명으로 찾아왔다. 코드 작성 중 마치 숭배의 대상을 찾은 것 같아 헐레벌떡 뛰어와 글을 쓰기 시작했다. 오늘은 플러터의 위젯인 Expanded 에 대해서 알아보자... 솔직히 지금까지 개발하면서 이 친구를 별로 사용한 적이 없던 것 같다.. 설명만 보면 뭐 그저 그렇고.. 플러터 공식 문서에 있는 예제도 보니까 그냥 "그래그래" 이런 느낌이었다.. 근데 이거 사용하면 할수록 진국이다.. 크기의 대한 고민을 엄청나게 줄여준다!! 그리고 크기 오류 해결 1짱이다 진짜루 그냥 자세한 설명 없이 바로 보여주겠다.SvgPicture.asset('assets/icon/man.svg')Svg 를 불러왔는데 크기가 너무 큰 상황이다. 일단 그럼 우린 어떠한 해결책을 찾는가? 일단 난 BoxFit.con.. 2025. 3. 16.
Flutter[플러터] / 기울기, 움직임(모션) 감지 센서(자이로 센서) 구현하기 (패키지 사용 X) 오늘은 기울기 감지 센서를 사용해 볼 것이다. 허나 플러그인을 사용하지 않고 코틀린 코드와 연결해서 구현을 해볼 것이다.바로 만들어 보자! 전체 코드(Kotlin)package com.example.your_packgeimport android.hardware.Sensorimport android.hardware.SensorEventimport android.hardware.SensorEventListenerimport android.hardware.SensorManagerimport android.os.Bundleimport io.flutter.embedding.android.FlutterActivityimport io.flutter.embedding.engine.FlutterEngineimport i.. 2025. 2. 22.
Flutter[플러터] / Text.rich 사용해서 텍스트 개별 사이즈 조절 하기 (Text Size 조절, TextSpan) 한 번쯤은 이런 의문을 가져본 적이 있을 것이다.Text() 안에 넣은 글자 크기를 글자마다 다르게 할 순 없는 건가? 이 생각 말이다.예를 들자면 (가나다라 )이런식으로 한 글이지만 폰트 사이즈도 다르게 하고 싶고 굵기도 다르게 하고 싶을 것이다.놀랍게도 그 기능은 안될 줄 알았던 Text 안에 있다. Text.rich() .을 사용해서 Text의 명명된 생성자를 불러오면 그 기능을 사용할 수 있는데 한번 알아보자.일단 우선 Text.rich를 사용해야 한다. 그리고 그 안에 값으로는 TextSpan() 을 사용한다. 백문이 불여일견이라고 한번 어떻게 사용하는지 봐보자.Text.rich( TextSpan( children: [ TextSpan( text: '디아블로', .. 2025. 1. 10.
Flutter[플러터] / 페이징 기능 제작 (Pagination, Paging) (페이지 넘기는 기능) 데이터를 불러올 때 페이지 형식으로 가져와지는 데이터가 있다. 나로 예를 들자면 TMDB에서 영화 데이터를 쓰려고 하는데 url을 이런 식으로 주고 있었다.https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=1"당연하게도 이 데이터를 가져오면 1페이지의 데이터밖에 못 뽑기 때문에 나는 페이지네이션 기능을 제작하기로 했다.(애초에 넣어야 하긴 했다) 먼저 사용할 변수 선언.int currentPage = 1;int totalPages = 1; 그런 다음 현재 내 코드에서 데이터 처리를 하고 있는 함수 안에 page 값을 추가하였다.Future getMovieList({int page = 1}) async {await Client().get.. 2025. 1. 7.
Flutter[플러터] / shared_preferences 은 어떻게 데이터를 저장하는 것일까? 우리가 앱 개발을 할 때 꼭 하나쯤은 사용하는 것이 있는데 그것이 바로 shared_preferences 이다.아마 다들 이 셰어드 프리페런스가 앱에다가 데이터를 저장한다는 것은 알고 있을 텐데 정확히 어떻게, 어디에 저장하는지는 잘 모를 것이다. 이번 포스팅에서는 그것에 대해 알아보자. 자 일단은 맨 처음, pubspec.yaml 파일부터 봐보자.너무 당연한 것이긴 하다만 shared_preferences를 사용하고 싶다면 pubspec.yaml 파일에다가 Pub get 을 해줘야 한다.그다음은 이제 사용하는 것인데 간단하게 iniState를 사용하여 데이터를 저장하는 코드만 적어보겠다.@overridevoid initState() { super.initState(); WidgetsBinding.i.. 2024. 11. 19.
Flutter[플러터] / 코드 자동 완성이 안될 때 해결 방법 (Restart Dart Analysis server)(안드로이드 스튜디오)(IntelliJ) 안드로이드 스튜디오에서 코드를 치다가 어디 갔다 왔는데 갑자기 자동 완성이 안되거나 색깔이 이상해지고 색이 다 하얀색으로 통일되는 등의 경험을 다들 한 번쯤은 해봤을 거라고 생각한다.(심지어 Alt + Enter 나 Ctrl + Spcae도 안 먹는다) 이럴 때 우리는 그냥 일단 기분이 굉장히 나빠지고 프로젝트를 다시 껐다 킬 생각에 정신이 까마득한 곳으로 날아가곤 한다.그렇다면 이런 문제가 왜 생기는 것일까? 사실 이 문제의 원인은 안드로이드 스튜디오 같은 IDE에서 Dart Analysis 서버를 불러오지 못해 생기는 문제이다.Dart Analysis는 코드 자동 완성, 오류 감지, 린트 검사, 중복 코드 경고등 우리가 코드를 작성할 때 필수불가결한 존재인데이런 오류가 떴을 때 대게 난 Main Me.. 2024. 10. 17.
반응형

티스토리툴바