전체

[Flutter] 선택된 위젯을 관리하는 Focusnode

- textfield를 선택했을 때, 다른 위젯이 변하거나 생성되게 하는 경우 - textfield에 데이터를 입력 후 키보드의 next, done 버튼을 터치했을 때 다음 textfield로 자동으로 넘어가게 할 경우 주로 textfield에서 사용되며 말 그대로 focus가 어디에 있는지를 관리한다. controller와 마찬가지로 textfield 하나 당 하나의 focusnode를 할당해주면 된다. textfield가 선택되면 해당 focusnode는 포커스를 획득하는 단순한 구조이다. textfield에 focusnode 할당 FocusNode _focusNode = FocusNode(); .. TextField( focusNode: _focusNode, .. focusnode를 제거하여 아무것..

[플러터] Inkwell의 이펙트 제거

Inkwell은 터치, 드래그 등의 제스처가 가능한 영역을 지정해주는 위젯이다. Container와 같은 타 위젯을 감싸 제스처를 받을 수 있도록 해준다. InkWell( highlightColor: Colors.transparent, //모서리로 퍼져나가는 이펙트 splashColor: Colors.transparent, //클릭시 원형 이펙트 onTap: () { }, child: Padding( ... * Inwell은 터치시 터치 지점을 기준으로 원형이펙트, 위젯 전체 이펙트 총 2개의 이펙트가 발생한다. 이를 Colors.transparent로 제거할 수 있다.

[Flutter] 플러터 Web 개발하는 법

21/11/27 수정된 글입니다. 플러터는 모바일 애플리케이션과 웹을 동시에 제작할 수 있게 고안된 프레임워크이다. 그리고 최근 2.0에서 리눅스, 맥, 윈도우와 같은 응용프로그램들도 개발 할 수 있게 업데이트 되었다. Flutter Gallery gallery.flutter.dev 플러터로 만들어진 샘플 웹 사이트이다. 나름대로 웹 사이트의 구색을 갖추고 있지만, 웹 사이트 크기를 늘리고 줄여보면 여지없이 성능이 떨어지는게 느껴진다. 필자는 최근 React를 경험하며 간단한 프로덕트들을 개발했고, 결론적으로 플러터 웹은 갈길이 상당히 멀다는걸 느꼈다. 아래는 React와 플러터 웹을 경험하며 느낀점을 간단하게 QA로 정리한 글이다. [플러터] 플러터 웹에 대한 Q&A 모음 Flutter web에 관한 ..

[Flutter] 모서리를 둥글게 / 테두리 넣기

위젯의 모서리를 둥글게하고 테두리를 넣기 위해선 위젯의 속성에 decoration이나 shape가 있어야한다. 해당 속성에서 아래의 방법으로 위젯을 둥글게, 테두리를 디자인 할 수 있다. 아래의 두 가지 유형을 기억하면 대부분의 위젯을 처리할 수 있다. Decoration 속성을 가진 위젯 Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(50), //모서리를 둥글게 border: Border.all(color: Colors.black12, width: 3)), //테두리 Shape 속성을 가진 위젯 ButtonTheme( shape: RoundedRectangleBorder( borderRadius: BorderRadiu..

[Flutter] Appbar에서 알아야할 속성

appBar: AppBar( title: Text('My Quiz ffApp'), //출력되는 문구 backgroundColor: Colors.deepPurple, leading: Container(), //Appbar의 뒤로가기 버튼을 지우기 위함 ), * leading에 Container을 주면 Appbar의 뒤로가기 버튼을 제거할 수 있다.