Container

Container는 자식 위젯을 한개 포함하며, 크기를 지정할 수 있다.
크기를 지정하지 않으면 자식 위젯의 크기에 맞춰지고, 자식 위젯이 없거나 크기가 지정되어 있지 않으면 width와 heighnt은 최대값으로 고정된다.
UI커스텀 하기 좋다.

Decoration

Container의 decoration 속성에 BoxDecoration위젯을 주면 Container를 꾸밀 수 있다.

BoxDecoration

• color : 컨테이너 색상을 정할 수 있다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              height: 150,
              width: 150,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.red,
              ),
              child: Text('Main'),
            )
        )
    );
  }
}

• image : 이미지를 지정할 수 있다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              height: 150,
              width: 150,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.red,
                image: DecorationImage(
                  image: AssetImage(
                    'images/flutter1.png'
                  )
                )
              ),
              child: Text('Main'),
            )
        )
    );
  }
}

• border : 테두리를 지정할 수 있다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              height: 150,
              width: 150,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.red,
                border: Border.all(
                  color: Colors.black,
                  style: BorderStyle.solid,
                  width: 10
                )
              ),
              child: Text('Main'),
            )
        )
    );
  }
}

• shape : 모양을 바꿀 수 있다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              height: 150,
              width: 150,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.red,
                shape: BoxShape.circle
              ),
              child: Text('Main'),
            )
        )
    );
  }
}

• borderRadius : 컨테이너 모서리부분을 설정할 수 있다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              height: 150,
              width: 150,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(10.0)
              ),
              child: Text('Main'),
            )
        )
    );
  }
}

• vertical, horizontal : 위아래, 왼오른쪽만 radius를 설정

borderRadius: BorderRadius.vertical(
	bottom: Radius.circular(10)
)

• gradient : Gradient를 설정

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
              height: 150,
              width: 150,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.red,
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: [
                    Colors.red,
                    Colors.blue,
                  ]
                )
              ),
              child: Text('Main'),
            )
        )
    );
  }
}

• 색과 위치를 더 지정 가능

colors: [
  Colors.red,
  Colors.yellow,
  Colors.green,
  Colors.blue,
],
stops: [0.1, 0.4, 0.6, 0.9]

• boxShadow : 컨테이너 그림자를 줄 수 있다.

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: Container(
      height: 150,
      width: 150,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.red,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 5.0,
            spreadRadius: 3.0,
          ),
        ],
      ),
      child: Text('Main'),
    )));
  }
}

• 그림자의 위치를 수정할 수 있다.

boxShadow: [
  BoxShadow(
      color: Colors.grey,
      blurRadius: 5.0,
      spreadRadius: 3.0,
      offset: Offset(
        3,
        3,
      )),
]

---

ClipBehavior

clipbehavior를 사용하면 자식이 범위 밖을 지나면 자동으로 잘라준다

• Clip.hardEdge
• Clip.antiAlias
• Clip.antiAliasWithSaveLayer
  아래로 갈수록 ui 성능은 올라가지만 리소스를 많이 먹는듯..?

참조
어항
윤세영