모바일 개발

플러터 3.10이 출시되었으며, 많은 새로운 기능과 개선 사항이 있습니다. 이 포스트에서는 이번 릴리스의 몇 가지 핵심 기능을 살펴보겠습니다. 프레임워크 Material 3 Material 라이브러리가 최신 Material Design 사양과 일치하도록 업데이트되었습니다. 이에는 새로운 구성 요소 및 테마, 업데이트된 시각적 효과 등이 포함됩니다. 개발자는 useMaterial3 테마 플래그를 사용하여 이러한 변경 사항에 대해 선택적으로 수용할 수 있습니다. NavigationBar 및 NavigationDrawer 위젯이 Material 3 디자인과 일치하도록 업데이트되었습니다. SearchBar 및 SearchAnchor 구성 요소는 검색 쿼리에 대한 예측 텍스트를 제공합니다. Material 3에 ..

구글에서 제공하는 오픈소스 프레임워크인 Flutter는 하나의 코드베이스에서 멀티 플랫폼 애플리케이션을 아름답게 네이티브로 컴파일할 수 있습니다. Flutter의 주요 기능 중 하나는 Material Design을 사용하여 아름답고 반응형 사용자 인터페이스를 만드는 능력입니다. Material Design Material Design은 구글 디자이너와 개발자들이 만들고 지원하는 오픈소스 디자인 시스템입니다. 최신 버전인 Material 3은 동적인 색상, 향상된 접근성, 대형 스크린 레이아웃을 위한 기초, 디자인 토큰 등을 통해 개인화 가능하고 표현력 있는 경험을 제공합니다. Material 3은 TextButton.icon, OutlinedButton.icon, ElevatedButton.icon과 같..

이전 글에서는 TextButton, ElevatedButton, OutlinedButton 즉 하나의 버튼 만을 알아봤습니다. 그런데 하나의 버튼이 아닌 여러 개의 버튼이 필요할 때가 있겠죠? 가장 많이 쓰이는것은 ToggleButtons, DropdownButton, PopupMenuButton입니다 각 버튼들이 어떻게 다른지 그리고 어떤 상황에서 쓰이는지 한번 알아볼게요 역시나 글로 설명하는것 보다는 직접 실험을 할 수 있도록 dartpad를 준비했습니다. ToggleButtons class ToggleButtons는 child 버튼들이 row로 표시됩니다. 각 버튼의 state는 isSelected로 결정이 됩니다. 그래서 버튼들의 개수에 맞게 bool 리스트를 넘겨줘야합니다. ToggleButto..

