Flutter 위젯

1. Container

container은 말그대로 무언가를 담는 그릇 정도로 생각하면 될 것 같다.

예시코드에서는 Text를 담았다.

그리고 container를 통해 그릇의 틀 모양도 만들어줄 수 있다.

여러가지 기능들을 통해서도 가능하고,

decoration이라는 옵션을 만들어서 container를 디자인할 수도 있다.

void main() {
  runApp(MaterialApp(
      home: Scaffold(
    appBar: AppBar(
      title: Text('Study to Container'),
    ),
    body: CustomContainer(),
  )));
}

class CustomContainer extends StatelessWidget {
  const CustomContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: 50,
      //or Color(0xFF052D41) <- 0x 뒤에 투명도 R G B 순 배열
      //원래 B3E5FCFF 이면 R G B 투명도 순이다, 각 값을 16진수로 바꾼 수
      padding: EdgeInsets.fromLTRB(10, 12, 10, 12),
      //내부에 컨텐츠 좌상우하 여백
      margin: EdgeInsets.symmetric(vertical: 25,horizontal: 30),
      //컨테이너 외부 여백 수평, 수직
      decoration: BoxDecoration(//container 꾸미기, 외부에 color가 있으면 오류남
        color: Colors.lightBlue.shade100,
        border: Border.all(color: Colors.red,width: 5,style: BorderStyle.solid),//외곽선
        borderRadius: BorderRadius.circular(20),//150이면 구형태
        boxShadow: [
          BoxShadow(color: Colors.grey,offset: Offset(6,6),blurRadius: 10,spreadRadius: 10),
          BoxShadow(color: Colors.blue,offset: Offset(-6,-6),blurRadius: 10,spreadRadius: 10)
        ]
      ),
      child: Center(child: Container(
          color: Colors.orange,
          child: Text('Hello Container'))),
      //center로 감싸기
    );
  }
}

Container의 예시 코드와 적용한 화면 모습이다.