[Flutter/플러터] Column 과 Row 로 간단한 컨테이너 레이아웃

 Column & Row 배치 및 정렬하기

 Column 은 세로로 배치하는 위젯을 말합니다. Container 를 3개 만들고 Column 으로 감싸주었습니다. 기본적으로 아래와 같이 배치가 됩니다. 

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Column'),
        ),
        body: TestColumn(), //별도의 클래스를 body 에 만들어서 테스트합니다.
      ),
    ),
  );
}

class TestColumn extends StatelessWidget {
  const TestColumn({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          color: Colors.orange,
          width: 100,
          height: 100,
        ),
        Container(
          color: Colors.yellow,
          width: 100,
          height: 100,
        ),
        Container(
          color: Colors.green,
          width: 100,
          height: 100,
        ),
      ],
    );
  }
}

 만든 컨테이너를 위아래 혹은 좌우 배치하는 파라미터로 조정할 수 있습니다. 

//생략...
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      //세로 기준으로 가운데 배치합니다. 값을 바꾸어 위아래로 배치할 수 있습니다.
      crossAxisAlignment: CrossAxisAlignment.center,
      //세로 기준이기 때문에 적용이 되지 않고, 전체 컨테이너로 감싸면 적용이 됩니다.
      children: [
//생략...

 Row 는 Column 을 교체만 하면 됩니다. 

  //생략...
  
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      
 //생략...

012

시뮬레이터 구현화면 (Column, 정렬, Row)

 

 여러개의 Container 일 경우 스크롤 하기 (예, Row)

 컨테이너가 여러개를 만들어 아래로 혹은 좌우로 스크롤을 해서 보여주려면 어떻게 할까요? 일단 여러개의 박스를 만들어야 겠지요. 

 아래와 같이 같은 박스를 여러개 만들고 실행해보았습니다. 

//생략... 
 
 children: [
        Container(
          width: 100,
          height: 100,
          color: Colors.grey,
          margin: EdgeInsets.symmetric(horizontal: 8),
        ),
        Container(
          width: 100,
          height: 100,
          
//생략...

공사 표시가 보이면서 오류가 발생합니다.

 

  SingleChildScrollView 로 간단히 스크롤 만들기

 이때 컨테이너를 SingleChildScrollView 위젯으로 감싸기만 하면 됩니다. 방향 조정은 속성을 통해서 진행하면 됩니다. 

//생략...

@override
  Widget build(BuildContext context) {
    return SingleChildScrollView(       //Widget 으로 감싸줍니다. 
      scrollDirection: Axis.horizontal, //이 후 방향 선택을 해주면 됩니다. 
      child: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          
//생략...

실행을 하면 위의 오류가 사라지고 스크롤이 가능함을 확인할 수 있습니다.