[Flutter] 17. 플러터 기초 다지기 - (5) Column과 Row 위젯

[Flutter] 17. 플러터 기초 다지기 - (5) Column과 Row 위젯

*const와 final의 차이

const	final
컴파일 시점에 초기화	런타임 시점에 초기화

-const는 기계어로 바뀌어질 때 초기화된다. const를 사용하면 성능을 높일 수 있다.

-final은 통신을 통해 초기화 될 때, 한 번 초기화된다.

 

 

---

*시나리오 코드

 

(1) Placeholder

import 'package:flutter/material.dart';

void main(){
  runApp(MyHome());
}

// 상태 여부 위젯 선정

class MyHome extends StatelessWidget{
  // Const 생성자
  const MyHome({super.key});

  // build 메서드는 화면에 그림을 그려주는 메서드
  @override
  Widget build(BuildContext context){
    return const Placeholder();
  }

}

 

 

(2) 두 개의 컨테이너 만들기 - Box 

import 'package:flutter/material.dart';

void main(){
  runApp(MyHome());
}

// 상태 여부 위젯 선정

// const, final 개념을 알아야 한다.

// const - 컴파일 시점에 초기화 되는 코드
// final - 런타임 시점에 초기화 되는 코드
class MyHome extends StatelessWidget{
  // Const 생성자
  const MyHome({super.key});

  // build 메서드는 화면에 그림을 그려주는 메서드
  @override
  Widget build(BuildContext context){
    return Column(
      // 자료구조 - 리스트를 나타낸다.
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.red,
          margin:EdgeInsets.symmetric(vertical: 50)
        ),
        Container(
            width: 50,
            height: 50,
            color: Colors.blue
        ),
      ],
    );
  }

}

 

 

(3) MainAxisAlignment

-MainAxisAlignment.end를 설정하면, 해당 위젯이 화면 제일 끝으로 이동한다.

import 'package:flutter/material.dart';

void main(){
  runApp(MyHome());
}

// 상태 여부 위젯 선정

// const, final 개념을 알아야 한다.

// const - 컴파일 시점에 초기화 되는 코드
// final - 런타임 시점에 초기화 되는 코드
class MyHome extends StatelessWidget{
  // Const 생성자
  const MyHome({super.key});

  // build 메서드는 화면에 그림을 그려주는 메서드
  @override
  Widget build(BuildContext context){
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      // 자료구조 - 리스트를 나타낸다.
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.red,
          margin:EdgeInsets.symmetric(vertical: 50)
        ),
        Container(
            width: 50,
            height: 50,
            color: Colors.blue
        ),
      ],
    );
  }

}

 

 

(4) crossAxisAlignment - 주축과 반대축 방향 정렬

import 'package:flutter/material.dart';

void main(){
  runApp(MyHome());
}

// 상태 여부 위젯 선정

// const, final 개념을 알아야 한다.

// const - 컴파일 시점에 초기화 되는 코드
// final - 런타임 시점에 초기화 되는 코드
class MyHome extends StatelessWidget{
  // Const 생성자
  const MyHome({super.key});

  // build 메서드는 화면에 그림을 그려주는 메서드
  @override
  Widget build(BuildContext context){
    return Container(
      color: Colors.yellow,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        // 자료구조 - 리스트를 나타낸다.
        children: [
          Container(
            width: 50,
            height: 50,
            color: Colors.red,
            margin:EdgeInsets.symmetric(vertical: 50)
          ),
          Container(
              width: 50,
              height: 50,
              color: Colors.blue
          ),
        ],
      ),
    );
  }

}