목록플러터 (4)
개발부터 자유까지
[Flutter] UI 그리기 연습(5) - 반복되는 카드를 하나의 위젯으로
- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 코드 설명 (코드 작성 순서로) 카드를 새로운 클래스(CurrencyCard)로 만들어 widgets 아래로 새로운 파일로 만든다. 화폐이름(name), 총액(amount), 코드(code), 아이콘(icon), 반전유무(isInverted)를 final 형태로 지정한다. 변할 수 있는 값들이기 때문에 클래스 생성자를 호출하면서 값들을 각자 호출한다. 반전유무를 통해 검은색/흰색 으로 배경색이나 글자색을 지정하기 위해 final로 _blackColor..
[Flutter] UI 그리기 연습(3) - 반복되는 버튼을 하나의 위젯으로
- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 코드 설명 (코드 작성 순서로) 이전 포스팅에서 Container 위젯으로 버튼을 만들었는데, Container 위젯을 반복하지말고, Button 클래스를 만들어서 위젯으로 사용할 예정입니다. Button.dart 파일에 Button 클래스를 생성합니다. Button 클래스는 StatelessWidget 위젯을 상속받는 형태입니다. 버튼이 두개이기 때문에 main.dart에서 Button 클래스의 생성자를 호출할때마다 글자, 배경색, 글자색을 다르게 ..
[Flutter] UI 그리기 연습(2) - 버튼 그리기
- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 코드 설명 (코드 작성 순서로) "Total Balance" 스트링을 넣기전에 Row 밑에 SizedBox로 적당한 간격을 만들어준다. "Total Balance" 와 "$ 5 194 832"를 Text 위젯으로 생성해준다. 두 스트링 사이에 적당한 간격을 위해 SizedBox를 넣어주고, 아래 Transfer 버튼과의 간격을 위해 SizedBox를 다시 넣어준다. 버튼이 두개가 들어가기 때문에 Row 위젯을 먼저 선언하고, Row의 children ..
[Flutter] UI 그리기 연습(1)
- UI 그리기 연습 시리즈는 아래 링크의 홈화면을 그려보는 포스팅입니다. https://dribbble.com/shots/19858341-Finnancial-Mobile-IOS-App Financial Mobile IOS App dribbble.com - 최종 완성본 모습 - 코드 설명 (코드 작성 순서로) Scaffold 클래스 안에 appbar 속성은 존재하지 않으므로 사용할 필요가 없고 body와 backgroundColor를 사용합니다. body속성은 Widget으로 이루어져 있기 때문에 위젯들을 담기위해 Column(1번)으로 위젯을 생성합니다. (Row로 body 컨테이너를 만들 수 있을 듯) Column(1번) 위젯은 children 속성을 필수로 사용해야 하는데, children 속성은 ..