Flutter#Row and Column#1

### MainAxisAlignment

 

- mainAxisAlignment 를 이용하여 Row의 주측을 정렬 해보았다.

 

1,main.dart

import 'package:flutter/material.dart';
import 'package:row_and_column/screen/home_screen.dart';

void main() {
  runApp(
    MaterialApp(
      home : homeScreen(),
    ),
  );
}

 

2,home_screen.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea( //상태바 및 바텀을 벗어나지 않도록 
      (상황에 따라 top,right,left,bottom 을 파라미터로 주고 false를 주면 예외할수있다)
        child: Container( //widget들을 담아놓는 역할
          color: Colors.black,
          child: Row(
            // MainAxisAlignment - 주측을 정렬 Column -> 주측이 세로 , Row -> 주측이 가로
            // start - 시작
            // end - 끝
            // center - 중앙
            // spaceBetween - 위젯과 위젯의 사이가 동일하게 배치된다.
            // spaceEvenly - 위젯을 같은 간격으로 배치하지만 시작과 끝의 여백을 만들고 배치한다.
            // spaceAround - spaceEvenly와 동일하지만 시작과 끝의 여백이 반으로 줄어든다.
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Container(
                color: Colors.red,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.orange,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.green,
                width: 50.0,
                height: 50.0,
              ),
              Container(
                color: Colors.yellow,
                width: 50.0,
                height: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

 

mainAxisAlignment: MainAxisAlignment.start