플러터(flutter) - Column 가로 정렬 방법 (CrossAxisAlignment)

Column 위젯을 가로로 정렬할때는 crossAxisAlignment 속성을 이용한다.

 

1. CrossAxisAlignment.start

start는 default 값으로 왼쪽에 붙게 한다.

      

      

      

    
    

      <java />
    
import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Column CrossAxisAlignment 예제",
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: double.infinity,
          // Column 위젯 추가
          child: Column(
            // start 속성
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("컨테이너"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

start 속성

 

2. CrossAxisAlignment.center

child 위젯을 가운데로 위치시키는 역할을 한다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: double.infinity,
          // Column 위젯 추가
          child: Column(
            // center 속성
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("컨테이너"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

center 속성

 

 

3. CrossAxisAlignment.end

컨테이너의 맨 오른쪽으로 붙게 하는 역할을 한다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: double.infinity,
          // Column 위젯 추가
          child: Column(
            // end 속성
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("컨테이너"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

end 속성

 

 

4. CrossAxisAlignment.strech

가로로 최대로 확장할때 stretch 속성을 사용한다.

child 위젯에 width 값이 설정되어 있지만, 무시되고 최대로 확장된다.

      

      

      

    
    

      <java />
    
class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          width: double.infinity,
          // Column 위젯 추가
          child: Column(
            // stretch 속성
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: Text("컨테이너"),
              )
            ],
          ),
        ),
      ),
    );
  }
}

strech 속성

 

 

---

5. 다른 글

2021/01/02 - [Flutter] - 플러터(flutter) - Column 세로 정렬 방법 (MainAxisAlignment)

플러터(flutter) - Column 세로 정렬 방법 (MainAxisAlignment)

2021/01/02 - [Flutter] - 플러터(flutter) - Container와 SizedBox의 차이

플러터(flutter) - Container와 SizedBox의 차이