반응형
반응형
해당 포스팅의 전체 소스 코드가 포함된 프로젝트 파일은 깃허브에서 다운로드 가능합니다. https://github.com/luvris2/flutter-example/tree/main/flutter_widget_test Scaffold 위젯 MaterialApp의 디자인 레이아웃을 제공하는 위젯 일반적으로 사용되는 많은 UI 구성 요소를 포함하는 컨테이너 앱 바, 플로팅 작업 버튼, 하단 내비게이션 바 등 즉, 개발자가 UI 구성 요소를 추가 또는 제거하고 모양을 변경하거나 기능을 추가하는 작업을 할 수 있음 하위 위젯 appBar 화면 상단에 앱 바를 표시하는 하위 위젯 일반적으로 제목과 선택적으로 일부 작업 또는 탐색 버튼을 포함 (글쓰기 버튼 등) body appBar 아래에 나타나는 화면의 메인 콘..
자동 완성 기능 컨트롤 + 스페이스 원하는 위치에 코드 작성시 자동 완성 기능을 이용하면 코드 작성이 용이 할 수 있습니다. 자동 완성 사용 예시 상위 위젯을 추가하거나 추출하기 (Refactor) 위젯 좌측의 노란색 전구 모양 클릭 혹은 컨트롤 + 시프트 + R 수동으로 하는 것보다 편리하며 무엇보다 직접 작성시 발생되는 오류를 줄일 수 있습니다. 상위 위젯 추가(Column) 예시 정상적으로 상위 위젯이 추가된 코드 화면 파란 밑줄 없애기 dart 언어로 작성을 하면 파란색 밑줄이 보여서 코드 가독에 불편한 경우가 발생합니다. 이는 클래스의 인스턴스를 생성하기 위해 const 생성자를 사용하도록 제안하는 규칙입니다. const 생성자를 사용하여 생성하면 성능이 향상되고 메모리 사용량을 줄일 수 있으나..
이 포스팅은 Visual Studio Code를 이용하여 프로젝트를 생성하는 방법을 다룹니다. 프로젝트 생성을 위한 Flutter Extension 설치 Visual Studio Code 실행 좌측의 네모 4개가 있는 아이콘 클릭 (Extensions) 검색 창에서 'flutter' 검색 인스톨 버튼 클릭 플러터 프로젝트 생성하기 메뉴의 VIew - Command Palette 'flutter' 입력 - Flutter: New Project Application 프로젝트를 저장할 경로 선택 포스팅에서는 'FlutterWorkspace' 라는 이름으로 지정해주었습니다. 프로젝트 이름 지정 포스팅에서는 'hello_flutter' 라고 지정 플러터 프로젝트 폴더 생성 해당 폴더를 신뢰할 것인지 알림창이 뜸 ..
플러터 설치 플러터 다운로드 플러터 공식 홈페이지에 접속하여 설치 파일 다운로드 https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems. docs.flutter.dev 자신의 환경에 맞는 운영체제 선택 포스팅에서는 windows 10의 환경에서 설치를 진행하였습니다. 페이지가 이동되면 하단의 'Get the Flutter SDK' 타이틀에서 파란색 버튼을 클릭하여 다운로드 진행 다운로드 받은 파일 압축 해제 - 가능한 한글이 없는 곳에 위치 Program Files 폴더..
Error 윈도우 운영체제가 10임에도 오류가 나는 상황 발생 해결 방법 명령 프롬프트 - 플러터가 설치되어 있는 경로 - 아래의 명령어 입력 flutter upgrade flutter channel master flutter doctor -v flutter upgrade flutter channel master flutter doctor -v flutter doctor 참고 Flutter doctor - Windows Version (Unable to confirm if installed Windows version is 10 or greater)