코징의 개발탐방

이제 배웠던 Expanded를 활용하도록 하겠다. 아래 사진을 보고 어떻게 작동되는지 한 번에 이해가 된다면 Expanded를 잘 이해했다고 보면 되겠다. - Row 영역에서 왼쪽은 3개(CiclrAvatar, SizedBox, Text)로 같이 지정하고 오른쪽 Text는 따로 준 다음 가운데 Expanded를 주었기 때문에 해당하는 영역이 반응형으로 잘 작동되는 것을 확인할 수 있다.

이번 시간에는 Expanded 2번째 시간으로 비율을 조정하는 방법을 배우도록 하겠다. - Expanded의 flex 옵션을 줘서 해당하는 넓이가 Container의 width 와 관계없이 반응형으로 변경 되는 것을 확인 할 수 있다. 왼쪽 widt = 1000, 오른쪽 width = 50 그럼에도 불구하고 flex를 1:1 비율로 맞춰서 화면이 50:50 으로 맞춰진다. - 왼쪽 widt = 1000, 오른쪽 width = 50 그럼에도 불구하고 비율은 1:2로 맞춰진다.

이번 시간에는 반응형 위젯 Expanded를 설명하도록 하겠다. 기본적으로 이미지, 컨테이너 같이 넓이가 지정되어 있는 리소스들은 앱의 화면에 따라 잘릴 수도 있다. 이를 방지하기 위해서 넓이에 따라 알아서 변경해주는 위젯이 있는데 Expanded이다. 아래 해당하는 이미지를 살펴보자. - Container 넓이 250, 높이 250으로 지정해준 컨테이너가 2개가 존재한다. 하지만 아래와 두 개의 합산된 넓이 500은 모바일에 비해 너무 크기 때문에 잘림 현상이 발생된다. - 짤림 현상을 방지하기 위해 Expanded를 사용하였다. - Container 2에 해당하는 위젯이 Expanded를 추가로 감싸주었다. - 이미지를 보게 되면 감싸지 않은 빨간색 컨테이너 기준으로 파란산 컨테이너가 반응형으로 변경..

오늘은 CircleAvatar에 설명하도록 하겠다. - CircleAvatar는 내부 위젯을 둥글게 표현해주는 위젯이다. - 아래의 옵션준에 radius를 높게 주면 해당 영역이 커지는 것을 확인할 수 있으며, 작게 주면 크기가 작아지는 것을 알 수 있습니다. - 추가적인 옵션은 아래와 같으며 필요한 부분은 직접 아래 링크를 참조하기 바란다. - 이미지와 함께 사용하는 경우가 많으니 직접 이미지를 통해서도 테스트 하길바란다. https://api.flutter.dev/flutter/material/CircleAvatar-class.html

외부 앱을 개발하다 보면 디자이너가 글꼴을 지정해주는 경우가 많다. 오늘은 외부 글꼴형식으로 변경하는 부분을 설명하도록 하겠다. 1. 글꼴 다운로드 - https://fonts.google.com/ - 해당하는 경로에서 원하는 폰트를 다운로드 한다. Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 디렉터리 만들기 - flutter_ch_01의 프로젝트 밑에 fonts 디렉터리를 만든 후 해당하는 경로에. tff파일을 넣어준다. 3. pubspec.yaml 파일 접근 (없으면 아래 url을 참조) - 주석의 URL로 접근해보면 fonts를 사용하는 방법이 나와있는데, 해..

이번 시간부터는 내 정보 만들기의 레이아웃을 잡아보도록 하겠다. 상단번호와 알람 만들기 - 기본적으로 배웠던 컨테이너, 컬럼, 로우 위젯으로 생각하였으며, 추가적으로 필요한 위젯은 작성하면서 설명하도록 하겠다. 1. 아이콘 위젯 사용 - 해당하는 부분은 지금까지 설명했던 Container , Padding , Column , Row로 구현하였으며 추가적으로 Icon 위젯을 사용하였다. - 해당하는 url을 보면 머트리얼 아이콘 네임이 적혀있다. - 내부 패키지에 아이콘 이름이 같은 것을 확인하면서 넣으면 된다. https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/ Mat-Icon List : 900+ Angular..

저번 시간에는 기본적인 위젯의 구성중 Container, Column, Row를 배웠으며 이를 토대로 내 정보 앱을 만드면서 추가적인 부분은 설명하도록 하겠다. 일단 완성된 화면은 아래와 같으며, 시작하기전에 도전해보고 막히는 부분은 같이 하면 더 좋을 것 같다.

저번 시간에 컬럼위젯에 대해서 소개하였다. 이번 시간에는 Colunm 뿐만 아니라 Row 위젯에 대해서 배우도록 하겠다. 참조 문헌 https://api.flutter.dev/flutter/widgets/Row-class.html Row class - widgets library - Dart API A widget that displays its children in a horizontal array. To cause a child to expand to fill the available horizontal space, wrap the child in an Expanded widget. The Row widget does not scroll (and in general it is considered an..

저번 시간에 컨테이너에 대해서 소개하였다. 요번 시간에는 컨테이너 다음으로 기본으로 많이 사용되는 Column을 배우도록 하겠다. 참조문헌 https://api.flutter.dev/flutter/widgets/Column-class.html Column class - widgets library - Dart API A widget that displays its children in a vertical array. To cause a child to expand to fill the available vertical space, wrap the child in an Expanded widget. The Column widget does not scroll (and in general it is cons..

참조문헌 https://api.f lutter.dev/flutter/widgets/Container-class.html Container class - widgets library - Dart API A convenience widget that combines common painting, positioning, and sizing widgets. A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorp api.flutter.dev 오늘은 컨테이너에 대해서..