반응형 플러터13 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 / 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 / 코드 자동 완성이 안될 때 해결 방법 (Restart Dart Analysis server)(안드로이드 스튜디오)(IntelliJ) 안드로이드 스튜디오에서 코드를 치다가 어디 갔다 왔는데 갑자기 자동 완성이 안되거나 색깔이 이상해지고 색이 다 하얀색으로 통일되는 등의 경험을 다들 한 번쯤은 해봤을 거라고 생각한다.(심지어 Alt + Enter 나 Ctrl + Spcae도 안 먹는다) 이럴 때 우리는 그냥 일단 기분이 굉장히 나빠지고 프로젝트를 다시 껐다 킬 생각에 정신이 까마득한 곳으로 날아가곤 한다.그렇다면 이런 문제가 왜 생기는 것일까? 사실 이 문제의 원인은 안드로이드 스튜디오 같은 IDE에서 Dart Analysis 서버를 불러오지 못해 생기는 문제이다.Dart Analysis는 코드 자동 완성, 오류 감지, 린트 검사, 중복 코드 경고등 우리가 코드를 작성할 때 필수불가결한 존재인데이런 오류가 떴을 때 대게 난 Main Me.. 2024. 10. 17. [플러터]Flutter / Hot Reload와 Hot Restart 의 차이점 우리가 앱을 디버깅할 때 한 번쯤은 겪는 상황이 있다. 바로 Ctrl + S 한 다음에 에뮬레이터에서 동작이 잘 되는지 테스트해보려고 했는데 아예 클릭조차 되지 않는 상황 말이다. 이런 문제가 보통 발생하는 원인은 지금 테스트해보려고 하는 그 코드가 외부 코드, 예를 들어 컨트롤러 같은 외부 코드와 연결되어 있는 코드(글로벌 상태)라서 그렇다.우리는 이런 문제가 발생했을 때 대게 그냥 다시 flutter run을 하거나 안드로이드 스튜디오라면 시작버튼을 다시 누를 것이다. 그럼 왜 외부 코드와 연결된 위젯은 Ctrl + S 같은 걸로 상태가 업데이트되지 않는 것일까?그 이유는 Ctrl + S가 하는 동작은 Hot Reload이기 때문이다. 그렇다면 Hot reload라는 것은 무엇일까? 먼저 Hot .. 2024. 10. 12. [플러터]Flutter / Flutter Performance 에서 새롭게 바뀐 Flutter Inspector 사용법 (Flutter DevTools) 안드로이드 스튜디오에서 최근 플러터 플러그인 버전부터 DevTools와 관련되어서 업데이트가 진행되었다.업데이트 내용을 살펴보면 원래 우리가 쓰던 기존의 Flutter Performance는 삭제가 되고 새롭게 Flutter DevTools에 병합이 되었다. 오늘은 원래 Flutter Performance에 있던 기능이 어디로 병합됐는지 알아보고 사용해 볼 것이다. https://plugins.jetbrains.com/plugin/9212-flutter Flutter - IntelliJ IDEs Plugin | MarketplaceSupport for developing Flutter applications. Flutter gives developers an easy and productive way t.. 2024. 10. 11. [플러터]Flutter / showModalBottomSheet 위젯 만들기 (위로 올라오는 팝업창 만들기) 오늘은 간단하게 위로 올라오는 로직을 하나 만들어 볼 것이다.컨테이너에 애니메이션을 넣어서 만드는 것이 아닌 플러터에서 제공해 주는 위젯을 사용해서 만들어 볼 것이다. 그럼 일단 먼저 위로 올라오는 로직을 만들기 위해서는 showModalBottomSheet 위젯을 알아야 할 것이다.showModalBottomSheet 위젯이란?showModalBottomSheet 위젯은 흔히들 말하는 팝업창의 한 종류로써 플러터가 제공해주고 있는 위젯이다.하위 속성이 엄청 많지만 오늘은 필수 2개와 그냥 하위 속성 하나만알아보자. 필수 하위 속성: context, builder 하위 속성(1개만): backgroundColor 하나씩 알아보도록 하자. 필수 속성:context context 는 위젯트리 내에서 특정 위.. 2024. 9. 12. [플러터]Flutter / Switch 위젯 만들기, 사용하기(on, off 버튼 / 토글 버튼) 이번 포스팅에서는 간단하게 플러터에서 제공하고 있는 각기 다른 디자인의 스위치 3종류를 알아볼 것이다. 일단은 그럼 가장 먼저 스위치 위젯에 대하여 알아야 할 것이다.Switch 위젯이란?switch 위젯은 우리가 흔히 생각하는 on, off 로 바뀌는 토글 버튼의 모습을 하고 있는 위젯이다.하위 속성이 엄청 많지만 간단하게 몇 가지만 알아보자. 필수 하위 속성: value, onChanged 하위 속성(4개만): activeColor, activeTrackColor, inactiveThumbColor, inactiveTrackColor 하나씩 알아보도록 하자. 필수 속성:value value는 불리언 타입의 필수 속성으로, 스위치가 켜져 있는지(true), 꺼져 있는지(false)를 결정한다.밸류에 넣.. 2024. 9. 12. [플러터]Flutter / PopScope를 이용한 뒤로가기 만들기 저번 포스팅에서는 앱이 시작되면 나오는 인트로를 만들어봤다. 이번에는 PopScope를 사용해서 뒤로 가기를 눌렀을 때 다이얼로그가 호출되고 거기서 이제 나갈지 말지 정하는 기능을 구현해볼 것이다.일단 시작하기에 앞서 PopScope 위젯을 먼저 알아보자. PopSocpe 위젯이란?PopScope 위젯은 flutter 에서 뒤로 가기 기능을 구현할 때 사용하는 위젯으로 예전에는 WillPopScope를 사용했지만 이제는 공식문서에서도 PopScope를 사용하라고 권고하고 있다.ㅡ 암튼 간에 이 PopScope 위젯은 하위 속성으로canPop, onPopInvokedWithResult, onPopInvoked, child 를 가지고 있다. 하나씩 알아보도록 하자. canPopcanPop: false /.. 2024. 9. 11. 이전 1 다음 반응형
