flutter2, Hello World_2, 구조적으로 짜기

Udemy에 flutter 2023 강의를 듣고있습니다.

이전에 4만 원 flutter 책을 한 번 읽었는데, 이번에 강의까지 곁들이니깐 너무 좋네요.
책보다 훨씬 이해가 잘 되는데, 아무래도 책을 한 번 읽어서 이해가 더 잘 되는거 같습니다.

무언가가 쌓여가는 느낌이 있어요!

---

main 함수
: runApp, 메인 Scaffold 구조를 포함

sub: GradientContainer
: Gradient Color를 포함하는 Container 위젯
Parameter로 색 2개를 받음

sub: StyledText
: Parameter로 String을 받아 Text 위젯을 생성함

• 핵심

1. WidgetTree를 main.dart에서 분리해 구조적으로 코드를 작성했다.

2. const Annotation은 캐시를 생성해 flutter를 최적화 함

3. import를 통해 구조적인 Hierarchy를 구성할 수 있음

4. Constructor에 Parameter를 명시해 값을 전달받을 수 있음

---

https://evergreenulsan.github.io/flutter-udemy-2-2/

---

main.dart

import 'package:flutter/material.dart';

import 'package:u230815_dice/gradient_container.dart';

void main() {
  runApp(
    const MaterialApp(
      home: Scaffold(body: GradientContainer(Colors.yellow, Colors.blue)),
    ),
  );
}
'''

sub: GradientContainer
'''dart
import 'package:flutter/material.dart';
import 'package:u230815_dice/styled_text.dart';

const startAlignment = Alignment.topLeft;
const endAlignment = Alignment.bottomRight;

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

  final Color color_1;
  final Color color_2;

  @override
  Widget build(context) {
    return Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [color_1, color_2],
          begin: startAlignment,
          end: endAlignment,
        ),
      ),
      child: const Center(child: StyledText('Hello, World!')),
    );
  }
}

sub: StyledText

import 'package:flutter/material.dart';

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

  final String text;

  @override
  Widget build(context) {
    return Text(
      text,
      style: const TextStyle(
        fontSize: 28,
        color: Colors.white,
      ),
    );
  }
}