모바일 개발

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

이제 플러터를 이용하여 웹까지 지원을 하고 웹에 맞게 최적화까지 끝났으면 배포를 해서 전세계에서 자랑할 차례입니다 무료로 호스팅을 해줄수 있는곳 중 가장 인기 있는 서비스는 크게 두가지입니다. 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에는 어떠한 것을 할수있을까요?? 가장 매력적으로 느껴지는 기능은 웹 지원이라고 생각합니다! 기존 프로젝트에 웹 지원을 설정하는 방법은 여기서 볼 수 있습니다

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

지금 만들고 있는 퀴즈 앱이 아직도 버튼을 누르다 보면 에러가 뜹니다 out of boundary 오류인데요. question 의 갯수가 2개인데 3번째 index를 접근을 하려 하기 때문에 에러가 발생하는 겁니다. 그래서 이제 퀴즈를 끝냈을 때의 화면을 만들 겁니다. 자연스럽게 에러도 고칠 수 있겠네요. sacffold의 app bar까지는 공통되는 부분이니 body가 달라져야겠네요. 보여줄 퀴즈가 남았을 때만 퀴즈를 보여주는 걸로 해줄게요. 이때 dart에서 제공하는 삼항 연산자를 쓸게요 조건 ? true일때 : false일때 body: _questionIndex < _questions.length ? Column( children: [ Question(_questions[_questionIndex]..

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..

현재 사용자에게 받는 input에 따라 질문은 바뀌는데, 선택지는 바뀌지 않고 있네요 우선은 질문과 선택지들이 서로 묶음으로 있어야겠네요! 방법은 여러가지가 있을수 있겠는데, 가장 바람직한건 model을 따로 분리하는게 좋습니다 다만 지금은 dart라는 언어를 새로 배우는 입장이다보니 map 데이터 구조를 이용하려합니다 https://api.dart.dev/stable/2.10.4/dart-core/Map-class.html map은 사전입니다. 파이썬에서는 dict라고도 하죠 정말 간단한 데이터를 만들어봤어요 var _questions = [ { "question": "가장 좋아하는 색깔은 무엇인가요?", "answer": [ "빨강", "검정", "초록", ] }, { "question": "가장 좋..

다소 밋밋한 앱을 꾸밀 차례입니다. 본격적으로 스타일링 작업을 시작하겠습니다 여태껏 위젯 안에 위젯을 넣으면서 widget tree를 만들었었지요? body: Column( children: [ Text(questions[questionIndex]), RaisedButton( onPressed: answerQuestion, child: Text("빨강"), ), RaisedButton( onPressed: answerQuestion, child: Text("파랑"), ), RaisedButton( onPressed: answerQuestion, child: Text("검정"), ), ], ), ), 물론 지금은 앱이 크게 복잡하지 않아서 와 닿지 않을 수 있기는 한데, body: Column( child..