본문 바로가기
studyLog. 개발/Flutter (Dart)

[flutter 플러터] 41강 강의리뷰_Container Widgets 컨테이너 위젯

by 브라이티_ 2023. 3. 14.
반응형

 

컨테이너 위젯은 화면에 특정 이미지, 텍스트 등의 내용을 삽입하고 싶을 때 사용한다. 혹은 사각형 도형을 삽입하고 싶을 때에도 사용할 수 있다. 컨테이너(도형) 자체에 대한 설정은 괄호 내에서 padding, color 등의 값을 직접 지정해줌으로써 변경할 수 있으며, 구체적인 내용을 컨테이너 내에 넣고자 하는 경우 child 를 사용한다. 아래는 예시 코드이다.

 

              Container(
                color: Colors.white,
                padding: EdgeInsets.all(10.0),
                margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 25.0),
                child: Row( // 가로로 나열
                  children: <Widget>[
                    Icon(
                      Icons.email,
                      color: Colors.teal.shade900),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      'brightty69@naver.com',
                      style: TextStyle(
                        fontSize: 20.0,
                        color: Colors.teal[900],
                        fontFamily: 'Source Sans Pro'),
                      ),
                  ],
                ),
              ) // Container

 

 

*플러터 공식문서: https://api.flutter.dev/flutter/widgets/Container-class.html 

 

Container class - widgets library - Dart API

A convenience widget that combines common painting, positioning, and sizing widgets. A container first surrounds the child with padding (inflated by any borders present in the decoration) and then applies additional constraints to the padded extent (incorp

api.flutter.dev

 

반응형