[25.05.28 TIL] Flutter 1주차~2주차 강의, 1주차 과제(클래스 객체와 위젯)

김영민·2025년 5월 28일
TILflutter개념기초 문법사전캠프위젯

[Flutter 7기] 사전캠프

목록 보기
3/13

사전캠프 3일차
3일차인 오늘은 2일차에 듣지 못한 1-14강 클래스 객체와
1주차 강의 Dart 기초 문법과 개념 과제 풀이를 2개 완료했다.
그리고, 2주차 강의에서 Stateless와 Stateful에 대해 배웠다.

1주차 강의(기초 문법과 개념)

7. 클래스 객체

고유한 속성과 기능을 가지고 있는 것을 말한다.

1️⃣ 객체의 구성

class [클래스명] {
	생성자()
    멤버변수 //특성
    매서드() {
    	//기능
    }
}

2️⃣ 객체 생성

class Human{
	final String id; //주민번호
    final String name; //이름
    final int age;
    final Gender gender;
}
  • 우선 강의와 동일하게 사람을 클래스 객체로 만들었다.
    여기서 final은 한번 입력한 값을 바꾸거나 값이 변하지 않는다고 compiler에게 알려준다.
enum Gender{
	M, W
}
  • Gender라는 타입을 만들 때 enum을 사용했는데, 이는 열거형으로 위와 같이 작성해서 사용한다.

3️⃣ 생성자(constructor)

class Human{
	final String id;
	final String name;
	final int age;
	final Gender gender;
	const Human( //생성자
		this.id,
		this.name,
		this.age,
		this.gender,
	);
}
  • 인스턴스화를 위해 생성자를 만든다.

4️⃣ 매서드 정의

class Human {
  final String id;
  final String name;
  int age;
  final Gender gender;
  Human({
    required this.id,
    required this.name,
    required this.age,
    required this.gender,
  });
  void addAge(){
    age++;
  }
}
  • 나이가 변화하기 위해서 age의 final을 삭제했다.
    앞에서 배웠던 required를 활용해 모든 데이터를 넣어야 되도록 만들었다.
    그리고 순서 상관없이 이름에 맞게 데이터가 잘 들어간다.
    addAge를 이용해 나이를 먹도록 한다.

5️⃣ 클래스 응용 예제

void main() async {
  var totalYears = 10;
  print('프로그램 시작');
  var person = Human(
    id: 'xxxxxx-xxxxxxx',
    name: 'Hayancode',
    age: 1,
    gender: Gender.W,
  );
  //async
  for (var currentYear = 1; currentYear < totalYears; currentYear++) {
    await Future.delayed(Duration(seconds: 1));
    print('$currentYear년이 흘렀습니다.');
    man.addAge();
    print('${person.name}은 ${person.age} 나이입니다.');
  }
  //await 비동기를 동기 방식처럼
  print('프로그램 종료');
}
  • 10년이 흐르도록 설정하고, 데이터 값을 넣어준다.
    앞에서 배운 async와 await를 활용하여 출력값에 딜레이를 준다.
프로그램 시작
1년이 흘렀습니다.
Hayancode은 2 나이입니다.
2년이 흘렀습니다.
Hayancode은 3 나이입니다.
			.
			.
			.
8년이 흘렀습니다.
Hayancode은 9 나이입니다.
9년이 흘렀습니다.
Hayancode은 10 나이입니다.
프로그램 종료
async, await 예시

[배달 어플] 로직 예시

  로딩 페이지 보이게 하기();
  await 가게 리스트 가져오기(); // 몇초가 걸릴지 모름
  로딩 페이지 없애고 가게 목록 보이게하기();
  • 이런 식으로 사용한다고 한다.

최종 코드
  • enum Gender가 상단에 있어야 Gender 타입의 데이터를 알 수 있어 임의로 상단에 올렸다.
enum Gender{
	M, W
}
  
class Human {
  final String id;
  final String name;
  int age;
  final Gender gender;

  Human({
    required this.id,
    required this.name,
    required this.age,
    required this.gender,
  });

  void addAge(){
    age++;
  }
}

void main() async {
  var totalYears = 10;
  print('프로그램 시작');
  var person = Human(
    id: 'xxxxxx-xxxxxxx',
    name: 'Hayancode',
    age: 1,
    gender: Gender.W,
  );

  for (var currentYear = 1; currentYear < totalYears; currentYear++) {
    await Future.delayed(Duration(seconds: 1));
    print('$currentYear년이 흘렀습니다.');
    person.addAge();
    print('${person.name}은 ${person.age} 나이입니다.');
  }

  print('프로그램 종료');
}


1주차 과제 [Dart 문법 익히기]

Dart와 Flutter 소개


코드

void main() {
	print("김영민");
}

출력

김영민

변수와 데이터 타입


코드

