Flutter29 [Flutter] 버튼(Button) - ElevatedButton, OutlinedButton, TextButton 꾸미기 Contents 플러터(Flutter) 버튼(Button) 알아보기 플러터에는 ElevatedButton, OutlinedButton, TextButton 버튼 등이 있으며 이를 알아보고 style을 통해 꾸미는 방법을 알아보도록 하겠다. // ignore_for_file: prefer_const_constructors import 'package:flutter/material.dart'; class HomeScreen extends StatelessWidget { const HomeScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Button'), ).. 2023. 3. 14. dd oo 2023. 3. 6. [Flutter] 맥북 M2 java JDK 설치하기 / iOS jdk 1.8 brew로 설치하기 Contents 맥북에어 M2 JAVA JDK 설치하기 Homebrew 설치하기 Homebrew 홈페이지에서 접속한 후 해당 링크 복사 https://brew.sh/ Homebrew The Missing Package Manager for macOS (or Linux). brew.sh /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 터미널에 붙여 넣고 엔터치면 맥북 컴퓨터의 비밀번호를 입력하는 화면이 나온다. Password를 입력 후 엔터를 누르면 설치가 진행된다. 그러면 Homebrew 설치 완료. 그리고 path를 설정해줘야 한다. path 설정하기 vi ~/.zshrc exp.. 2023. 3. 4. [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. 이전 1 2 3 4 다음