플러터에서 버튼과 관련된 글을 보면 FlatButton, RaisedButton 등을 사용하는 것을 볼 수 있는데, Flutter (1.22)버젼부터는 FlatButton, RaisedButton, OutlineButton이 각각 TextButton, ElevatedButton, OutlinedButton으로 업데이트 됐습니다.. (2.0이 아니라 그전 1.22부터 바뀐 겁니다) 기본적인 사용 방법은 다음과 같습니다 TextButton or OutlinedButton or ElevatedButton( onPressed: () {}, //@required onLongPress: () {}, focusNode:, autofocus: true, clipBehavior: Clip.none, style: Butt..

이전 글에서는 MediaQuery를 이용해서 기기의 화면 크기를 알아보는 법을 배웠습니다 하지만 기기의 전체 화면이 아니라 위젯의 크기를 알고싶을때는 어떻게 해야 할까요? 물론 MediaQuery를 쓰고, 각 위젯의 height, widght를 구해서 빼줘서 어쩠지해서 구할 수는 있지만 이 모든 것을 한방에 쉽게 해결하는 것이 LayoutBuilder 위젯입니다. 구글 공신 문서에서는 Builds a widget tree that can depend on the parent widget's size. 라고 소개하고 있습니다. 말 그대로 위젯의 크기에 따라 build를 하겠다는 뜻입니다. LayoutBuilder의 builder function은 layout타임에 불리게 되고, constraints이 제공..

MediaQuery 위젯을 쓰는 가장 대표적인 이유는 현재 기기의 화면 크기를 구할때 찾기 위해입니다 화면 크기는 MediaQuery.of(context).size 을 통해서 알 수 있습니다. 그리고 MediaQuery.of 을 이용할때는 media query가 변할때마다 widget이 rebuild됩니다 보통 기기가 회전될때 가장 많이 변합니다 (혹은 웹에서는 창 크기를 조절할때) 사실 mediaquery.of 을 하게되면 반환되는 값을 MediaQueryData인데 size 말고도 기기와 관련된 정보를 많이 담고 있습니다 설명을 도와드리기 위해서 예제 코드를 가져왔습니다. MediaQueryData orientation → Orientation 기기의 방향 (landscape 혹은 portrait) ..

이제 플러터를 이용하여 웹까지 지원을 하고 웹에 맞게 최적화까지 끝났으면 배포를 해서 전세계에서 자랑할 차례입니다 무료로 호스팅을 해줄수 있는곳 중 가장 인기 있는 서비스는 크게 두가지입니다. firebase hosting github pages 이 글에서는 firebase를 이용해서 hosting하는 법을 알려드리겠습니다 시작하기 전에 현재 프로젝트가 웹을 지원하도록 설정해주세요! (만약 안되어있으면 여기 참고해주세요) 먼저 Firebase CLI 부터 설치를 합니다 터미널에서 npm install -g firebase-tools 을 실행합니다 더보기 만약 npm도 안깔려있다면 (맥 사용자라면) brew install node 를 실행해서 설치해줍니다 firebase --version 명령어를 통해 제..

플러터가 2.0으로 업데이트가 되면서 본격적으로 웹을 지원하게 되었습니다. 이 글에서는 기존 플러터 프로젝트에 웹을 지원하도록 하는 방법을 배워볼게요 준비 사항은 자신이 진행하고 있던 플러터 프로젝트 (물론 새로운 프로젝트를 만들어서 사용해도 됩니다) 플러터 2.0 버젼 (만약 이전 버젼이면 여기서 업그레이드하는 법을 알 수 있습니다) 먼저 터미널에서 프로젝트 최상위 프로젝트로 이동합니다 명령어 flutter create . 를 쳐줍니다 조금만 기다리면 web 폴더가 생성되었음을 볼 수 있습니다! 이제 ide에서 device를 chrome으로 선택해주고 run을 하면 해줍니다 콘솔 창에 다음과 같이 뜰 것입니다. 처음으로 앱을 만들 때는 시간이 조금 걸립니다 그리고 크롬이 열리면서 프로젝트가 실행된 것을..

먼저 현재 설치되어있는 flutter sdk의 버젼을 확인해봅니다 터미널에 다음 명령어를 칩니다. flutter --version 저의 경우에는 1.22 버젼이었습니다 한국 기준으로 3월4일에 플러터는 2.0 버젼이 출시되었습니다 해당 버젼으로 업그레이드를 하는 방법은 정말 간단합니다 flutter upgrade 을 쳐주시고 조금만 기다리면 설치가 완료되었습니다! 혹시 모르니 flutter --version 을 한 번 더 쳐보면 정상적으로 업데이트가 된 것을 볼 수 있습니다. 플러터 2에는 어떠한 것을 할수있을까요?? 가장 매력적으로 느껴지는 기능은 웹 지원이라고 생각합니다! 기존 프로젝트에 웹 지원을 설정하는 방법은 여기서 볼 수 있습니다

Slider 위젯은 특정한 범위 안에 있는 값을 선택할때 사용합니다. Slider를 이용하면 연속적인값 혹은 불연속적인 값을 선택할수 있습니다. Slider 위젯을 만드는데 필요한 Slider의 프로퍼티와 용어에 대해서 알아볼게요 설명을 도와드리기 위해서 예제 코드를 가져왔습니다. value → double Slider가 현재 선택하고있는 값 label → String Slider를 드래그할때 위에 표시할 라벨 min → double 사용자가 선택할 수 있는 최소값 max → double 사용자가 선택할 수 있는 최대값 onChanged → ValueChanged 사용자가 Slider를 드래그해서 새로운값으로 바뀔때 onChanged가 불리는데 이때 현재값을 double로 넘겨줍니다 onChanged에서..