flutter study - 03 Container 꾸미기

여백주기 - margin, padding

• Container 바깥에 여백을 주고 싶으면 margin을 적용하면된다.
• EdgeInsets.all() 을 쓰면 네 모서리 모두에 같은 값을 적용할수 있다.

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Container(  
        width: 50, height: 50, color: Colors.blue,  
        margin: EdgeInsets.all(20),  
      ),  
    )  
  );  

• Container 내부에 여백을 주고 싶으면 padding을 적용하면된다.

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Container(  
        width: 150, height: 100, color: Colors.blue,  
        padding: EdgeInsets.all(20),  
        child: Text('hi hi hi'),  
      ),  
    )  
  );

• 왼쪽, 위, 오른쪽, 아래 각각 여백을 다르게 적용하고 싶으면 fromLTRB를 적용한다

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Container(  
        width: 150, height: 100, color: Colors.blue,  
        margin: EdgeInsets.fromLTRB(10, 20, 40, 5),  
        child: Text('hi hi hi'),  
      ),  
    )  
  );

테두리

• decoration으로 테두리를 정의할 수 있다.
• 아래처럼 정의하면 에러난다.
• color를 두번 정의했기 때문. height 뒤에 정의한 color를 삭제해줘야한다.

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Container(  
        width: 150, height: 100, color: Colors.blue,  
        decoration: BoxDecoration(  
          border: Border.all(color: Colors.black)  
        ),  
      ),  
    )  
  );

• 아래 처럼 고치면 파란 박스에 검은 테두리를 만들 수 있다.

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Container(  
        width: 150, height: 100,  
        decoration: BoxDecoration(  
          border: Border.all(color: Colors.black),  
          color: Colors.blue  
        ),  
      ),  
    )  
  )

• 박스를 중앙으로 정렬하고 싶으면 Container를 Center()의 child로 넣으면 된다.

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Center(  
        child: Container(  
          width: 150, height: 100, color: Colors.blue,  
        ),  
      ),  
    )  
  );

• Center() 보다는 Align()을 쓰면 alignment 파라미터로 다양한 정렬을 할 수 있다.
• 하단 중앙으로 정렬하고 싶으면 아래처럼 적용한다.
• 상단 중앙은 bottomCenter대신 topCenter를 적용하면된다.

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Align(  
        alignment: Alignment.bottomCenter,  
        child: Container(  
          width: 150, height: 100, color: Colors.blue,  
        ),  
      ),  
    )  
  );

• 박스를 정해진 영역내 꽉 채우게 하고 싶으면 double.infinity 를 적용하면된다.
• 부모 위젯인 Scaffold나 MaterialApp에 사이즈 특성이 정의되 있으면 그 한도를 넘지 않는다.
• height를 정의해놓았으므로 아래 예제에서는 가로로 화면을 가득채운 박스가 생긴다

return MaterialApp(  
    home: Scaffold(  
      appBar: AppBar(title: Text("Hello")),  
      body: Align(  
        alignment: Alignment.topCenter,  
        child: Container(  
          width: double.infinity, height: 100, color: Colors.blue,  
        ),  
      ),  
    )  
  );