모바일 개발

플러터에서 버튼과 관련된 글을 보면 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) ..

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

TextField는 사용자가 키보드를 이용하여 텍스트를 입력할 수 있도록 합니다. TextField를 이용할 때 자주 접하게 될 프로포티를 주로 알아보겠습니다 설명을 도와드리기 위해서 예제 코드를 가져왔습니다. controller → TextEditingController TextField에 포함된 텍스트를 이용하고 싶을 때는 controller를 이용하시면 됩니다. controller를 이용하면 텍스트의 기본값도 설정할 수 있습니다 사실 controller를 가장 많이 사용하는 것은 입력받은 text를 관찰(observer)하고 싶을 때입니다. 예를 들어 회원가입 화면에서 비밀번호를 6글자 이상만 가능하도록 설정할 때 controller의 text를 이용하면 편합니다. void _validatePass..

Row 혹은 Column 일 이용하다보면 사용하게될 Flexible 위젯과 Expanded 위젯에대해서 알아보겠습니다. 플레이그라운드 용으로 sacfold의 body에 다음과 같은 코드를 넣었습니다. Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Container( height: 100, child: Text('Item 1 - pretty big!'), color: Colors.red, ), Container( height: 100, child: Text('Item 2'), color: Colors.blue, ), Container( height: 100, child: Text('Item 3'), color: Colors.orang..