플러터34 [Flutter Layout] 7. Row, Column 위젯 정렬하기, 위젯 축 Row와 Column의 레이아웃에 대해 알아보고 위젯들을 정렬하는 법을 알아보도록 하겠습니다. 이번 포스트는 다음 내용을 다루고 있습니다. Row, Column 위젯 레이아웃 배치 플러터 위젯 축 메인축, 교차축(MainAxisAlignment, CrossAxisAlignment) 속성 변경 Row, Column 위젯 레이아웃 이름에서 알 수 있듯 Row 레이아웃은 가로로 배치된 위젯의 목록이 되고, Column은 세로로 배치된 자식 위젯의 목록입니다. Row와 Column은 아마도 플러터 앱에서 사용하는 가장 간단한 레이아웃 위젯일 겁니다. Row와 Column은 동일한 속성을 갖습니다. 따라서 기본적으로 Row에서 설정한 모든 속성 설정은 Column의 속성 설정에서 사용할 수 있습니다. 이제 코드를.. 2022. 3. 22. [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] 2. 플러터 Themes, 다크모드, 앱의 컬러 선택 사이트 지난 포스트에서 만든 레이아웃을 베이스로 Themes와 Colors에 대해 알아보도록 하겠습니다. 그리고 앱의 컬러를 쉽게 선택할 수 있게 도와주는 사이트를 알아봅시다. 이번 포스트는 다음 내용을 다루고 있습니다. brightness, 다크 모드 설정 primarySwatch, 앱바 생상 변경 textTheme, 텍스트 스타일 일괄적으로 변경 Material Palette, 플러터 앱의 컬러 선택을 쉽게 현재 아래와 같은 앱을 구성하고 있습니다. 코드를 보면 앱에 대해서 어떤 색상도 설정하지 않았지만 화면에서는 파란색과 흰색 색상이 표현되고 있습니다. 이러한 앱의 테마를 쉽게 변경할 수 있습니다. MaterialApp 위젯에 테마를 설정해 보도록 하겠습니다. MaterialApp 테마 설정 1. brig.. 2022. 3. 14. 이전 1 2 3 4 5 6 7 8 9 다음
