props

• font-end frame work 개념의 props에 대해 알아보자.

• 하지만 함수형 프로그래밍인 font-end frame work와는 다르게 dart는 객체지향이라 하였고
  부모컴포넌트 처럼 사용되는 생성자 함수로 빌딩블록을 불러온다고 하였다.

• 즉, props을 생성자 함수에서 "속성값"으로써 지정을 해주면 된다는 것이다.

• 만약 위와 같은 컴포넌트가 있다면 앞서 배운 아래의 2가지 방법으로 할당이 가능하다.

named parameter

const StyledText({super.key, 벨류});

const StyledText({super.key, text});

positional parameter

const StyledText(타입 벨류, {super.key});

const StyledText(String type, {super.key});

• 그래서 key를 선언 했던 것 처럼 : 키워드를 사용해 선언도 가능하다.

class StyledText extends StatelessWidget {
  const StyledText(String inputText, {super.key}):text = inputText;

  String text;

  @override
  Widget build(context) {
    return const Text(
      text,
      style: TextStyle(
        color: Color.fromARGB(255, 98, 250, 250),
        fontSize: 28,
      ),
    );
  }
}

• 하지만 이렇게 할당하면 밑에서 사용하는 속성값과 매핑이 안 되므로 여기서 this. 키워드를 사용하면 좋다.

• this : 클래스 안에서 클래스 그 자체를 참조하기 위해 사용되거나 클래스에 기반해 구축될 개체를 참조하기 위해서 사용된다.

class StyledText extends StatelessWidget {
  const StyledText(this.text , {super.key});

  final String text;

  @override
  Widget build(context) {
    return Text(
      text,
      style: const TextStyle(
        color: Color.fromARGB(255, 98, 250, 250),
        fontSize: 28,
      ),
    );
  }
}

• 그리고 여기서 final 키워드를 사용하면 좋은데 왜냐하면 this.에 의해 한 번 선언되고 그 속성값은 해당 class 내부에선 바뀔일이 없기 때문이다. 그래야 cached 되고 dart에 의해 재사용이 가능하다.

final

• 분명 우리는 final은 compile 과정이 아닌 한 번 실행 된 이후에는 바뀔 수 없는 값이라고 알고 있다.
  하지만 위 코드를 보면 멀쩡하게 동작하는 어떻게 final인 상수가 값이 바뀔 수 있을까?

• 이는 명확히 말하면 final은 변수를 새로 할당할 수 없음 이다.
  즉, 기존에 저장된 메모리에 새로운 값을 저장하는 것은 가능하다.

final vs const

• 재할당도 불가, 변수를 조작하는 것도 불가다 왜? => compile 시 실행되기 때문이다.

List 타입과 positional parameter

class GradientContainer extends StatelessWidget {
  const GradientContainer(this.colors, {super.key});

  final List<Color> colors;

  @override
  Widget build(context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: colors,
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: const Center(
        child: StyledText('Hello world?!'),
      ),
    );
  }
}

Color 타입과 named parameter

class GradientContainer extends StatelessWidget {
  const GradientContainer({super.key, required this.color1, required this.color2});

  final Color color1;
  final Color color2;

  @override
  Widget build(context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [color1, color2],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: const Center(
        child: StyledText('Hello world?!'),
      ),
    );
  }
}

multiful 생성자함수

class GradientContainer extends StatelessWidget {
  const GradientContainer(this.colors, {super.key});
  
  const GradientContainer.purple({super.key})
      : color1 = Colors.deepPurple,
        color2 = Colors.indigo;

  final List<Color> colors;

  @override
  Widget build(context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: colors,
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
        ),
      ),
      child: const Center(
        child: Image.asset(name),
      ),
    );
  }
}

사용되는 객체

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(
        body: GradientContainer.purple(),
      ),
    ),
  );
}

• 이렇게 하여 굉장히 간단하게 미리 정해놓은 값으로 객체생성도 가능하다.