[Flutter] Widget / 위젯 - 화면 표시용 위젯

위젯 : 플러터의 UI를 구성하는 모든 요소.

 

 

화면 표시용 위젯

버튼과 더불어 화면 구성시 가장 자주 사용되는 위젯인 텍스트, 이미지, 아이콘, 프로그래스바 등

 

 

 

Text

글자를 표시하는 위젯

body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              fontSize: 40.0,
              fontStyle: FontStyle.italic,
              fontWeight: FontWeight.bold,
              color: Colors.red,
              letterSpacing: 4.0
            ),
          ),
        )

Text 클래스의 첫번째 인수(텍스트명)는 필수 프로퍼티로 이름 없는 인수이다.

style 뿐만 아니라 모든 이름 있는 인수는 옵션 성격이므로 필요한 것을 선택적으로 사용할 수 있다.

 

+ Text 클래스 원형

Text(String data, {Key? key, TextStyle? style, StrutStyle? strutStyle, TextAlign? textAlign, TextDirection? textDirection, Locale? locale, bool? softWrap, TextOverflow? overflow, double? textScaleFactor, int? maxLines, String? semanticsLabel, TextWidthBasis? textWidthBasis, TextHeightBehavior? textHeightBehavior})

 

 + 선택이 아닌 인수에 이름을 굳이 넣어주면 어떻게 되나

class hello {
  void  hi(int a, {int? b}) {
    
  }
}
void main() {
  hello a = hello();
  
//   a.hi(a: 10, b: 5); // 컴파일 안됨.
  a.hi(10, b: 5); // 이렇게 해야 됨.
}

=> 이름은 선택일 때 넣는다.

 

---

 

Image

이미지를 표시하는 위젯.

 

1. 네트워크에서 끌어오는 방법

Image.network('https:// ... '); // URL

2. 프로젝트 폴더 내에 비치한 파일을 사용하는 방법

프로젝트 내에 특정 이름의 폴더를 만들고, 그 안에 이미지를 넣는다. 폴더 이름은 마음대로 해도 된다.

나는 assets으로 했다.

 

그다음에 pubsec.yaml 파일에 들어간다. 우리가 폴더를 만들고 이 폴더 안을 사용할 것이니, 프로젝트에 등록하는 과정이 필요한 것이다.

보면 이런 부분이 있는데, assets: 부분의 주석을 해제해주고 아래와 같이 수정해준다.

나같은 경우 폴더명을 assets로 했으니 - assets/ 를 추가하였는데,

만약 다른 폴더이름으로 했어도 - 폴더명/ 이런식으로 추가해주면 된다.

그리고 나서, 위 사진에서 오른쪽 위에 Pub get 버튼이 있는데, 이걸 눌러서 변경사항을 업데이트 시킨다.

 

그리고 이제 이미지 위젯을 사용해 표시한다.

Image.asset('assets/sample.jpg')

샘플 이미지가 잘 디스플레이된다.

 

---

 

Icon

아이콘 위젯은 단독으로도 사용하지만 메뉴나 리스트, 버튼과의 조합으로 사용한다.

머태리얼 디자인용 기본 아이콘들은 Icons 클래스에 상수로 미리 정의되어 있다.

body: Center(
          child: Icon(
            Icons.home,
            color: Colors.red,
            size: 60.0,
          ),
        )

 

---

 

Progress

로딩 위젯. 일반적으로 다른 화면 위에 겹쳐서 표시하므로 Stack 위젯으로 겹쳐서 사용한다.

1. 둥근 형태의 프로그래스

CircularProgressIndicator()

2. 선 형태의 프로그래스

LinearProgressIndicator()

 

---

 

CircleAvatar

프로필 화면 등에 많이 사용되는 원형 위젯.

child 프로퍼티에 정의한 위젯을 원형으로 만든다.

body: Center(
          child: CircleAvatar(
            child: Icon(Icons.person),
          ),
        )

 

만약 네트워크상에 존재하는 이미지를 표시한다면, child 프로퍼티가 아닌 backgroundImage 프로퍼티에

NetworkImage 클래스의 인스턴스를 지정한다.

CircleAvatar(
	backgroundImage: NetworkImage([URL]),
    )

 

---