모바일 개발

지금 만들고 있는 퀴즈 앱이 아직도 버튼을 누르다 보면 에러가 뜹니다 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..

다소 밋밋한 앱을 꾸밀 차례입니다. 본격적으로 스타일링 작업을 시작하겠습니다 여태껏 위젯 안에 위젯을 넣으면서 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..