Flutter 가로, 세로 공간 나누기

나를 위해 정리하는 Flutter 기초

1. Scaffold로 어플리케이션 공간 나누기
2. 가로 방향 구분
3. 세로 방향 구분

---

1. Scaffold로 어플리케이션 공간 나누기

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(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            width: 10,
            height: 10,
            color: Colors.brown,)
          ),
      )
    );
  }
}

• Scaffold()를 이용해 어플리케이션의 세로 공간 구분 가능
• 배치 기준점은 좌측상단
• appBar : 상단 공간
• body : 가운데 메인 공간
• bottomNavigationBar : 하단 네비게이션 바
• 일부만 사용 가능

출력 화면 확인
 

---

2. 가로 방향 구분

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(),
        body: Row(
          children: [
            Container( width: 100, height: 100, color: Colors.red,),
            Container( width: 100, height: 100, color: Colors.yellow,),
            Container( width: 100, height: 100, color: Colors.green,),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            width: 10,
            height: 10,
            color: Colors.brown,)
          ),
      )
    );
  }
}

• Scaffold() 내부 body : 부분에 Row() 추가
• Row() 를 활용해 가로 방향 구분 가능
• Row( children: [ child ] ) child에 각각의 자식 입력 가능

출력 화면 확인

---

3. 세로 방향 구분

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(),
        body: Column(
          children: [
            Container( width: 100, height: 100, color: Colors.red,),
            Container( width: 100, height: 100, color: Colors.yellow,),
            Container( width: 100, height: 100, color: Colors.green,),
          ],
        ),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            width: 10,
            height: 10,
            color: Colors.brown,)
          ),
      )
    );
  }
}

• 가로 방향과 유사
• Column() : Row()와 같은 역할 수행, 세로방향 구분

출력 화면 확인