Flutter12 플러터 기본기 다지기 - 2 Flutter 앱 개발에서 자주 사용되는 asset과 로컬 폰트 설정 방법 asset이란?asset은 앱 구성에 필요한 리소스 파일들을 의미합니다. 예로 아이콘, 이미지, JSON 파일, 폰트 파일 등이 있습니다.이러한 리소스는 앱 빌드 시 내부에 포함되어야 하며, 이를 위해 pubspec.yaml 파일에 등록이 필요합니다.Text 위젯에서 로컬 폰트(fontFamily) 설정하기Flutter에서 Text 위젯의 fontFamily를 로컬 폰트로 설정하려면, asset으로 폰트를 등록한 후 사용해야 합니다. 폰트 다운로드 https://fonts.google.com/ Browse Fonts - Google FontsMaking the web more beautiful, fast, and open thr.. 2024. 11. 11. 플러터 기본기 다지기 - 1 "Everything is a Widget" — Flutter의 핵심 철학Flutter는 위젯 기반의 UI 프레임워크로, 모든 UI 요소를 위젯으로 표현합니다. 이는 개발의 일관성과 효율성을 크게 높여줍니다. 선언적 UI 구성Flutter는 React에서 영감을 받은 선언적 프로그래밍 방식을 채택했습니다. 개발자는 원하는 UI 상태를 직접 선언하며, 프레임워크가 이를 효율적으로 렌더링합니다. 명령형 UI 💡 어떠한 상태가 되도록 명령한다.ViewA a = ViewA();ViewB b = ViewB();a.setColor(red) // 빨간색이 되어라b.setColor(yello) // 노란색이 되어라a.add(b) // b는 a의 child가 되어라 선언형 UI 💡 어떠한 최종 상태를 선언한다.. 2024. 11. 11. Flutter 배치 설정하기 - 3 배치는 Row나 Column에 추가하는 위젯을 어떻게 배치할 것인지를 정할 때 사용합니다.Row와 Column의 기본 배치는 가로와 세로지만 대상 위젯의 킉가 다를 때는 가운데 정렬할지 아니면 시작이나 끝부터 배치할지를 정할 수 있습니다. 이때 Alignment를 사용합니다. 배치를 설정하지 않으면 기본축은 start이며 교차축은 center입니다. 기본축 배치를 설정한다면 mainAxisAlignment 속성에 다음과 같은 MainAxisAlignment 클래스의 상수를 이용합니다. 1. CenterCenter 위젯은 자식 위젯을 화면의 중앙에 배치합니다. 수직과 수평 모두 가운데 정렬되므로, 중앙에 위치한 요소가 필요할 때 유용합니다.2. start / endstart와 end는 주로 Row나 Co.. 2024. 10. 31. Flutter 레이아웃 중첩하기 - 2 앞에서 살펴본 Row와 Column으로 위젯을 가로나 세로로 배치할 수 있지만 대부분 화면은 그렇게 단순하지 않습니다.예를 들어 다음처럼 인스타그램 같은 화면을 구성한다고 가정하면 크게 4개 영역으로 나눠 설계할 수 있습니다. top 영역에는 아이콘, 문자열 등이 가로로 배치되었고 그 아래 이미지가 출력되며 icons 영역에는 아이콘 4개가 그 아래 이미지가 출력되며 icons 영역에는 아이콘 4개가 가로로 출력됩니다. 그리고 마지막 bottom부분에 문자열 2개가 세로로 나열됩니다. 이 화면은 Row와 Column을 한 번만 사용하면 안 되고 중첩해야 합니다. 즉 Row나 Column 하위에 다른 Row, Column을 추가해야 합니다. 예를 들어 다음처럼 구성할 수 있습니다. 즉, 레이아웃도 하나의 .. 2024. 10. 30. Flutter 위젯 배치하기 - 1 가로로 배치하기 - ROW레이아웃 위젯은 Row와 Column이 대표적이다.먼저 Row는 가로 방향으로 위젯을 배치한다. Widget build(BuildContext context) { return Row( children: [ SafeArea( child: Container( width: 100, height: 100, color: Colors.red, ), ), ], );}높이 넓이 100인 네모를 한번 화면에 띄워 보았다. SafeArea Flutter에서 시스템 UI(예: 상태 바, 노치, 소프트 키 등)와 겹치지 않도록 위젯을 안전한 영역 내에 배치하는 데 사용됩니다. 즉, SafeAr.. 2024. 10. 29. Flutter 초반 프로젝트 생성하는 방법 New Flutter Project를 클릭해 줍시다 위치는 flutter 깔아 두었던 경로로 정해줍니다. work_flutter 오른쪽 마우스를 클릭한 후 파일을 생성해주고그 파일을 클릭한후 OK눌러주면 됩니다. 생성해주면 flutter 생성 완료!! 2024. 10. 28. 이전 1 2 다음
