플러터 클래스 이용해보기

클래스를 이용해서  좀더 객체지향적으로 수정해봅시다. 이전 포스터인 그라데이션 예제로 바꿔 볼려고 합니다.

void main() {
  runApp(MyApp()); //엡구동 안에는 메인 페이지
}

class MyApp extends StatelessWidget {
//엡 메인 페이지
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
//메인 페이지 디자인
      home: Scaffold(
        body: Container(
//컨테이너
          decoration: const BoxDecoration(
//데코래이션
            gradient: LinearGradient(
                colors: [
//그라데이션 리스트로 받아야함.
                  Color.fromARGB(255, 33, 2, 86),
                  Color.fromARGB(255, 140, 90, 227),
                ],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight //그라데이션 begin 시작 end 끝
                ),
          ),
          child: const Center(
            child: Text(
//텍스트 커스텀
              "hello world!",
              style: TextStyle(
                color: Colors.white,
                fontSize: 28.5,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

 

사실 이미 mian 함수 밖에서 코드를 작성 했기 때문에 뭔가 이상하지만.. 그래도 더 객체지향적으로 수정을 해봅시다

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); //엡구동  안에는 메인 페이지
}

class MyApp extends StatelessWidget {
  //엡 메인 페이지
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      //메인 페이지 디자인
      home: Scaffold(
        body: GradientContainer(),
      ),
    );
  }
}

class GradientContainer extends StatelessWidget {
  //아무것도 없는 위젯을 사용시 자동으로 뒤에서 이 클래스의 논리와,데이터를 많이 추가한다 플러터가 요구하는 데이터와 논리를 추가한다.
  const GradientContainer({super.key});
  @override
  Widget build(context) {
    return Container(
      //컨테이너
      decoration: const BoxDecoration(
        //데코래이션
        gradient: LinearGradient(
            colors: [
              //그라데이션  리스트로 받아야함.
              Color.fromARGB(255, 33, 2, 86),
              Color.fromARGB(255, 140, 90, 227),
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight //그라데이션 begin 시작 end 끝
            ),
      ),
      child: const Center(
        child: Text(
          //텍스트 커스텀
          "hello world!",
          style: TextStyle(
            color: Colors.white,
            fontSize: 28.5,
          ),
        ),
      ),
    );
  }
}

 

 

클래스를 만들어서 위젯이나 이런것을 추가할때는 StatelessWidget 을 상속을 받아야 합니다. 

자동적으로 플러터가 요구하는 데이터,논리,필요한것들을 추가해주기 때문에 상속을 받고 생성자를 만들어

리턴을 하는곳에 () 를 넣어서 그안에 추가할 코드들을 추가해 리턴값을 메인 함수에 넘겨줘서 코딩을 특이한 방법으로 합니다.

 

 

  const GradientContainer({super.key});    <=.  key 는 왜 사용할까요?

 

플러터의서의 key 

위젯 혹은 트리에서 움직일 때마다 현재 상태를 보존, 또는 Element가 Widget을 식별하는 데 사용합니다.

대부분 키를 상관 안써도 되고 자동적으로 컴파일러가 추가해줄때도 있습니다. 하지만 상태를 유지하고 있는

같은 종류의 위젯을 컬렉션에 더하거나, 제거하거나 정렬을 할때 key 가 필요합니다.

 

key 유형

LocalKey(부모 Widget 이하에서 유니크한 키)

• Valuekey :하나의 정보에서 생성되는 키,숫자,문자열 등
• ObjectKey : 객체에서 생성하는 키,같은 타입이라도 객체의 내용이 다르면 다른 키가 된다.
• UniqueKey :특정 Widget 내에서 고유 한 키
• PageStorageKey: 페이지 스크롤 위치가 있는 키

GlobalKey(앱 내에서 고유한 키)

주의할 점은 uniquekey는  자동으로 키를 만들어 주기 때문에 편리하지만 key를 사용해 액세스 할 때는 그 값을 기억할 필요가 있습니다.