플러터 기본 위젯 예제(MaterialWidget) - 위젯을 상하 좌우로 배치

많은 분들에게 기본적인 도움이라도 되길 바라며, 학습 목적 외에 상업적 이용은 금합니다. 

 

출처: 패스트캠퍼스 15개 프로젝트로 실무까지 끝내는 Dart & Fultter 앱 개발, 챗 gpt

출처: https://forfire700.tistory.com/149 [IT STUDY CAFE:티스토리]

tip: column 행을 의미하며, row는 열을 의미한다. 그리고 Axis(행 또는 열의 이동방향과 수평한 방향 ㅣ,ㅣ ㅡ,ㅡ), Cross(행 또는 열의 이동방향과 수직한 방향 ㅣ,ㅡ  ㅡ,ㅣ)을 의미합니다.

 

---

상하

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('widget을 상하로 배치하기'),
          centerTitle: true,
        ),
        body: Body(),
      ),
    ),
  );
}
 
class Body extends StatelessWidget {
  const Body({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
              width: 100,
              height: 80,
              color: Colors.red,
              child: Text('Container 1')),
          Container(
              width: 100,
              height: 80,
              color: Colors.green,
              child: Text('Container 2')),
          Container(
              width: 100,
              height: 80,
              color: Colors.blue,
              child: Text('Container 3')),
        ],
      ),
    );
  }
}
 

---

좌우

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('widget을 좌우로 배치하기'),
          centerTitle: true,
        ),
        body: Body(),
      ),
    ),
  );
}
 
class Body extends StatelessWidget {
  const Body({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Container(
      height: double.infinity,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
 
        children: [
          Container(
              width: 100,
              height: 80,
              color: Colors.red,
              child: Text('Container 1')),
          Container(
              width: 100,
              height: 80,
              color: Colors.green,
              child: Text('Container 2')),
          Container(
              width: 100,
              height: 80,
              color: Colors.blue,
              child: Text('Container 3')),
        ],
      ),
    );
  }
}
 

---

상화좌우

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('widget을 상하좌우로 배치하기'),
          centerTitle: true,
        ),
        body: Body(),
      ),
    ),
  );
}
 
class Body extends StatelessWidget {
  const Body({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                  width: 100,
                  height: 80,
                  color: Colors.red,
                  child: Text('Container 1')),
              Container(
                  width: 100,
                  height: 80,
                  color: Colors.green,
                  child: Text('Container 2')),
              Container(
                  width: 100,
                  height: 80,
                  color: Colors.blue,
                  child: Text('Container 3')),
            ],
          ),
          Container(
            width: 300,
            height: 120,
            child: Text('Container 4'),
            color: Colors.grey,
          )
        ],
      ),
    );
  }
}
 

---

가로 스크롤 바(수직 스크롤 바는 여기서 조금만 수정하시면 되는데, 한번 도전해보시면 좋습니다.)

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('widget을 상하좌우로 배치하기'),
          centerTitle: true,
        ),
        body: Body(),
      ),
    ),
  );
}
 
class Body extends StatelessWidget {
  const Body({super.key});
 
  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
 
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),Container(
            color: Colors.grey,
            width: 100,
            height: 100,
            margin: EdgeInsets.symmetric(horizontal: 8),
          ),
        ],
      ),
    );
  }
 
}