Flutter

3\. main은 모든 앱의 시작점, 아주 중요!!

https://m2.material.io/design/color/the-color-system.html세줄요약 - 1.위젯의 기능은 구글에 검색하면 문서로 진짜 다 나온다. 쓸때 자주 들여다보기! 2.위젯의 위치가 중요하다! 위에서 appbar 안에 넣어준

이번에는 폴더에 있는 이미지를 불러오는 방법을 배워보려한다. 우선 현재 내가 작업하고 있는 프로젝트의 폴더인 flutter_practice에 images 라는 폴더를 새로 생성해준다. 이 폴더 안에는 앱을 작업할때 사용하는 모든 이미지가 들어간다! 그 후 강의에

여기서 Assets.xcassets 폴더가 겹치는 것을 볼 수 있는데 Runner 안에 들어있는 폴더를 지우고 Appicons 안에 들어있는 Assets.xcassets 폴더를 Runner로 옮겨주면 된다.

get from version control 누르고 복사한 깃허브 주소를 넣어준 다음, main.dart에서 get dependencies를 눌러주면 세팅이 끝난다.

1\. hot reload를 사용하면 변경사항을 빠르게 볼 수 있다. 2. hot reload가 돌아가는 원리를 좀 더 이해해야할듯..? 3. hot restart는 앱의 상태를 초기화시켜준다.

1\. 컨테이너는 자식 요소의 크기만큼 부피를 가진다. 2. safe area를 사용하면 탑 바와 겹치지 않는다. 3. margin은 컨테이너 밖, padding은 컨테이너 안을 조절한다.

1\. Column: 세로 정렬 Row: 가로 정렬 2. 여러가지 효과를 줄 수 있다, 필요시 구글링 필수! 3. 웹이랑 느낌이 비슷하다, 빨리 적응되면 좋겠다..

.....맘같아서는 빨리 앱 레이아웃 척척 잘 짜고싶지만.. 기초가 튼튼해야겠지 🥹 그래도 생각보다 금방 배울 것 같아서 열심히 해보려고 한다! (사실 학교 수업 들을때도 몰래 flutter 강의 들음)

1\. 동그란 프로필 사진을 만들기 위해 circleavatar를 써줄 수 있다. 2. 모르는건 구글한테 물어봐라. 다 알려준다! 3. 웹이랑 비슷하게 글씨의 두께, 색, 크기 등 text style을 입맛대로 바꿔줄 수 있다.

1\. 폰트를 바꾸고 싶다면 google font에서 다운로드 받아 쓰자. 2. fonts 디렉토리를 새로 만들어주고 다운로드 받은 zip 파일을 거기 넣어준다. 3. yaml 파일에 들어가서 폰트를 적용시킬 수 있게 잘 써줘야한다.

1\. flutter 짱.. 이렇게 아이콘까지 여러개 편하게 만들어놓은 프레임워크는 처음이야 2. 모르면 무조건 구글링, flutter 문서 참고하자, 다 나와있음 3. padding은 안쪽, margin은 바깥쪽

1\. card에는 패딩이 들어가지 않고, 디폴트 색이 흰색이다! 2. 구글은 신이다, flutter 만큼 구글링으로 쉽게 나오는게 없는듯함 3. sizedbox가 그냥 빈 공간을 주는 기능만 갖고있는게 아니라 여러 기능을 해주는 재간둥이다!

현재는 앱 바만 존재하고 나머지는 dart 언어를 배우면서 만들텐데 내가 이런 언어는 젬병이라 조금 걱정이다.. 그래도 열심히 배우면 나중에는 뚝딱뚝딱 만들겠지 ^^

1\. expanded 클래스에 익숙해지자, 본격적으로 레이아웃 짤 때 엄청 많이 쓸 듯? 2. flex를 사용하면 비율을 조정해줄 수 있다. 웹이랑은 또 다르네 🤔 3. 문서를 잘보면 자다가도 떡이 생긴다. 코드를 편하게 치고싶으면 막힐 때 문서 많이 찾아보자.

1\. Flutter outline을 사용하면 편하게 위젯을 추가할 수 있다. 2. Flutter는 코드를 진짜 편하게 짜게 해준다. 3. 속성 어디에 줘야하는지에 익숙해지기!

1\. flutter 문서는 flutter에 관한 모든걸 안다, 모를때 찾아보기 2. 버튼을 쓰면 onPressed는 필수 속성! 3. onPressed 안에 코드 쓰면 끝낼때 ; 붙이는거 있지 않기, 프로그래밍 언어는 다 비슷하다 \~~

이렇게 변수를 만들어준 뒤, 밑에서 $ 표시를 이용해 변수를 넣어주면 된다! 이건 다른 프로그래밍 언어랑도 비슷하고, 강의 내용도 너무 짧아서 세줄요약 할 필요가 없을 것 같다 ^^

