Box World

배민이든, 넷플릭스 등 우리가 쓰고 있는 99%의 앱은 처음 실행하면 바로 메인 페이지가 나오지 않고, 위처럼 로고가 떠있는 화면을 지나서 들어가게 됩니다. 이러한 화면이 필요한 이유는 단순히 로고 자랑을 하려고 보여준다기보다는, 여기에 머무는 동안 자동 로그인을 통해 데이터를 가져오거나, 보안과 관련되어 검사를 진행하는데 약간의 시간이 필요하기 때문입니다. 혹은 경우에 따라서 서비스 점검을 위해 이 화면에서 더 이상 접근을 못하게 막는다던가 간단해 보이지만 상당히 의미있는 화면이라고 할 수 있습니다. 이러한 화면을 Splash Screen이라고 합니다. 이번 포스팅에서는 이러한 SplashScreen을 구현하는 방법에 대해 알아보겠습니다. 화면 준비하기 우선 SplashScreen이 될 화면을 준비해줍..

대부분 스타트업에서 만든 플랫폼 서비스 앱의 첫 메인페이지를 들어가게 되면 보통 우리는 위 사진처럼 상단에 프로모션 광고가 보이는 대형 PageView를 보게됩니다. 그리고 일정 시간마다 이들은 돌아가면서 다른 광고들을 순차적으로 보여줍니다. 이번 포스팅에서는 Flutter에서 PageView에서 일정 시간마다 자동으로 스크롤되는 기능을 구현해보겠습니다! PageView 준비하기 당연하겠지만 우선 PageView가 있어야겠죠? 여기에 대한 코드를 준비해줍니다. PageView.builder( pageSnapping: true, controller: _PageController, itemCount: itemList.length, onPageChanged: (value) { }, itemBuilder: (c..

TextField 내 'textAlign: TextAlign.center'를 삽입해주면 쉽게 해결된다. Container( width: screenWidth*(300/360), child: TextField( controller: textfieldController_OpenChatLink, textInputAction: TextInputAction.done, // textAlign: TextAlign.center, decoration: InputDecoration( hintText: 'https://open.kakao.com/12345679', hintStyle: TextStyle( fontSize: screenWidth*(16/360), color: hexToColor('#D2D2D2'), fontWe..

이번 포스팅에서는 Flutter에서 Google map을 사용할 때 현재 자신의 위치로 camera position을 이동시키는 버튼을 구현해보겠습니다. 사실 다음과 같이 myLocationButtonEnabled: true로 주셔도 버튼이 생성되는데, 이 경우에 버튼이 오른쪽 상단에 생기는데 위치를 변경하지 못하는 문제점이 발생합니다. GoogleMap( mapType: _googleMapType, initialCameraPosition: _initialCameraPostion, onMapCreated: (GoogleMapController controller) async { // }, myLocationEnabled: true, ########################################..

위와 같은 디자인을 구현하기 위해서는 TextField를 이용하는데, 돋보기를 사이즈에 맞게 넣으려는데 애를 먹었다. 다음과 같이 prefixIcon에 Svg나 Png를 넣어주면 TextField 앞에 아이콘이 자리잡게 된다. Container( height: screenHeight*0.05, width: screenWidth*0.836111, child: TextField( textAlign: TextAlign.left, controller: textfieldControllerSearchLocation, decoration: InputDecoration( hintText: '지역별 검색', hintStyle: TextStyle( fontSize: screenWidth*(12/360), color: he..

안녕하세요 이번 포스팅에서는 Flutter의 ExpansionTile로 우리가 평소 여러 앱에서 보던 정보 숨기기 / 드러내기 기능을 구현해보도록 하겠습니다. ExpansionTile 우선 코드부터 보시겠습니다. ExpansionTile( title: new Text('기본 정보', style: TextStyle( fontWeight: FontWeight.bold, fontSize: screenWidth*(16 /360), color: Colors.black ), ), initiallyExpanded: true, backgroundColor: Colors.white, children: [ Divider(height: 3,color: OptionDivideLineColor,), Container( heig..

이번 포스팅에서는 File 형식의 Image를 화면에 렌더링하는 코드를 소개해드리겠습니다. File f;//File 선언 Container( width: 100, height: 100, decoration: BoxDecoration( image: DecorationImage( image: FileImage(f),//File Image를 삽입 fit: BoxFit.cover)), ) 방금과 같이 File을 핸들링하면 위와 같이 정상적으로 화면에 이미지가 비춰지는 것을 보실 수 있습니다.

이번 포스팅에서는 Flutter에서 갤러리 혹은 카메라에서 사진을 'File'형식으로 가져오는 코드를 소개해드리겠습니다. 1) 갤러리에서 가져오기 PickedFile f = await ImagePicker().getImage(source: ImageSource.gallery);//갤러리에서 사진을 가져옵니다. File dummyFile = File(f.path);//가져온 사진의 Type을 File 형식으로 바꿔줍니다. 2) 카메라에서 가져오기 PickedFile f = await ImagePicker().getImage(source: ImageSource.camera);//갤러리에서 사진을 가져옵니다. File dummyFile = File(f.path);//가져온 사진의 Type을 File 형식으로 ..

성공하려면 귀는 열고, 입은 닫아라 - 존 데이비슨 록펠러 - 안녕하세요 매번 머신러닝 관련 포스팅만 올렸지만, 이번에는 6개월 전 처음 입문하게 된 앱개발에서 제가 왜 Flutter를 선택하게 되었는지 그리고 왜 Flutter여야 했는지 입문자의 관점에서 풀어보고자 합니다. 1) Flutter는 크로스 플랫폼! 크로스 플랫폼이란 하나의 코드로 안드로이드와 ios 개발이 동시에 가능한 프레임워크를 부르는 명칭입니다. 우리에게 알려진 크로스 플랫폼으로는 React Native와 Flutter이 있습니다. 특히 크로스 플랫폼은 안드로이드와 ios개발에 투자되는 시간과 Cost를 반으로 줄일 수 있다는 점에서 많은 사람들에게 굉장히 매력적일 수 밖에 없습니다. 6개월 전 스타트업을 시작하게된 저도 최소한의 인..