모바일 개발

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 build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Column( children: [ MyListView(), ], ), ); } 그리고 class MyListView extends StatelessWidget { @override Widget build(BuildContext context) { return ListView.builder( itemBuilder: (context, index) { return Text("Row $index"); }, itemCount: 10, ); } } 실행을 해보면 화면에 아무것도 안뜨고 에러가 하나 뜨는데, Viewports e..

State 우선 state란 무엇일까요? 공식 문서에서는 State is information that (1) can be read synchronously when the widget is built and (2) might change during the lifetime of the widget 라고 하네요 정말 간단하게 상태라고 할 수 있을 것 같아요. 지금 현상태는 색깔이 빨강이야 혹은, 지금 현상태는 isDone이 True야 같은 예가 있겠네요 flutter의 위젯은 이러한 state와 관련된 위젯이 두 개 있습니다. StatelessWidget 과 StatefulWidget 출처: https://www.udemy.com/course/learn-flutter-dart-to-build-ios-an..

이제 조금 더 이쁘게 앱을 꾸며볼게요 먼저 scafold를 넣어줄게요 구글 공식 문서를 살펴보면... basic material design visual layout structure. This class provides APIs for showing drawers, snack bars, and bottom sheets. 흔히 생각하는 앱의 틀같은거라고 생각하면 될 거 같아요 저는 app bar와 body parameter만 구현해줄 건데요 AppBar의 title에 string을 넣으려 했는데.. widget을 넣으라는군요 그리고 기본적으로 text를 넣으라니까 저도 text를 넣었습니다. return MaterialApp( home: Scaffold( appBar: AppBar( title: Text..

첫 번째로는 가장 많이 이용하게 될 flutter inspector를 한번 알아보겠습니다 예시로 사용할 앱은 역시나 기본 프로젝트인 counter 앱인데요 살짝만 다듬었습니다. 기존의 텍스트를 길게 만들어주고, row로 감싸주고, 왼쪽에는 아이콘을 하나 넣어줬어요 딱히 의미가 있는건 아니고 디버깅을 할 때 더 많은 예시를 보여주기 위해서 UI 요소를 더 넣어봤어요 Row( children: [ Icon( Icons.play_arrow, size: 50, ), Text( '만약에 길어지면 어떻게 해야할까? 글씨가 짤리지는 않을까???! 약간 걱정되네요', ), ], ), 자! 그러면 devtools를 열어줘야하는데 먼저 디버깅 모드로 앱을 실행할게요 (저는 VS Code를 쓰는데, 안드로이드 스튜디오도 거..

플러터가 컴퓨터에 설치되어있다고 가정을 하고 진행을 하겠습니다 설치가 아직 안되셨다면 https://flutter-ko.dev/docs/get-started/install 을 참고해주세요 개발환경은 VS Code에서 진행되는데 Android Studio랑 크게 차이점은 없습니다 먼저 프로젝트를 생성할게요 vs code : command palette (cmd + shift + p)를 호출하고 flutter를 입력하시면 프로젝트 명은 원하시는것으로 정해주면 되는데 저는 quiz_app으로 정했습니다 조그만 기다리시면... 이렇게 폴더와 파일이 만들어졌으면 프로젝트 생성이 끝난겁니다. 이제 디버깅 모드로 실행 해볼게요! (재생버튼에 작은 벌레가 달려있는 버튼을 눌러주세요) 여기서 약간 해매시는 분들을 플러터..