분류 전체보기188 [Flutter] 드로어(Drawer) 메뉴 만들기 | 플러터 네비게이션 드로어 (Navigation Drawer) 메뉴 Contents 플러터 드로어 메뉴를 만들기 위해서는 앱바(AppBar)가 필요하다. 앱바의 햄버거 메뉴를 클릭했을 때 드로어메뉴가 보이도록 하기 때문이다. 그런데 플러터에서 드로어 메뉴를 만들면 자동으로 앱바에 햄버거 모양의 아이콘이 추가된다. 이전에 작성한 코드에서 햄버거 메뉴만을 지우고 가져오자. 이전 앱바(AppBar) 코드 참고하기 [Flutter] AppBar 앱바 만들기 [Flutter] AppBar 앱바 만들기 | DEBUG 리본 없애기 | 메뉴 아이콘 추가하기 Contents 앱바(Appbar) 생성하기 - AppBar() home_screen.dart 파일 import 'package:flutter/material.dart'; class HomeScreen extends Stateles.. 2023. 2. 15. [Flutter] AppBar 앱바 만들기 | DEBUG 리본 없애기 | 메뉴 아이콘 추가하기 Contents 앱바(Appbar) 생성하기 - AppBar() home_screen.dart 파일 import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), ); } } 앱바(Appbar) 제목 지정하기 - title: return Scaffold( appBar: AppBar( title: Text('앱바 만들기'), ), ); 앱바(Appbar) 중앙 배치하기 - centerTitle: return Scaffold.. 2023. 2. 15. [Flutter] Stateless 위젯을 Stateful 위젯으로 바꿔보기 Content 해당 화면은 위젯을 색성하고 삭제가 가능하며 색바꾸기를 누르면 다른 색으로 변경이 된다. StatelessWidget으로 구현한 코드 main.dart 파일 import 'package:flutter/material.dart'; import 'package:flutter_lifecycle/screen/home_screen.dart'; void main() { runApp(MaterialApp( home: Root(), )); } class Root extends StatefulWidget { const Root({Key? key}) : super(key: key); @override _RootState createState() => _RootState(); } class _RootState.. 2023. 2. 8. [Flutter] 위젯 상태관리 라이프사이클 / StatelessWidget, StatefulWidget LifeCycle 함수 메서드 정리 목차 라이프사이클 (Life Cycle = 생명주기)란? Foreground/Background 상태에 있을 때, 시스템이 발생시키는 event에 의해 App의 상태가 전환되는 일련의 과정을 말한다. 쉽게 말하면 사용자가 앱을 실행하는 과정에 있어서, 컴포넌트가 생성되고, 사라지고, 종료되는 일련의 과정에서 갖게되는 상태(State)를 말한다. 앱 상태 (App States) Not running : 앱이 종료되거나 실행을 하고 있지 않은 상태 Foreground : 화면이 나타난 상태 Foreground Inactive : 상호작용이 불가능하지만 화면은 보이는 상태 ex) 시스템 메시지 Foreground Active : 상호작용이 가능하고, 앱이 실행되고 있는 상태 Background Active :.. 2023. 2. 8. [Flutter] 웹뷰, 웹뷰컨트롤러, 앱바, 앱바 아이콘 버튼 / Webview, AppBar, WebViewController / 4.0.2 버전 3.0.0 버전 차이 비교 목차 웹뷰(Webview)를 사용하기 위해서는 웹뷰에 대한 패키지에 대한 간단한 설정이 필요하다. 그 부분은 아래 글을 참고하자. [Flutter] WebView 4.0.2 웹뷰 설정하기 [Flutter] WebView 4.0.2 웹뷰 설정하기 / 플러터 웹뷰 오픈소스 라이브러리 패키지 설정 세팅하기 목차 웹뷰(WebView)란 ? 웹사이트의 URL을 가져다가, 앱을 통해 웹사이트를 화면에 보여주는 역할을 한다. 대표적인 예로, SNS에서 웹사이트의 링크를 공유해서 들어가게 되면 웹사이트를 웹뷰로 보 parkjh7764.tistory.com 폴더 구조 & main.dart 파일 코드 import 'package:flutter/material.dart'; import 'package:flutter_web_.. 2023. 2. 7. [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. 이전 1 2 3 4 5 6 7 ··· 21 다음