지금 내 앱을 보면 이미지를 감싸고 있는 text button이 두개 있다. 이제 해야할 것은 버튼을 클릭했을때 실제로 이미지가 바뀌도록 하는 것이다. 일단 변수가 build 안에 들어가있으면 코드가 완성된 후 hot reload를 할때마다 숫자가 랜덤으로 나오기 때문에 변수를 바깥으로 빼준 뒤, build 안에서 다시 정의해줬다. 변수를 보면 처음에...

1\. flutter 공식 문서는 신이다. 2. 막힐땐 구글링 ! 3. 코드 짤때 꼼꼼하게 하기..

고민했던것보다... 되게 쉽게 해결할 수 있는 과제였다. 양 주사위의 onpressed에 각 주사위의 랜덤 숫자 생성 변수를 넣어주면 되는거였다! 그러면 한 쪽의 주사위를 클릭할 때마다 양쪽 모두 난수가 생성된다.

함수 호출은 easy ~ 구구절절 길게 쓸 필요 없이 이렇게 함수 호출만 해주면 똑같이 돌아간다!

사실 flutter를 조금 오랜만에 해서 감이 안잡히는 부분도 많았는데, ChatGpt도 잘 사용하고 구글링도 해가면서 과제를 했던 것 같다. 맘같아서는 뚝딱뚝딱 하고싶지만 계속 하다보면 그렇게 될 날이 오겠지...

여기는 사운드 파일도 포함했는데, 사운드 파일도 이미지나 폰트같이 폴더를 만들어주고 거기에 내용을 넣어준 다음 yaml 파일에서 수정을 하면 된다.

https://pub.dev전에 파이썬이나 웹을 배울때 배웠던거라 알고 있지만, 패키지는 잘 사용하면 진짜 편하다. 진짜 웬만한 패키지는 거의 다 만들어져있어서 필요한걸 잘 찾아서 잘 쓰면 된다!

이렇게 Textbutton으로 Text를 감싸준 뒤, onPressed 안에 audio player 패키지를 사용하기 위한 AudioCache를 불러와주고 .play를 사용해서 원하는 파일의 소리를 재생해줬다!

이번 시간에는 시작부터 챌린지가 나왔다. 저번 시간에 만들어준 소리가 나는 버튼을 각각 색깔과 소리가 다르게 7개를 만들어주는 챌린지였다. 일단 이렇게 만들어줬는데, 중복되는 코드가 너무 많아서 함수로 만들려고 한다. 함수를 생성했지만, 내가 만들려는 앱은 각 버튼마다 모두 소리가 달라야하는데 현

현재 내 앱은 이렇게 생겼는데 앱의 UI를 화면에 꽉 차게 만들어보는게 도전과제로 나왔다. 일단 column의 crossaxisalignment를 stretch로 해줘서 가로 길이를 꽉 채우고, 다음 container를 expanded로 감싸줘서 세로 길이를 늘렸다! 근데 코드를 보면 반복된 코드가 너

프로젝트를 강의에서 제공해준 github에서 가져왔는데, 옛날 강의라 Flatbutton으로 돼있어서 Textbutton으로 고치고 색도 바꿔주고 border-radius도 줬다! 다음 강의에 계속 ...

일단 가장 먼저 만들 기능은, 사용자가 몇개의 문제를 맞고 몇개의 문제를 틀렸는지 점수를 기록하는 기능이다. 일단 이 기능은 가장 밑에 들어가야되니까 위의 위젯들을 잠시 모두 접어주고, 그 밑에 수평으로 몇개를 맞고 틀렸는지 나열해야하니까 Row를 넣어줬다. 그리고 그 안에 children으로 widget을 넣어준 뒤 Icon으로 체크 표시를 넣어줬다...

이번에는 bool 리스트를 만들어서 질문의 정답을 입력해주려한다. bool 데이터 타입을 가진 answers라는 List를 만들어준 뒤, 질문에 맞는 답들을 순서대로 입력해줬다. 그리고 onPressed 안에 correctAnswer이라는 bool 타입을 만들어준 뒤 이 bool이 answers리스트의

마지막으로 정답여부를 알려주는 부분도 수정했는데, 여기서는 bool 타입인 correctAnswer 이라는 변수에 들어가있으니까 마찬가지로 bool 타입을 가지고 있는 questionAnswer을 입력해서 해결해줬다.

이런식으로 객체화를 해서 코드를 짜니까 확실히 변경사항이 있어도 쉽게 바꿀 수 있고 편하게 관리가 되는 것 같다. 대신 너무 어려울뿐..

또 문제가 마지막 문제까지 가면 더이상 넘어가지 않도록 만들어주는 변수도 만들어줬는데, if문을 써서 만약 questionNumber(현재 0)가 questionBank(질문의 개수 = 8) 의 길이에서 1을 뺀 수 (7) 보다 작다면 questionNumber(1)을

그럴때는 extends를 써주면 간편하게 원래 존재하던 class를 상속받아 사용할 수 있다. 좌석 개수도 똑같은 것을 볼 수 있고, drive 변수를 불러왔을때도 그냥 class Car과 똑같이 뜨는 것을 볼 수 있다.

마지막으로 scorekeeper에 아이콘을 add해줘 버튼을 누를 때마다 아이콘이 뜨게 설정해줬다.