[Flutter] Container

Container

: 그냥 사용하면 : wrap_content

: 가로축 match_parent할 경우 : width : double.infinity

: 세로축 match_parent할 경우 : Expanded로 감싸기

 

- margin : 외부 여백 주기

: EdgeInsets. 클래스로 값을 넣어줌

 

- padding : 내부 여백

: EdgeInsets 클래스로 값을 넣음

 

- decoration :  박스 꾸미기 

: BoxDecoration클래스 사용

:

 

 

로그인 버튼 하나 만들었다... 하...

이거 스스로 창작하는데 3시간은 걸린 것 같다...

Container(
  width: double.infinity,
  margin: const EdgeInsets.symmetric(horizontal: 40),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 1)
  ),
  child: InkWell(
    onTap: () {},
    child: Text('login',
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 20),
    ),
  ),
),

 

 

 

좀 더 보완..++

class CustomLoginButton extends StatelessWidget {
  final String _title;
  const CustomLoginButton(String title, {super.key}):
      _title = title;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: const EdgeInsets.symmetric(horizontal: 40),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(8.0),
          border: Border.all(color: Theme.of(context).primaryColor, width: 1)
      ),
      child: InkWell(
        onTap: () {},
        child: Container(
          margin: const EdgeInsets.symmetric(vertical: 15),
          child: Text(_title,
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Theme.of(context).primaryColor,
              fontWeight: FontWeight.w600,
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }
}