본문 바로가기

Flutter

 (8)
Flutter- Widget Life Cycle Stateful widget 라이프 사이클initState, build, dispose stateful 위젯에는 총 세개의 상태가 존재한다. 일반적으로 우리가 위젯을 실행하는 경우에는, build() 메서드를 통해서 위젯이 빌드되어 기능을 사용할 수 있게된다. 그리고 initState()라는 메서드는 build() 이전에 호출되며, 주로 API 구독등에 사용된다, stateful widget이 위젯 트리에서 벗어날 때 실행되는 메서드로는 dispose()가 있다. dispose는 위젯트리를 벗어나기 전에 무언가를  취소하는 기능을 정의하며, 주로 API 업데이트, form, 이벤트 리스너로 부터 벗어날 때 사용한다. 실행 순서메서드기능1initState()해당 위젯이 빌드되기 이전에 실행될 기능을 정의함..
Flutter- 필수 Widget 정리 Column 행을 의미한다. 서로를 위 아래에 두고 싶을 때, column을 사용한다. 이 경우 하나의 Column에 두개의 child가 들어있는 형태로, 위에 child는 Hey,Selena를 표시하고 아래 child는 Welcome back을 표시한다. 코드는 아래와 같다.(사진의 파란색 박스는 내가 보기 편하게 임의로 표시한 것이다) Column( crossAxisAlignment: CrossAxisAlignment.end, // Column의 MainAxisAlignment는 수직 CrossAxisAlignment는 수평 children: [ // column에 들어가 있는 children들은 한칸씩 아래로 쌓임 const Text( "Hey, Selena", style: TextStyle( co..
Flutter- Widget 플러터는 클래스를 통해서 위젯을 선언한다. 그렇다면 위젯이 뭘까? 위젯 위젯은 플러터 앱의 모든 시각적 요소를 표현하는 역할을 한다. 버튼, 텍스트, 이미지 등 사용자 인터페이스의 모든 요소는 위젯으로 표현되며 플러터에서는 모든 것이 위젯이다. 위젯 종류 플러터에서의 위젯은 크게 두가지로 구분된다. Stateful Widget Stateless Widget Stateless Widget Stateless Widget의 경우 어떠한 상태도 가지고 있지 않은 정적인 위젯으로 어떠한 상태값도 가지고 있지 않기 때문에 Stateless Widget은 화면에서 어떠한 움직임이나 변화를 가지지 않는다. 예: 텍스트, 이미지 Stateless Widget은 StatelessWidget을 상속하여 생성한다. State..
Flutter- 공부#1 import 'package:flutter/material.dart'; void main() { runApp(const App()); // App: root 위젯. 하위 위젯들이 모두 App()을 통해서 실행됨 } // class가 세개의 core Widget 클래스를 상속받는 경우 해당 클래스도 위젯으로 등록된다. class App extends StatelessWidget { const App({super.key}); // stateless widget: 화면에 무언가를 띄어주는 역할 @override Widget build(BuildContext context) { // 모든 위젯들은 반드시 build 메서드를 구현해야한다. return MaterialApp( // 구글 스타일 위젯 (이게 더 좋음..
Dart- 클래스 class Player { final String name; String team; int xp, age; // named constructor 1 Player({ // Dart에서 권장되는 Key:Value 쌍을 이용한 named constructor required this.name, required this.xp, required this.team, required this.age,}); // named constructor 2 Player.createBluePlayer({ required String name, required int age, }) : this.age = age, this.name = name, this.team = 'blue', this.xp = 0; // named constr..
Dart- 함수 함수 선언 - positional parameter 함수의 파라미터 위치에 알맞게 값을 순서대로 넣는 것이다. - named parameter 함수 사용시 들어갈 파라미터값을 명시하는 방법은 함수 선언시 파라미터들에 { }를 써서 Map처럼 선언하는 것이다. 또한 아무런 조치 없이 { }로 감싼 경우 들어가는 파라미터들은 null safety에 의해서 오류를 반환한다. String sayHello({ String name, // null safety에 의한 에러발생 int age, String country, }) { return "hello my name is $name, my age is $age and i lived in $country"; } 이를 해결하기 위해서 아래의 두가지 방식을 사용할 수 ..
Dart- 데이터 타입 정리 List list의 선언은 일반적인 다른 언어들과 동일하다. numbers는 List 형으로 선언되었고 내부에는 collection if 문법이 사용되었다. collection if List intList = [ if(true) 1, ] collection if는 위처럼 collection 내부에서 if 문을 사용하는 기능이다. 이 경우, if 내부 값이 true이므로 1이 intList의 내부값으로 들어간다. String interpolation 문자열 내부에 변수 값을 넣고 싶으면 다음과 같이 $를 사용한다. void main() { var name = "철수"; var greeting = "hello nice to meet you, my name is $name"; print(greeting); /..
Dart- 변수 정리 Nullable Variables Dart의 모든 변수는 기본적으로 nullable하지 않다. 만일 해당 변수에 null을 넣을 수 있도록 설정하고 싶다면 타입 뒤에 ?를 붙이면 된다. nullable 한 변수는 사용할 때마다 null 여부를 체크해야한다. if문을 사용해서 null 여부를 체크할 수도 있고, "변수명?"를 이용해서 체크도 가능하다. Final Variables final 키워드를 통해서 값을 재할당 하지 못하는 변수를 선언을 할 수 있다. Late variables late 키워드를 사용하면 final 변수가 초기값 없이 변수를 선언 할 수 있도록 해준다. 이는 클래스의 final 필드를 나중에 초기화 하는 경우에 사용한다. 즉, laste 키워드는 해당 변수에 어떠한 값이 올 지 모른..

티스토리툴바