본문 바로가기

개발/Flutter

[스파르타 코딩클럽] 플러터 강의 2주차

2주차는 레이아웃을 활용하는 방법을 주로 배웠다.

Row와 Column을 적절하게 사용해서 이미지와 텍스트를 적절하게 배치하여

시인성과 가독성이 좋은 UI를 만드는 것이 핵심이었다.

https://flutter-ko.dev/docs/development/ui/layout/tutorial
https://flutter-ko.dev/docs/development/ui/layout/tutorial

위 그림과 같이 Row와 Column안에 또 다른 Row와 Column을 넣어주고 거기에 아이콘과 텍스트를 적절하게 배치하면서

Padding과 Margin 등을 적용하고 ListView, GridView 등을 사용하면 더 편리한 UI를 만들 수 있다.

 

내가 만든 2주차 과제 Shazam 클론 코딩

https://dartpad.dev/?id=23221bab123f4bc761c0f46270c18f3d 

 

DartPad

 

dartpad.dev

가장 어려웠던건 차트의 버튼을 누르게 만들고 하나가 눌리면 다른 하나는 풀리게 만들고

그에 따라서 차트가 바뀌도록 하는 점이 가장 어려웠다.

지금은 선택지가 2개여서 if문으로 해결했지만 선택지가 3개 이상된다면 어떻게 해결해야할지 모르겠다.

 

반응형