아토믹데브_9_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발

 

9강: Flutter의 레이아웃 위젯 - Column과 Row

---

내용 요약

1. Flutter의 레이아웃 위젯인 Column과 Row 소개:
   • Column과 Row는 Flutter의 주요 레이아웃 위젯으로, 각각 수직 및 수평 방향으로 위젯을 배열하는 데 사용됩니다.
   • Column: 위젯들을 세로로 정렬합니다. 주로 텍스트, 이미지, 버튼 등을 세로로 쌓을 때 사용됩니다.
   • Row: 위젯들을 가로로 정렬합니다. 주로 버튼, 아이콘, 텍스트 등을 가로로 나란히 배치할 때 사용됩니다.
   • 이 두 위젯은 자식 위젯들을 배열하는 방식에 유연성을 제공하며, mainAxisAlignment, crossAxisAlignment와 같은 속성을 사용하여 레이아웃의 정렬과 간격을 조절할 수 있습니다.
2. 위젯을 사용한 레이아웃 구성 방법:
   • Column과 Row를 조합하여 복잡한 레이아웃을 구성할 수 있습니다.
   • mainAxisAlignment: 주축(수직 또는 수평)에 따른 정렬 방식을 설정합니다. 예를 들어, MainAxisAlignment.center를 사용하면 위젯들이 중앙에 정렬됩니다.
   • crossAxisAlignment: 교차 축(수직 또는 수평)에 따른 정렬 방식을 설정합니다. 예를 들어, CrossAxisAlignment.start를 사용하면 위젯들이 시작점에 정렬됩니다.
   • children 속성에 배열 형태로 자식 위젯들을 전달하여 레이아웃을 구성합니다.

---

실습

1. Column과 Row를 사용하여 Flutter UI 구성하기

• Flutter 프로젝트 설정:
  • 기존 Flutter 프로젝트를 사용하거나 새로운 프로젝트를 생성합니다.
  • lib/main.dart 파일을 열어 Column과 Row 위젯을 사용하여 UI를 구성합니다.
• Column과 Row 예제 코드:
  • 다음 코드를 사용하여 Column과 Row 위젯을 활용한 간단한 UI를 구성합니다:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: const Text('Column and Row Example'),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: const <Widget>[
                      Icon(Icons.star, color: Colors.red, size: 50),
                      Icon(Icons.star, color: Colors.green, size: 50),
                      Icon(Icons.star, color: Colors.blue, size: 50),
                    ],
                  ),
                  const SizedBox(height: 20),
                  const Text(
                    'This is a Column with a Row inside!',
                    style: TextStyle(fontSize: 20),
                  ),
                  const SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () {},
                    child: const Text('Click Me'),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    }

    

  • 코드 설명:
    • Column 위젯: 화면 중앙에 Column을 사용하여 위젯들을 세로로 정렬했습니다.
    • Row 위젯: Column 내부에 Row를 추가하여 세 개의 아이콘을 가로로 나란히 배치했습니다. mainAxisAlignment: MainAxisAlignment.spaceEvenly를 사용하여 아이콘 간의 간격을 고르게 설정했습니다.
    • Icon 위젯: Row 안에 색상이 다른 세 개의 아이콘을 추가했습니다.
    • Text 위젯: 설명 텍스트를 Column 안에 추가했습니다.
    • ElevatedButton: 버튼을 Column 안에 배치하여, 버튼 클릭 이벤트를 처리할 수 있도록 했습니다.

 

2. 프로젝트 실행 및 UI 확인

• Flutter 프로젝트 실행:
  • 터미널에서 다음 명령어를 실행하여 Flutter 애플리케이션을 실행합니다:

    flutter run

    

     

  • 에뮬레이터 또는 실제 디바이스에서 앱이 실행되며, 위젯들이 Column과 Row를 사용해 적절히 배치된 화면을 확인할 수 있습니다.

    

    flutter 애플리케이션 실행 화면

• UI 조정:
  • mainAxisAlignment와 crossAxisAlignment 속성을 변경하여 위젯들의 정렬 방식을 실험해 보세요. 또한, 위젯의 간격(SizedBox의 height)을 조정하여 레이아웃을 변경할 수 있습니다.

ui 조정한 화면 (위젯 정렬 방식 수정)

수정한 코드들 주석추가,

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Column and Row Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment:
                MainAxisAlignment.spaceAround, // 변경: mainAxisAlignment
            crossAxisAlignment:
                CrossAxisAlignment.center, // 변경: crossAxisAlignment
            children: <Widget>[
              Row(
                mainAxisAlignment:
                    MainAxisAlignment.spaceBetween, // 변경: mainAxisAlignment
                children: const <Widget>[
                  Icon(Icons.star, color: Colors.red, size: 50),
                  Icon(Icons.star, color: Colors.green, size: 50),
                  Icon(Icons.star, color: Colors.blue, size: 50),
                ],
              ),
              const SizedBox(height: 30), // 간격 조정: 30
              const Text(
                'This is a Column with a Row inside!',
                style: TextStyle(fontSize: 20),
              ),
              const SizedBox(height: 30), // 간격 조정: 30
              ElevatedButton(
                onPressed: () {},
                child: const Text('Click Me'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

---

스크린샷

1. Column과 Row 예제 코드:
   • 위에서 작성한 Dart 코드의 스크린샷을 제공합니다. 코드 편집기(예: Visual Studio Code)에서의 작성 화면을 포함합니다.
2. Column과 Row 위젯이 포함된 화면 실행 결과:
   • 에뮬레이터 또는 실제 디바이스에서 실행된 Flutter 앱의 화면을 캡처합니다. 위젯들이 적절히 배치된 UI를 보여주는 스크린샷을 포함합니다.

---

이 강의를 통해 여러분은 Flutter의 주요 레이아웃 위젯인 Column과 Row를 사용하여 UI를 구성하는 방법을 학습하였습니다. 이 위젯들을 활용하면 Flutter 애플리케이션에서 다양한 레이아웃을 유연하게 구현할 수 있습니다. 앞으로의 강의에서는 이러한 레이아웃 위젯들을 활용하여 더욱 복잡하고 실용적인 UI를 구성해 보겠습니다.