Flutter 기본 구조

김석·2023년 4월 17일
0

Flutter

목록 보기
5/5

1. 기본 구조

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(),
    )
  }
}

MyApp은 Widget. MyApp에서 Widget Tree 구조상 하위 계층 Widget을 만들려고 한다. 그래서 Widget을 반환하는 build 함수를 override. 이때 매개변수 context는 MyApp의 context이다.

return하는 MaterialApp은 이미 만들어져 있는 Widget 클래스이다. new가 생략됐을 뿐 새로운 인스턴스를 생성한다. MaterialApp의 괄호 내부는 생성자에 전달하는 인자이다. home은 MaterialApp 클래스의 멤버 변수이다.

근데 왜 생성자에서 home: Scaffold() 라고 인자를 전달할까?


2. Named Argument

* null safety를 무시하고, 생성자 문법에만 집중함.

class Person {
  String name;
  int age;
}

2-1. 기본 생성자 문법

생성자
Person(String name, int age) {
    this.name = name;
    this.age = age;
}

2-2. 간단한 기본 생성자 문법

생성자
Person(this.name, this.age);
Person man = Person('kim', 10);
이렇게 생성자 호출하며 인스턴스 생성.

2-3. Named argument

매개변수를 {}로 묶어주면, 생성자를 호출할 때

생성자(인자: 값, 인자: 값, ...)

형태로 호출하게끔 바뀐다.

생성자
Person({this.name, this.age});
Person man = Person(name: 'kim', age: 10);
으로 생성자 호출하며 인스턴스 생성.

2-4. MaterialApp 생성자

const MaterialApp({
  super.key,
  this.navigatorKey,
  this.scaffoldMessengerKey,
  this.home,
  ...
})

named argument 형식으로 생성자가 만들어져 있다. 따라서,

MaterialApp(
  home: Scaffold(),
  ...
)

이러한 형식으로 MaterialApp 생성자를 호출해서 인스턴스를 만들어야 한다.

모든 Widget들이 이러한 관례를 따르기 때문에, Widget을 만들 때 이렇게 만들어야 하는 것 같다.


3. 생성자 인자에 함수가 오면?

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ElevatedButton(
        child: Text("navigator push"),
        onPressed: () => Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => ScreenA())
        )
      )
    );
  }
}

ElevatedButton 클래스 멤버 변수 중 onPress라는 변수가 있다. 그 변수의 타입은 함수이다.

final VoidCallback? onPressed;
typedef VoidCallback = void Function();

그래서 함수를 전달한다. 아무 인자를 받지 않기 때문에 ()로 표현하고, 그 함수는 Navigator.push(~~)의 결과를 리턴한다.

Navigator는 Widget이다. 이 Widget 클래스의 push 함수의 인자에는 BuildContext와 Route 클래스가 포함되어야 한다.

Navigator.push의 Type:
Future<dynamic> Function(BuildContext, Route<dynamic>)

MaterialPageRoutes는 Route의 먼 자식 클래스이다. 해당 클래스의 생성자에는 builder 인자를 포함해야 한다. builder는 무엇일까?

final WidgetBuilder builder;
typedef WidgetBuilder = Widget Function(BuildContext context)

WidgetBuilder라는 함수가 존재한다. 관례적으로 builder라는 이름을 사용하는 인자들은 WidgetBuilder 타입이다. 즉 builder 인자는, context를 매개변수로 받고 Widget을 리턴하는 함수이다.

예시에서 builder는 context를 인자로 받아 ScreenA라는 Widget을 리턴하는 함수이다.


출처

https://papabee.tistory.com/37
https://naraewool.tistory.com/m/220

profile
handsome

0개의 댓글