본문 바로가기

flutter34

[Flutter] Widget 구조 - ( week 2 ) Widget, Element Flutter는 내부적으로 모든 위젯마다 Element를 생성한다. 위젯이 트리 구조로 만들어지는 것처럼 Element 또한 트리 구조로 생성된다. Element 트리는 골격으로 Flutter 앱의 구조를 볼 수 있지만 자세한 정보는 원본 위젯의 참조를 통해 볼 수 있다. 앱이 실행되면 위젯은 자식 위젯으로 이동하며 검사가 수행된다. 이때 Element는 대응되는 위젯의 Type과 Key가 이전의 위젯과 동일한지 확인하는데 동일한 경우 위젯의 참조를 경신한다. StatelessWidget의 경우 Key를 가지지 않기 때문에 Type만 확인한다. 반면에 StatefulWidget은 트리 구조에 추가로 State Object가 존재하는데 위젯의 정보를 저장하게 된다. 위젯이 변화.. 2023. 4. 15.
[Flutter] Widget 이해 - ( week 2 ) StatelessWidget 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯이다. 상태란 화면상에 나타나는 정보를 뜻하며 변화가 없어 화면을 새로고침 할 필요가 없는 위젯이다. 즉 화면 내의 내용이 변화지 않는 위젯을 뜻한다. class MyApp extends StatelessWidget { MyApp(); // 생성자 constructor @override// 오버라이드 상속받은 함수를 재정의 Widget build(BuildContext context) { return Text("hello"); } } extends StatelessWidget StatelessWidget의 기능을 상속받는다. MyApp() 생성자, 클래스 이름과 동일한 함수이다. @override 상속받은 함수를 재정의해서.. 2023. 4. 15.
[Flutter] 숙제 - ( week 1 ) 지금까지 배운 것을 토대로 예시를 따라 만들어 본다. 사용한 위젯들 Scaffold AppBar Text IconButton Column Padding TextField Icon Divider Expanded ListView.builder Card Stack Image.network Container Text Title 우선 타이틀을 만들어준다. 타이틀은 왼쪽으로 정렬된 텍스트와 흰 배경으로 되어있고 오른쪽 끝에는 아이콘이 하나 들어가 있다. 1. 텍스트를 넣고 색상은 검은색 사이즈도 수정해 준다. title: Text( 'Movie Reviews', style: TextStyle( fontSize: 25, color: Colors.black, ), ) 기본적으로 앱바의 색상이 파란색으로 되어있고 아래에.. 2023. 4. 10.
[Flutter] Dart 기본 개념 - ( week - 1 ) void main() { var count = 'Count'; print('$count'); } // Comments Main main 함수는 Dart에서 처음 시작 시 호출하는 약속된 함수이다. 앞에 붙은 void 자리의 경우 함수가 실행 종료될 때 반환되는 값의 타입을 표시한다. void는 반환하는 값이 없음을 뜻한다. Comments 주석, 코드가 실행될 때 컴퓨터는 주석을 읽지 않기 때문에 주로 메모할 때 사용한다. // 문자를 입력하면 그 뒤에 작성된 코드는 주석으로 처리된다. Print 소괄호 안쪽에 있는 값을 콘솔 창에 출력한다. 일반적으로 코드가 정상적으로 동작하는지 확인할 때 사용한다. Semicolon Dart에서는 문장 마지막에 세미콜론 ; 를 붙여주어야 한다. 가장 흔하게 발생하는 .. 2023. 4. 9.

티스토리툴바