[Flutter] Flutter Widget

* Text

Text(
   'Hello World!!!',
   style: TextStyle(
      color: Colors.red,
      fontSize: 20.0,
      fontStyle: FontStyle.italic
   ),
)

 

 

* Row : 가로로 레이아웃 생성

Row(
   //mainAxisAlignment : 자식의 수평 배열 생성
   //MainAxisAlignment.spaceEvenly : 균등 배치
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: [
      Image.asset('images/pic1.png'),
      Image.asset('images/pic2.png'),
      Image.asset('images/pic3.png'),
   ],
)

 

 

* Column : 세로로 레이아웃 생성

Column(
   //mainAxisAlignment : 자식의 수평 배열 생성
   //MainAxisAlignment.spaceEvenly : 균등 배치
   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
   children: [
      Image.asset('images/pic1.png'),
      Image.asset('images/pic2.png'),
      Image.asset('images/pic3.png'),
   ],
)

 

 

* Stack : 서로 위에 배치 가능.

* Container : 직사각형의 시각적 요소 생성. BoxDecoration 배경, 테두리 또는 그림자 등으로 꾸미기 가능.

Stack(
   //alignment : stack에서 위치가 지정되지 않은 하위 위젯 및 부분적으로 위치가 지정된 하위 위젯 정렬
   alignment: const Alignment(0.0, 0.0),
   children: [
      //원 생성
      CircleAvatar(
         backgroundImage: AssetImage('images/cat.jpg'),
         radius: 100,
      ),
      //Container : common painting, positioning, sizing widget들을 결합하는 위젯
      Container(
         //text box decoration
         decoration: BoxDecoration(
         color: Colors.black45,
         ),
         child: Text(
            'CAT',
            style: TextStyle(
               fontSize: 20,
               fontWeight: FontWeight.bold,
               color: Colors.white
            ),
         ),
      )
   ],
)

 

 

 

 

참고 : blog.naver.com/PostView.nhn?blogId=getinthere&logNo=221664683505&parentCategoryNo=34&categoryNo=&viewDate=&isShowPopularPosts=false&from=postList

flutter 챕터3 - Flutter 4강 대표적인 위젯(Widget)

flutter-ko.dev/docs/development/ui/layout

Flutter 레이아웃