본문 바로가기

Flutter29

[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 플러터 익스텐션 모음 목차 이번에는 비주얼스튜디오 코드(Visual Studio Code)에서 플러터를 개발할 때 유용한 익스텐션과 작업환경 설정을 다루어보도록 하겠다. 플러터 개발에 유용한 익스텐션 이외에도 아래의 글에는 vscode로 개발할 때 유용한 익스텐션을 20개나 추천하고 있으니 참고하도록 하자. 비주얼 스튜디오 코드 익스텐션 20개 추천 / 확장 프로그램 설치 비주얼 스튜디오 코드 익스텐션 20개 추천 / 확장 프로그램 설치 및 웹 개발 환경 설정 (Visual Studio 오늘은 흔히 웹 공부를 할 때 사용하는 텍스트 에디터인 '비쥬얼 스튜디오 코드(Visual Studio Code)의 확장프로그램'을 소개할 것이다. 나도 매번 개발하는 컴퓨터와 노트북, 개발 환경이 계속 바뀌 parkjh7764.tistory.. 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] 위젯(widget) 종류, child children 매개변수 플러터 위젯 (Flutter Widget) 플러터는 화면에 그려지는 모든 요소가 위젯으로 구성되어 있다. 플러터 프레임워크는 많은 기본 위젯을 제공하며, 앱 개발자가 직접 위젯을 만들 수도 있다. 위젯은 현재 주어진 상태(State)를 기반으로 어떤 UI를 구현할 지를 정의한다. 위젯의 상태(State)가 변경되면 기존 상태의 위젯과 비교해 최소한의 변경사항을 산출해 UI를 화면에 다시 그려준다. 위와 같이 최소한의 리소스를 이용해 UI 변경을 함으로 최대 120FPS까지 높은 퍼포먼스를 산출할 수 있다. 대표적인 플러터 위젯(Widget) 자식을 하나만 받는 child 매개변수를 사용하는 위젯 Container 위젯 자식을 담는 컨테이너 역할을 하며 배경색, 너비, 높이, 테두리 등의 디자인을 설정할 .. 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.

티스토리툴바