[FLUTTER] Column & Row

[Column]

Column 위젯은 세로 방향에 대한 레이아웃을 잡을 때 사용

Column(
  children: [ // 자식 위젯들
    Text("위젯1"),
    Text("위젯2"),
  ],
),

: 리펙터하고싶은 위젯 선택해서 window / macOS : Ctrl + Shift + R 단축키 이용하기

 

[mainAxisSize]

: 세로 방향에 대한 크기

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          color: Colors.green,
          child: Column(
            mainAxisSize: MainAxisSize.max, // 세로 길이 : max(default) -기본값이므로 해당 코드 지워도 동일한 결과
            children: [
              Container(
                height: 100,
                width: 100,
                color: Colors.amber,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.blue,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.pink,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

여기서 중요하게 볼것은, mainAxisSize: MainAxisSize.max 

max로 지정하면 : 부모를 가득 채우는것 (이게 default값)
min으로 지정하면 : 자식의 크기만큼만 차지

[mainAxisAlignment]

세로 방향에 대한 정렬

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          color: Colors.green,
          child: Column(
            // Column이 가진 Child들을 어떻게 정리할건지 나타냄
            mainAxisAlignment: MainAxisAlignment.start, // 세로 방향 정렬 : start(default)
            children: [
              Container(
                height: 100,
                width: 100,
                color: Colors.amber,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.blue,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.pink,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

여기서 중요하게 볼것은, mainAxisAlignment: MainAxisAlignment.start

start : 시작에 배치 (default값)
center : 중앙에 배치
end : 끝에 배치
spaceBetween : 양끝에 배치하고 등분
spaceAround : 균등하게 나누고 공간의 절반을 앞뒤에
spaceEvenly : 균등하게 등분

 

[crossAxisAlignment]

가로 방향에 대한 정렬

/// Copyright 2022. ⓒ DevStory.co.kr All rights reserved.

// ignore_for_file: prefer_const_constructors
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Container(
          width: double.infinity, // Column의 CrossAxis는 부모 및 자식의 크기에 영향을 받습니다.
          color: Colors.green,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center, // 가로 방향 정렬 : center(default)
            children: [
              Container(
                height: 100,
                width: 100,
                color: Colors.amber,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.blue,
              ),
              Container(
                height: 100,
                width: 100,
                color: Colors.pink,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

여기서 중요하게 볼것은, crossAxisAlignment: CrossAxisAlignment.center,

start : 시작에 배치 (default값)
center : 중앙에 배치
end : 끝에 배치
stretch : 늘려서 가득 채움

---

[Row]

Row 위젯은 가로 방향에 대한 레이아웃을 잡을 때 사용

• mainAxisAlignment : 가로 방향에 대한 정렬
• crossAxisAlignment : 세로 방향에 대한 정렬

body: Column(
        children: [
          // 이미지
          Image.network(
            "https://cdn2.thecatapi.com/images/kat_7kqBi.png",
            height: 400,
            width: double.infinity,
            //  이미지의 비율을 유지하면서 고정된 폭과 높이에 맞추어 이미지를 적절히 잘라서 보여줌.
            fit: BoxFit.cover,
          ),
          Row(
            children: [
              IconButton(
                icon: Icon(CupertinoIcons.heart, color: Colors.black),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(CupertinoIcons.chat_bubble, color: Colors.black),
                onPressed: () {},
              ),
              Spacer(), // 자신이 커질수있는만큼 최대한 커지면서 공백을 만들어주는 위젯
              IconButton(
                icon: Icon(CupertinoIcons.bookmark, color: Colors.black),
                onPressed: () {},
              )
            ],
          )
        ],
      ),

아래 그림처럼 위젯 세개를 가로방향으로 잡아줄때 사용! 

Spacer() 위젯 : 빈 공간을 차지하는 위젯 (자신이 커질수있는만큼 최대한 커짐!)