flutter - expanded widget / 액션 메뉴, flutter outline

1. Expanded Widget

widget을 정렬하고 나서 그 위젯으로 화면을 채우고 싶다면 어떻게 하는 게 좋을까?

안드로이드 스튜디오에서 weight를 주듯 비슷하게 하면 된다.

 

Container 위젯이 처음에 3개 있다고 했을 때, 위젯에 마우스를 갖다대고 wrapped width widget을 선택해준다.

그리고 widget을 Expanded로 설정하면 3개의 container가 한 줄에 꽉 차게 된다.

 

이 때, 비율을 다르게 하고 싶다면

flex 값을 주면 된다. 만일 3, 2, 1 이런식으로 값을 주면, 6/3, 6/2, 6/1 의 너비를 갖게된다. (총 너비 6--> flex 더한거)

 

그리고 이미지도 똑같이 Expanded로 위젯으로 감싸서 주면 컨테이너 위에 해당되는 너비 만큼의 이미지가 덮이게 된다. 

body:Row(
        children: <Widget>[
          Expanded(
              child: Image.asset('assets/blue.png'),
              flex:3,
          ),
          Expanded(
            flex: 1, //portion of the width (전체 flex에서)
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.cyan,
              child:Text('1'),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.pinkAccent,
              child:Text('2'),
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              padding: EdgeInsets.all(30.0),
              color: Colors.amber,
              child:Text('3'),
            ),
          ),
        ],
      ),

 

 

 

---

 

액션 메뉴와 flutter outline 을 사용하면 간단하게 정렬, 패딩 등을 추가할 수 있다. 또한 위젯의 위치도 변경할 수 있다. 

액션 메뉴를 사용하려면 해당 위젯을 클릭하고 앞에 나오는 노란 전구를 클릭하면 다음과 같은 메뉴들이 뜬다.

원하는 것을 고르면 코드가 자동으로 바뀐다.

액션메뉴

아니면 flutter outline을 눌러서 할 수도 있다. 해당 위젯을 누르면 해당 위젯의 위치로 이동할 수 있고, 오른쪽 버튼을 누르면 다음과 같은 옵션들이 뜬다. 위에 보이는 아이콘을 눌러서도 center, padding 등을 추가할 수 있다.

flutter outline