본문 바로가기
반응형

분류 전체보기210

[Flutter] 배치 위젯 - Row, Column, Flexible 위젯, Expanded 위젯, Stack 위젯 목차 배치 위젯(Arrange Widget) 배치 위젯은 하위 위젯을 가로나 세로로 배치하거나 위젯들 간의 위나 아래로 겹칠 때 사용한다. Row 위젯 Row 위젯은 하위 위젯을 가로로 배치하는 데 사용한다. Row와 Coulmn에는 주축(Main Axis)와 반대축(Cross Axis)라는 개념이 존재하는데, Row는 가로가 주축, 세로가 반대축이 된다. Column의 경우엔 가로가 반대축, 세로가 주축이 된다. Row 위젯으로 작성한 전체 코드 import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContex.. 2023. 2. 5.
[Flutter] 플러터 Flutter 공부 로드맵 / 플러터 공부 방법 / 플러터 공부 순서 해당 자료는 플러터(Flutter)에 대한 공부를 하는 순서이자, 방법입니다. 해당 로드맵을 보고 꼭 공부해야 하는 부분과 선택적으로 공부를 하면 좋을 부분을 알 수 있습니다. 전체적으로 플러터를 공부할 때, 어떤 것들이 있는지 한 눈에 확인할 수 있습니다 :) 2023. 2. 5.
VSCode 개발 환경 설정 동기화 하고 불러오기 / 비주얼스튜디오코드 세팅 설정 동기화 목차 비주얼스튜디오 코드 세팅 값 동기화 설정하기 파일 -> 기본설정 -> '설정동기화 켜기' 클릭 동기화 항목 체크 후, 로그인 및 켜기 클릭 Microsoft 또는 GitHub에 설정값 동기화 선택 나는 GitHub에 VSCode 설정 값을 동기화 하겠다. GitHub 로그인 후 Authorize 클릭 Visual Studio Code 열기 클릭 URI 열기 허용 설정 동기화: 지금동기화 (지금) 확인 아래와 같이 동기화됨(지금)이 뜨면 정상적으로 동기화가 실행되고 있는 것이다. 비주얼스튜디오 동기화 값 불러오기 파일 -> 기본설정 -> '설정동기화 켜기' 클릭 설정 동기화 : 지금 동기화 클릭 병합 클릭 후 작업환경 세팅 확인 수동으로 병합[Merge Manually..] : 이 옵션을 선택하면 기.. 2023. 1. 28.
[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.
반응형

티스토리툴바