Flutter/Flutter Study20 [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. [Flutter] 플러터 vscode 애뮬레이터로 실행하기 / vscode 모바일 디바이스로 실행 비주얼스튜디오 코드에서 모바일 디바이스 화면을 띄울 수 없을까? 그러나 위와 같이 홈페이지의 형태가 아니라 아래와 같이 모바일 디바이스의 형태로 띄워주고 싶을 수도 있다. 이는 비주얼 스튜디오 코드(Visual Studio Code)에서도 가능하다. 이는 애뮬레이터(emulator)이다. 위와 같이 모바일 디바이스로 vscode에서 애뮬레이터를 띄우기 위해서는 '안드로이드 스튜디오(Android Studio) 애뮬레이터 가상 디바이스 설치'가 필요하다. 결국은 vscode에서 android studio를 기반으로 안드로이드 스튜디오에 있는 애뮬레이터로 디버깅 하는 형태인 것이다. 안드로이드 스튜디오에서 플러터 개발환경 세팅은 아래의 글을 참고하자. 아래의 과정이 완료되고 나서 vscode에서 설정을 할 .. 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. 이전 1 2 3 다음
