코징의 개발탐방

우리는 이제 List의 사용법을 익혔고, 이를 바탕으로 랜덤으로 이미지가 출력되는 것 까지 구현해야 된다. 이를 만들기 위해 Library를 사용할 것이며, 어떻게 사용하는지 익히도록 하자. 위 소스코드를 보면 impot 'dart:math'라는 문구를 볼 수 있을 것이다. 이는 math 클래스를 가져와 사용할 것이며 math 클래스 안의 함수들을 사용할 수 있게 해 준다. 해당하는 클래스 안에 어떤 동작들이 있는지를 보려면 해당하는 문서를 참조하면 된다. https://api.dart.dev/stable/2.10.4/dart-math/Random-class.html Random class - dart:math library - Dart API A generator of random bool, int, ..

이번 시간은 Dart 언어의 List에 설명하도록 하겠다. List는 말 그대로 목록이라고 생각하면 되겠다. 예를 들면 쇼핑몰에서 원하는 상품을 장바구니에 담을 때 넣어두면 어떻게 나열이 되는가? 아마도 일련의 순서대로 넣어진다고 생각된다. 리스트는 이와 마찬가지로 원하는 것을 순차적으로 넣을 때 사용되며, 필요할 때 index 번호를 가져와 사용할 수 있다. 아래 예시를 봐보자. - 컴퓨터는 첫 시작이 0부터 시작한다는 것을 유의해야 된다. - 위와 같이 List 으로 작성하게 되면 List는 String만을 넣을 수 있게 된다. - 이후 해당하는 변수 안에 shoes, dress, cap, coat를 넣는데 순차적으로 들어가게 된다. 위와 같이 리스트에는 많은 기능들이 포함되어있다. 예를 들면 ind..

이번 시간에는 앱의 화면이 변동사항이 발생될 때 사용되는 statefulWidget에 대해 설명하도록 하겠다. 우리는 chapter-02 까지 화면이 변하지 않은 앱을 만들었다. 하지만 그림 맞추기 앱은 화면이 지속적으로 변경되어야 되기 때문에 statefulwidget을 사용하도록 할 것이다. 사용방법에 대해서 설명하도록 하겠다. 1) StatelessWidget을 StatefulWidget으로 변경한다. 2) 변수 선언한 부분을 StatefulWidget로 옮겨준다. 3) onPressed 함수 안에 setState를 넣어준다. 위의 동영상 내용을 보면 StatelessWidget -> statefulWidget으로 변경시키는 과정들이 보일 것이다. 해당하는 부분을 수정하고 새로고침을 누르면 변수에 ..

이제 변수를 사용하는 방법에 대해서 이야기하도록 하겠다. 이전 챕터에서 변수는 정리 상자이고 해당하는 상자의 내용물을 사용할 때 우리는 정리 상자를 찾아서 사용한다고 이야기하였다. 이 정리상자를 컴퓨터에서는 메모리라고 이야기하고 내용물(아이콘들)은 데이터라고 한다. 그렇다면 Flutter에서는 어떻게 사용할까? 변수 설정은 build 아래 혹은 class 밑에 지정할 수 있다. 두 개의 차이점은 build는 핫 리로드를 하면 build 밑 영역에 자원을 새로 할당하게 되는데, 이렇게 될 시 변수값이 변경이 되지 않는다. 이 부분은 동영상을 참고해보도록 한다. - 변수 초기값 할당 위 내용처럼 이미지 리소스 경로의 파일 이름을 변수로 $firstIcon으로 불러오고, 해당하는 내용을 호출하는 것을 볼 수 ..

이번 시간에는 변수를 사용하면 좋은 점을 말하도록 하겠다. 현재 우리의 앱은 버튼을 클릭해도 아무 동작도 하지 않는 상태이다. 하지만 코드상에서 이미지 리소스 경로를 변경해주고 핫 리로드를 하게 되면 이미지가 변경되는 것을 볼 수 있다. 이렇게 하게 될 시 버튼을 클릭할 때 이미지 리소스 부분을 수정할 수가 없다. 이를 해결하기 위해서 변수라는 것을 사용한다. 변수는 쉽게 설명해 정리 상자라고 생각하면 되겠다. 예를 들면 첫 번째 첫 번째 상자에는 facebookIcon이 들어있다고 가정하면, 우리는 첫 번째 상자만 찾으면 그 안에 facebookIcon을 사용하면 된다. 그리고 첫 번째 상자의 내용물을 변경하고 싶으면 내용물을 빼고 새로운 아이콘을 넣으면 된다. 이렇게 되면 첫 번째 상자 아이콘은 페이..

함수 하나의 기능을 수행하는 일련의 코드 예를 들어 강아지 로봇이 장난감을 가져온다고 생각해보자. 장난감을 가져오기 위해서 오른쪽 4칸, 위로 5칸, 오른쪽 2칸, 위로 1칸을 움직여야 장난감을 물고 다시 아래 1칸, 왼쪽 2칸, 아래 5칸, 왼쪽 4칸으로 올 수 있다. 한번 물고 오는 거라면 작성할 수 있겠지만, 지속적으로 장난감을 향해 움직인다면, 이는 엄청 번거로울 것이다. 이를 해결하기 위해 함수가 사용된다. 이제 우리는 getDogToy를 실행시켜 장난감을 가져오게 될 수 있다. 이름 없는 함수 이름 없는 함수는 명시적으로 우리가 만들필요가 없이 컴퓨터에게 작동하도록 지시할 수 있는 함수이다. 이부분은 CallBack 이라는 함수를 사용하는데, 차후에 좀 더 깊게 설명하도록 하겠다. 현재는 해당..

ElevatedButton에 대해 설명하도록 하겠다. ElevatedButton은 버튼을 스타일링 할 수 있는 위젯이다. onPressed: 버튼 클릭 시 실행되는 함수 child : 자식 위젯을 통해서 버튼 안의 영역을 변경 할 수 있다. 다음 시간에는 버튼 클릭시 실행되는 함수를 설명하도록 하겠다.

그림 맞추기 앱을 만들어보도록 하겠다. 완성 화면은 아래와 같으며, 새로고침을 누를 시 아이콘 변경되는 것을 확인할 수 있다.

현재까지 배운 내용으로 이제 내 정보 만들기가 이해가 될 것으로 생각한다. 출력되는 이미지와 코드를 통해서 어떻게 작동했는지 확인해보고, 수정 혹은 모르는 부분은 댓글로 달아주길 바랍니다. import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; void main() { runApp(const MyBusinessCard()); } class MyBusinessCard extends StatelessWidget { const MyBusinessCard({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialAp..

BoxDecoration에 대해 설명하도록 하겠다. 컨테이너에서 decoration은 부수적으로 컨테이너의 모양과 색상을 변경해줄 수 있는 옵션으로 해당하는 것들을 변경할 수 있다. border : 테두리(아웃라인) 두께 지정 borderRadius : 테두리(아웃라인) 모서리를 둥글게 해 준다. boxShadow : 명암 gradient : 컨테이너 안의 색상 비율 backgroudBlendMode : 백그라운드 이미지를 연하게 만들기 shape : 컨테이너를 둥글게 만들 수 있다. https://api.flutter.dev/flutter/painting/BoxDecoration-class.html BoxDecoration class - painting library - Dart API An immut..