void main() {
  	String name = "김영민";
  	int age = 27;
  	double height = 170.2;
  	bool isStudent = true;
  //입력값
  	print("이름 : $name");
  	print("나이 : $age세");
  	print("키 : $height");
  	print("학생 : $isStudent");
}

출력

이름 : 김영민
나이 : 27세
키 : 170.2
학생 : true


2주차 강의(위젯)

1. 위젯

위젯을 만드는 방법

1️⃣ 플러터 기본 내장 위젯 👉https://docs.flutter.dev/ui/widgets

2️⃣ pub.dev 👉https://pub.dev/

3️⃣ 직접 만들기

- 우선 flutter.dev에서 Cupertino, Material components와 같이 ios, android 규격도 제공해주는 것 같다. pub.dev에서는 여러 개발자들이 공유한 자료들이 많았다.

2. Stateless, Stateful

2-1 Stateless

StatelessWidget은 변수들이 변화하지 않는 immutable한 게 특징이다.
또한, 코드 관리나 디버그가 쉽다.

class FirstMyWidget extends StatelessWidget{
	const FirstMyWidget({super.key});
	//StatelessWidget
	@override
  Widget build(BuildContext context) {
    return Text('나의 첫번째 위젯입니다.');
  }
}
  • 이런 식으로 build 함수를 정의하는 방식이다.
    앞서 배웠던 final과 같은 것이 쓰이면 변화하지 않는다고 보면 되는 것 같다.

2-2 Stateful

반대로 변화하는, mutable한 성질을 갖고 있다.
사용자와 상호 작용이나, 데이터 변경 같이 외부 요인에 따라 변경해야 할 때 사용한다고 한다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}
//
class _MyWidgetState extends State<MyWidget> {
  int _counter = 0;
//
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
//
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('StatefulWidget 예제'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Counting : $_counter'),
            ElevatedButton(
              onPressed: _incrementCounter,
              child: Text('더하기'),
            ),
          ],
        ),
      ),
    );
  }
}
  • Stateless에서 사용한 const가 없어지는 등의 변화가 있다.

2-3 라이프 사이클

StatelessWidget
-> Constructor ---> Build()

  • 상태를 갖지 않는 위젯으로 간단하다.

StatefulWidget
-> Constructor -> createState -> initState() -> didChangeDependencies ---> Build()
                    -> setState()                                                     ---------> Build()
                    ------------------> didUpdateWidget()                      --------> Build()

  • createState()
    State 객체를 생성한다.
@override
_MyWidgetState createState() => _MyWidgetState(); // 예시
  • initState()
    State 객체가 처음 생성될 때 한 번 호출되며, 초기화 작업을 할 수 있다.
    super.initState()를 호출해야 한다고 한다.
@override
void initState() {
  super.initState();
  // 초기화 작업 // 예시
}
  • didChangeDependencies()
    initState()와 같이 생성되고 나서 한 번 호출이 되는데, build context와 같이 initState()에서 접근할 수 없는 부분을 접근한다. 만약 initState에서 접근하면 오류가 발생한다.
  @override
void didChangeDependencies() {
  super.didChangeDependencies();
  // 종속성이 변경될 때 작업 // 예시
}
  • setState
    build() 함수를 다시 호출한다.
void _updateState() {
  setState(() {
    // 상태 변경 작업
  });
} // 예시
  • didUpdateWidget(covariant T oldWidget)
    이전 위젯과 새 위젯을 비교하여 상태를 업데이트할 수 있다.
@override
void didUpdateWidget(MyWidget oldWidget) {
  super.didUpdateWidget(oldWidget);
  // 위젯이 업데이트될 때 작업
} // 예시
  • build()
    화면을 그릴 때 마다 호출이 되며, 여러 번 호출될 수 있다.
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('My Stateful Widget')),
    body: Center(child: Text('Hello, World!')),
  );
} // 예시

오늘은 1주차 강의를 마무리했고, 1주차 과제를 해결했다.
다소 아쉬운 것은 TIL 쓰는게 처음이고, 익숙하지 않아서 작성하는데 꽤 시간이 걸린다.
그리고 배운 것을 다시 복습하는 식으로 진행해서 그런 것도 있는 것 같다.

내일은 2주차 강의를 듣는데, 아마 기본 위젯들에 대해서 배우고 다른 앱 위젯들을 분석하는 편은 아마 금요일로 넘어가지 않을까 싶다.

여유가 된다면 틈틈이 과제를 하나씩 해결해야겠다.
연산자를 풀어야되는데 생소한 코드가 있었던 것 같다. 내일 확인해봐야겠다.

profile
김영민
💻 [25.05.26~] Flutter 공부중⏳
이전 포스트

[25.05.27 TIL] Flutter 1주차 강의(기초 문법과 개념)

다음 포스트

[25.05.29 TIL] 2주차 강의(위젯)

0개의 댓글