Flutter Column, Button, padding

강정우·2023년 5월 9일

flutter

Flutter&Dart

목록 보기

13/87

1. Column

자세히 보면 Container widget에도 child 인수가 있고 또 Center widget에서 child 인수가 있는데 만약 여러개의 child를 갖고싶을 땐 어떻게 하면 될까?

위 사진을 보면 알 수 있어 어떻게 child 요소들을 놓고싶냐에 따라 Column widget을 사용하든 row widget를 사용하면 된다.
Column() 생성자 함수는 const를 지원하지 않고 변수로 List<Widget>이라는 배열을 인수로 받는다.

mainAzisSize를 통하여 작업을 하면 된다. 여기서 왜 mainAxisSize에서 main밖에 없을까? 왜? vertical, horizon이 아닐까? 정답은 column에 있다. Column 자체가 새로축이기 때문에 "main"Axis가 새로축이 되는 것이다.

mainAxisAlinment

물론 Column에서 mainAxisSize가 아닌 mainAxisAlignment.center를 사용한다면 Center 위젯처럼 사용가능하다.

crossAxisAlignment

Column을 기준으로 main이 수직이기 때문에 crosssms 자연스레 가로정렬이 된다.
이때 .stretch 속성을 사용하면 최대한의 길이를 차지하게 된다.

2. Button

플러터는 3가지 기본 button 양식을 제공한다. 또한 Button은 Colors 처럼 const하지 않다.

ElevatedButton : 배경색과 약간의 그림자가 있는 버튼
1-2. ElevatedButton.icon : icon으로 대체할 수 있는 버튼
OutlinedButton : 배경색 없이 테두리만 있는 버튼을 보여주는 버튼
TextButton : 누를 수 있는 텍스트만 있는 버튼

위에서 볼 수 있듯 3가지 위젯 모두 2개의 인수를 취한다.

child : button 안에 들어갈 다른 위젯 통상 Text 위젯이 들어간다.
onPress : 버튼 클릭시 동작할 함수를 선언한다.

그런데 함수역시 객체지향언어에서는 객체이다.

이때 함수를 넘겨줄 수 있는 방법은 2가지가 있다.

타입을 선언하지 않고 바로 실행해버리기 즉, 익명함수이다.
- 이렇게 하면 해당함수는 내부적으로 실행된다. 즉, 해당 블럭에서만 사용되고 다른곳에서는 사용할 수 없다.
정통적으로 함수를 선언한다.

이때 사용처에서는 실행하진 않고 그냥 pointing만 한다.

위 사진은 코드를 토대로 나온 결과값이다. 그런데 조금 이상하다. Center widget이 적용되지 않은 듯 하다.
하지만 이는 틀렸다. Center widget은 적용이 되었는데 Column widget이 새로라인을 전부 차지하고 있는 것이다.
즉, 가로로는 가운데 정렬이지만 새로로은 height이 100vh라서 전체를 꽉 채우고 있는 것이다.
이를 어떻게 해결할까?

OutlinedButton

스타일링을 OutlinedButton 객체가 가지고있는 styleFrom() 메서드를 이용하여 매우 쉽게 스타일링이 가능하다.
위 코드에서 foregroundColor는 textcolor를 의미한다.

.icon 메서드

만약 당신이 버튼을 클라이언트로부터 어떠한 아이콘으로 대체를 해달라고 요청을 할 수 있다.
그럴땐 굉장히 간단하게 .icon을 이용하면 된다.

다만 이때 주의할 점은 더이상 child 속성이 아니라 label 속성으로 바꿔줘야한다는 것이다.

또한 icon으로 대체를 하려면 icon 매개변수를 선언해줘야하고 이는 Icon이라는 Widget을 넣어줘야한다.
그리고 Icon 생성자 함수는 IconData를 넣어줘야하는데 이는 flutter에서 미리 만들어둔 Icons라는 객체를 사용하면 편하다.

border 먹이기

RoundedRectangleBorder 로 만들면 된다.

주의사항 (속성 순서)

위 사진에서 알 수 있듯 widget 인수가 들어간 파라미터를 가장 뒤로 보내야한다. 이는 플러터가 권장하는 디자인 패턴이다.

3. 여백주는 방법

padding

padding은 EdgeInsetsGeometry라는 객체를 받는다.
해당 객체는 EdgeInsets라는 객체의 다양한 생성자함수로 생성이 가능하다.

padding: EdgeInsets.all(벨류)

.class{
	padding : 벨류px
}

padding: EdgeInsets.only(top: )

.class{
	padding-top : 벨류px
}

또한 아래와 같이 EdgeInsets객체를 통하여 .all 이라는 속성 말고 symmetric이라는 속성으로 가로, 세로를 별도로 지정할 수 있다.
또한 fromLTRB이라는 속성값으로 각각 left, top, right, bottom값을 각기 지정할 수 있다.

SizedBox

padding과 다르게 padding을 줄 수 있는 방법이기도 하다.
이 SizedBox의 특이한 점은 Sized라는 과거형에서 알 수 있듯 "사이즈가 지정된"이다. 그래서 여타 다른 Container 위젯이나 다른 Text 위젯등 처럼 내부 요소에 따라 최소 크기가 결정되는데 이 Sized Box는 그런거 필요없고 넘어가는 요소는 그냥 다 잘라버린다.
이때 height 속성을 이용해 padding 처럼 사용한다.

SizedBox를 Center() 위젯 대신 사용하기 (double.infinity)

Center 위젯으로 Column위젯을 감싼다음 Column위젯의 argument값 mainAxisSize를 min으로 설정해도 되지만
SizedBox를 이용해서 충분히 가능하다.
바로 SizedBox의 width 값을 이용하는 것이다.
하지만 width 값을 css의 100% 와 같은 기능을 하는 값이 필요한데 그것이 바로 double.infinity이다.

위 사진은 적용 전이고 아래코드를 작성한 후

class _QuestionsScreenState extends State<QuestionsScreen> {
  @override
  Widget build(context) {
    return SizedBox(
      width: double.infinity,
      child: Column(
        children: [
          const Text('The Question'),
          const SizedBox(height: 30),
          ElevatedButton(onPressed: () {}, child: const Text('Answer 1')),
          ElevatedButton(onPressed: () {}, child: const Text('Answer 2')),
          ElevatedButton(onPressed: () {}, child: const Text('Answer 3')),
          ElevatedButton(onPressed: () {}, child: const Text('Answer 4'))
        ],
      ),
    );
  }
}