[Flutter00]플러터 기본기 다지기2

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

나만의 Flutter 위젯 분류

위젯들을 이해하고 활용하는 것이 Flutter 개발의 핵심입니다.

위젯의 종류

Flutter는 풍부한 UI 위젯을 제공합니다. 자세한 내용은 공식 문서에서 확인할 수 있습니다.

위젯들을 이해하기 쉽게 직접 나누어 봅시다(공식적인 분류는 아직 존재하지 않는 것 같음)

1. 플랫폼별 위젯

• Material (Android) 위젯
  • Google의 Material Design 가이드라인을 따르는 위젯들입니다.
• Cupertino (iOS) 위젯
  • Apple의 Human Interface Guidelines를 기반으로 한 iOS 스타일 위젯들입니다.

대부분의 경우 Material 위젯을 사용하지만, 플랫폼별 특성을 살리고 싶다면 각각의 위젯을 적절히 활용할 수 있습니다.

2. 기본 위젯 (Basic Widgets)

• Text: 다양한 스타일의 텍스트를 표현합니다.
• Row와 Column: CSS의 flexbox와 유사한 방식으로 수평, 수직 레이아웃을 구성합니다.
• Stack: 위젯들을 겹쳐 배치할 수 있으며, Positioned 위젯과 함께 사용하여 정교한 위치 조정이 가능합니다.
• Container: 다재다능한 박스 위젯으로, 배경, 테두리, 그림자 등 다양한 스타일링이 가능합니다.

이러한 위젯들을 조합하고 커스터마이징하여 원하는 UI를 구현할 수 있습니다. Flutter의 강력함은 이 위젯들의 유연성과 확장성에 있습니다.

상태 관리에 따른 위젯 분류

Flutter에서는 상태 관리 방식에 따라 위젯을 두 가지로 분류합니다:

• Stateless Widget: 내부 상태가 없는 정적 위젯으로, 한 번 렌더링된 후 변경되지 않습니다.
• Stateful Widget: 동적 상태를 가진 위젯으로, 사용자 상호작용이나 이벤트에 따라 UI가 변경될 수 있습니다.

성능 최적화를 위해서는 가능한 Stateless Widget을 사용하는 것이 좋습니다. Stateless Widget은 빌드 시 한 번만 생성되지만, Stateful Widget은 상태 변경 시마다 재빌드되기 때문입니다.

 

Flutter 프로젝트 구조 이해하기

 

Flutter 프로젝트를 효과적으로 개발하기 위해서는 기본 구조를 이해하는 것이 중요합니다. 다음은 주요 구성 요소들입니다

• 프로젝트 폴더 구조
  • 플랫폼별 폴더 (android, ios, linux, macos, web, windows): 각 플랫폼에 필요한 네이티브 코드 포함
  • lib 폴더: 주요 Dart 코드가 위치하는 곳
  • pubspec.yaml: 프로젝트 설정, 의존성, 리소스 등을 관리하는 파일
• 시작점 (Entry Point)
  • lib/main.dart 파일의 main() 함수가 앱의 시작점
  • 새 프로젝트 시작 시 기본 예제 코드는 삭제하고 시작하는 것이 일반적

패키지와 임포트

• 패키지: Flutter와 커뮤니티에서(다른 개발자들) 제공하는 재사용 가능한 코드 모듈
• import 문으로 필요한 패키지와 위젯을 프로젝트에 추가
• 패키지 종류:
  • Dart 기본 패키지 (예: import 'dart:math')
  • Flutter 제공 패키지 (예: import 'package:flutter/material.dart')
  • 외부 또는 사용자 정의 패키지 (예: import '../models/mypackage.dart')

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: 자식 위젯 사이에 공간을 균등하게 배치하고, 첫 번째와 마지막 자식 위젯 앞뒤에 균등한 공간을 배치

 

 

기초적인 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: 앱이 시작할 때 보여질 기본 경로 또는 위젯