프로그래밍/Flutter54 [Flutter Layout] 6. 플러터 Container, 이미지 넣기 플러터 레이아웃 Container 위젯에 대해 알아보고 있습니다. 컨테이너에 이미지를 넣어보고 프로퍼티와 사용하는 클래스를 알아보도록 하겠습니다. 컨테이너에 이미지 넣기 fit 사용해 이미지 키우거나 늘리기 FlutterLogo Container에 이미지를 포함시켜 보겠습니다. 이미지를 사용한 프로토타입 인터페이스를 만들 때 이미지를 넣는 매우 쉬운 방법은 FlutterLogo 위젯을 사용하는 것입니다. Container의 child 속성에 FlutterLogo를 설정해 주었습니다. 컨테이너의 색상 위에 이미지가 표시된다는 점 이외에 특이한 사항은 없는 것 같습니다. 컨테이너에 이미지 넣기(DecorationImage, NetworkImage) FlutterLogo 위젯을 제거하고 실제 이미지를 추가해 .. 2022. 3. 18. [Flutter Layout] 5. 플러터 Container, gradient(그라디언트) 플러터 Container 위젯에 대해 알아보고 있습니다. 이번 포스트는 컨테이너에 그라디언트를 설정해 보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. LinearGradient 그라디언트 방향 바꾸기 그라디언트 반복 표현 그라디언트 정지점 표현 방사형 그라디언트 Gradient 컨테이너에 색상을 적용할 수 있지만 그라디언트을 적용 할 수도 있습니다. BoxDecoration에 그래디언트 속성을 추가해 보겠습니다. gradient 프로퍼티에 colors속성이 있는 LinearGradient를 설정하였습니다. colors 그라디언트를 구성할 색상 배열입니다. 보라색의 두 가지 음영을 설정해 주었습니다. 결과를 보고 알 수 있는 것은 현재 color 속성에 설정돼있는 orange색이 완전히 무.. 2022. 3. 17. [Flutter Layout] 4. 플러터 Container, margin, decoration Container 위젯에서 배치를 쉽게 할 수 있는 마진을 알아보고, decoration을 사용해서 모양을 바꾸거나 모서리를 둥글게 하는 법에 대해 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. margin, EdgeInsets.all, EdgeInsets.only, EdgeInsets.symmetric BoxDecoration, shape, borderRadius 아래 코드와 화면을 살펴보겠습니다. 사각형 컨테이너가 scaffold의 왼쪽 상단에 위치해 있습니다. 컨테이너를 이동하기 위해선 어떻게 해야 될까요? 가장 쉬운 해결책은 마진 속성을 추가하는 것입니다. margin margin 프로퍼티에 const EdgeInsets.all(15)를 설정하였고 예상대로 사각형이 움직였습니.. 2022. 3. 16. [Flutter Layout] 3. 플러터 Container 위젯, Size 크기 규칙 플러터앱의 화면 레이아웃에 관련해서 연속글을 올리고 있습니다. 이번 시간은 플러터 Container(컨테이너)에 대해 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Container 란 컨테이너 변화 살펴보기 컨테이너(Container) 크기 규칙 Container 란 컨테이너 위젯은 요소의 배치나, 크기 조절, 묘사를 가능하게 해 줍니다. 일반적으로 컨테이너를 사용하여 다른 위젯을 포함하고 일부 스타일링 특성을 컨테이너 자체와 해당 하위 요소에 적용할 수 있습니다. 컨테이너 변화 살펴보기 컨테이너의 변화를 앱화면과 코드와 같이 살펴보겠습니다. 스캐폴드의 body에 Container를 설정해 주었고 아직 컨테이너에는 아무런 하위 속성을 넣어주지 않은 상태입니다. 화면은 아래와 같이 .. 2022. 3. 15. 이전 1 ··· 5 6 7 8 9 10 11 ··· 14 다음
