Flutter 기본기 다지기 2

Basic Widget 살펴 보기

1. layout 위젯
   • visible 위젯을 원하는 위치에 배치하기 위해, layout 위젯을 선택
   • 간단하고 기본적인 layout 위젯은 Container와 Center 위젯
     • 전체 layout 위젯 리스트: https://docs.flutter.dev/development/ui/widgets/layout
2. visible 위젯
   • 간단하고 기본적인 visible 위젯은 다음과 같음

Text 위젯

Text('Hello World')

 

Image 위젯

Image.asset('images/lake.jpg')

 

Icon 위젯

Icon(Icons.home)

 

 

3.visible 위젯을 layout 위젯 안에 넣음

• 모든 layout 위젯은 하나의 자식을 가질 수 있는 위젯과 여러 자식을 가질 수 있는 위젯으로 나눔
  • 하나의 자식을 가질 수 있는 위젯은 child라는 property를 사용해야 함
  • 여러 자식을 가질 수 있는 위젯은 children이라는 property를 사용해야 함
• Center 위젯은 수직/수평의 가운데로 정렬하게 하는 위젯
• visible 위젯은 배경 방향을 지정해줘야 함

 

마지막 라인에 콤마(,)를 붙이면, 다른 언어는 에러가 나지만, Flutter에서는 콤마(,)를
마지막 라인에 붙이는 것을 추천 함.

Center(
  // Text('Hello World') 만 작성하면, 배경 방향을 알 수 없으므로 에러
  // TextDirection.ltr : 왼쪽에서 오른쪽으로 기술
  // TextDirection.rtl : 오른쪽에서 왼쪽으로 기술
  child: Text('Hello World', textDirection: TextDirection.ltr),
  // Icon 테스트
  // child: Icon(Icons.star, textDirection: TextDirection.ltr),
),

 

Container 위젯

• 박스를 지정하여 padding, margin, border, background color 등을 설정할 수 있는 기본 위젯
• Container 내에 여러 위젯을 나열하는 것이 일반적임

margin과 padding

• 전부: EdgeInsets.all(10),
• 특정 지정: EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
• 인덱스, 위로, 오른쪽, 아래쪽: EdgeInsets.fromLTRB(50, 10, 30, 40),
• 가로, 세로: EdgeInsets.symmetric(horizontal: 20, vertical: 50),

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amber,
      margin: EdgeInsets.all(10),
      child: Center(
        child: Text('Hello World', textDirection: TextDirection.ltr),
      ),
    );
  }
}

 

border

• Container 위젯에 border를 적용하려면, decoration: BoxDecoration()을 넣어줘야 함

 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
	    // color: Colors.blue,  decoration: color 사용시 선언하면 오류 발생! 
      margin: EdgeInsets.all(10),
      decoration: BoxDecoration(
        // Container 의 color 선언과 decoration: BoxDecoration() 을 둘다 적용하면,
        // BoxDecoration() 안에서 color 를 선언하라고 가이드함(에러남)
        color: Colors.blue,
        border: Border.all(
          color: Colors.amber,
          width: 5,
        ),
      ),
      child: Center(
        child: Text('Hello World', textDirection: TextDirection.ltr),
      ),
    );
  }
}

 

border radius

• 전부 적용1: BorderRadius.circular(10)
• 전부 적용2: BorderRadius.all(Radius.circular(10))
• 특정 방향만 적용: BorderRadius.only(topLeft: Radius.circular(10))

borderRadius: BorderRadius.only(
  topLeft: Radius.circular(50),
  topRight: Radius.circular(50),
  bottomLeft: Radius.circular(50),
  bottomRight: Radius.circular(50),
),

 

Row와 Column 위젯

• Row 위젯: 위젯들을 수평으로 배치하는 위젯
• Column 위젯: 위젯들을 수직으로 배치하는 위젯
• Column과 Row 위젯은 children property를 가져서, 여러 자식을 가질 수 있음
  • children은 여러 자식을 가지므로, [] 리스트로 위젯을 표기해야 함

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          color: Colors.red,
          width: 50,
          height: 50,
          margin: EdgeInsets.all(10),
        ),
        Container(
          color: Colors.blue,
          width: 50,
          height: 50,
          margin: EdgeInsets.all(10),
        ),
      ],
    );
  }
}

 

mainAxisAlignment

: Row 위젯에서는 수평 정렬, Column 위젯에서는 수직 정렬을 설정

• start: 주축의 시작점에서 자식 위젯들을 배치
• end: 주축의 끝점에서 자식 위젯들을 배치
• center: 주축의 중간에 자식 위젯들을 배치
• spaceBetween: 자식 위젯 사이에 공간을 균등하게 배치
• spaceAround: 자식 위젯 사이에 공간을 균등하게 배치하고, 첫 번째와 마지막 자식 위젯 앞뒤에 균등한 공간의 절반을 배치
• spaceEvenly: 자식 위젯 사이에 공간을 균등하게 배치하고, 첫 번째와 마지막 자식 위젯 앞뒤에 균등한 공간을 배치

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
      Row(
        textDirection: TextDirection.ltr,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(color: Colors.red, width: 50, height: 50),
          Container(color: Colors.blue, width: 50, height: 50),
          Container(color: Colors.yellow, width: 50, height: 50),
        ],
      ),
    ]);
  }
}

 

기초적인 Flutter 화면을 구성하는 패턴

1. 'package:flutter/material.dart' 임포트
2. MaterialApp으로 메인 위젯 트리 감싸기
3. title과 theme과 같은 속성 설정
4. home : 속성을 주 페이지로 정의
5. Scaffold:
   • 앱의 시각적 레이아웃에 대한 기본 구조 제공
   • appBar 및 body와 같은 속성 설정
     • 레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)
       • 각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함
     • body에 실제 화면 관련 위젯 정의
6. 'package:flutter/material.dart' 임포트
7. MaterialApp으로 메인 위젯 트리 감싸기
8. title과 theme과 같은 속성 설정
9. home : 속성을 주 페이지로 정의
10. Scaffold:
    • 앱의 시각적 레이아웃에 대한 기본 구조 제공
    • appBar 및 body와 같은 속성 설정
      • 레이아웃 요소 제공 (예: AppBar, Drawer, BottomNavigationBar)
        • 각 구성요소는 또 다른 위젯으로 각각의 사용법은 이후에 정리하기로 함
      • body에 실제 화면 관련 위젯 정의

MaterialApp의 주요 property와 사용법

• theme: 앱의 전체 테마, 색상 구성 등이 포함 (예, theme: ThemeData(primarySwatch: Colors.red))
• home: 앱이 시작할 때 보여질 기본 경로 또는 위젯

home: Scaffold(
  appBar: AppBar(title: const Text('FunCoding')),
),

 

---

이 글에서는 Flutter 앱 개발을 위한 기본 layout과 visible 위젯 사용법, Row와 Column 정렬 옵션, Container 설정, 그리고 MaterialApp과 Scaffold를 활용한 앱 구조 설계를 다뤘습니다. 이 내용을 참고해 더 쉽고 체계적으로 Flutter 앱을 만들어보세요! 😊