반응형 플러터8 [Flutter] 플러터 Flutter 공부 로드맵 / 플러터 공부 방법 / 플러터 공부 순서 해당 자료는 플러터(Flutter)에 대한 공부를 하는 순서이자, 방법입니다. 해당 로드맵을 보고 꼭 공부해야 하는 부분과 선택적으로 공부를 하면 좋을 부분을 알 수 있습니다. 전체적으로 플러터를 공부할 때, 어떤 것들이 있는지 한 눈에 확인할 수 있습니다 :) 2023. 2. 5. [Flutter] 플러터 vscode 유용한 환경 설정 / 플러터 vscode 개발환경 세팅 설정 / setting json 목차 비주얼스튜디오(vscode)에서 JSON 파일을 변경해 유용한 기능들을 설정할 수 있다. 우선 Ctrl + Alt + P를 눌러 커맨드 팔레트를 띄우고, setting을 입력해 아래와 같이 setting.json 파일을 연다. Open User Settings(JSON) 열기 settings.json 열기 이전에 Flutter&Dart 맞춤 기본 설정 값이 들어가는 "[dart]"가 있다. 오른쪽 아래에 물음 말이 뜰텐데 Yes를 누르면 자동생성된다. 안 뜬다면 아래의 코드를 복붙하자. "[dart]": { "editor.formatOnSave": true, "editor.formatOnType": true, "editor.rulers": [80], "editor.selectionHighlight".. 2023. 1. 28. [Flutter] 플러터 vscode 애뮬레이터로 실행하기 / vscode 모바일 디바이스로 실행 비주얼스튜디오 코드에서 모바일 디바이스 화면을 띄울 수 없을까? 그러나 위와 같이 홈페이지의 형태가 아니라 아래와 같이 모바일 디바이스의 형태로 띄워주고 싶을 수도 있다. 이는 비주얼 스튜디오 코드(Visual Studio Code)에서도 가능하다. 이는 애뮬레이터(emulator)이다. 위와 같이 모바일 디바이스로 vscode에서 애뮬레이터를 띄우기 위해서는 '안드로이드 스튜디오(Android Studio) 애뮬레이터 가상 디바이스 설치'가 필요하다. 결국은 vscode에서 android studio를 기반으로 안드로이드 스튜디오에 있는 애뮬레이터로 디버깅 하는 형태인 것이다. 안드로이드 스튜디오에서 플러터 개발환경 세팅은 아래의 글을 참고하자. 아래의 과정이 완료되고 나서 vscode에서 설정을 할 .. 2023. 1. 28. [Flutter] 플러터 vscode 개발 환경 구축 / 플러터 비주얼스튜디오 개발 환경 / 플러터 vscode 애뮬레이터 / vscode 확장 설치 오류 VSCode에서 Flutter를 사용하기에 앞서, Flutter SDK 설치와 설정이 필요하다. 해당 부분은 아래의 글을 참고하고 설치가 완료되었다면 VSCode 설치를 진행한다. [Flutter] 플러터 개발환경 구축 및 세팅 [Flutter] 플러터 개발환경 구축 및 세팅 Flutter 개발환경 구축하기 1. 윈도우 플러터 개발 환경 구축 (1) 플러터 SDK 다운받기 아래의 플러터 홈페이지에 접속해 플러터 SDK를 다운받는다. https://docs.flutter.dev/get-started/install Install Install Flutte parkjh7764.tistory.com Visual Studio Code 설치하기 vscode 공식 사이트에 접속한 뒤, 자신의 운영체제(OS)에 맞게 .. 2023. 1. 28. [Flutter] 디자인 위젯 - Container, SizeBox, SafeArea, Padding, Margin 위젯 디자인 관련 위젯(Design Widget) 디자인적 요소와 관련된 위젯이다. Container 위젯 컨테이너 위젯은 다른 위젯을 포함시킬 때 사용된다. 위젯을 컨테이너에 담고 위젯의 너비와 높이, 배경, 테두리를 디자인할 때 사용한다. Container 위젯 3개로 만든 신호등 모양 class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( floatingActionButton: FloatingActionButton( onPressed: (){}, child: Icon(Icons.add), ), body: Center( child:Column( m.. 2023. 1. 17. [Flutter] 텍스트 위젯, 제스처 위젯 - Button, IconButton, GestureDetector, FloatingActionButton 텍스트 위젯 (Text Widget) 화면에 글자를 보여주기 위해서는 글자를 렌더링 할 수 있는 위젯을 사용해야 한다. 해당 위젯은 여러가지가 있지만 대표적인 텍스트 관련 위젯은 'Text 위젯'이 있다. Text 위젯 입력한 글자에 대해 스타일링 하는 위젯으로, 첫 번째 포지셔널 파라미터로 문자열을 입력 하고, style이라는 네임드 파라미터에 fontSize, fontWieght, color, fontFamiliy 등 스타일을 지정할 수 있다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContex.. 2023. 1. 17. [Flutter] Hello Flutter 출력해보기 Hello Flutter 출력하기 플러터는 프로젝트를 생성하면 /lib/main.dart 파일에 자동으로 샘플 코드를 생성한다. 해당 부분을 지우고 코드를 작성하면 된다. import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( body: Center( child: Text( 'HELLO FLUTTER', ), ), ), ), ); } import 'package:flutter/material.dart'; - 머터리얼 디자인 관련 기능을 불러온다. - flutter/material.dart 를 불러와야 플러터에서 제공해주는 위젯 기능을 사용할 수 있다. void main() { runApp( Mate.. 2023. 1. 17. [Flutter] 플러터 개발환경 구축 및 세팅 / Flutter 환경변수 설정 Flutter 개발환경 구축하기 1. 윈도우 플러터 개발 환경 구축 (1) 플러터 SDK 다운받기 아래의 플러터 홈페이지에 접속해 플러터 SDK를 다운받는다. https://docs.flutter.dev/get-started/install Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. docs.flutter.dev [Windoews]를 클릭한다. 아래로 내려 Get the Flutter SDK를 찾아, flutter_windows_3.7.3-stable.zip 버튼을 클릭한다. 다운로드 받은 Flutter 파일을 원하는 위치에 압축을 풀.. 2023. 1. 14. 이전 1 다음 반응형
