기본 위젯

•

Text

•

Image

•

Icon

•

SafeArea

Text

화면에 문자열을 출력하는 위젯

문법

•

Text( 텍스트, 스타일 )

Text( “텍스트”, style: TextStyle( 텍스트 스타일 속성… ) )

Text(
  '표시할 텍스트',
  style: TextStyle(
    // 텍스트 스타일 설정 (옵션)
    fontSize: 16.0,
    fontWeight: FontWeight.bold,
    color: Colors.blue,
  ),
)
Dart
복사

•

'표시할 텍스트': 화면에 표시할 텍스트를 지정합니다.

•

style: 텍스트의 스타일을 설정하는 옵션 속성입니다. TextStyle 클래스를 사용하여 폰트 크기, 두께, 색상 등을 지정할 수 있습니다.

다양한 텍스트 스타일

Text.rich( )

Text.rich( ) 를 사용하면, HTML의 <span> 태그 처럼, 여러 텍스트를 나누어 스타일을 줄 수 있습니다.

Text.rich(
  TextSpan(
    text: '일반 텍스트 ',
    style: TextStyle(fontSize: 16.0, color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: '서식이 다른 텍스트',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
      ),
      TextSpan(
        text: ' 또 다른 일반 텍스트',
        style: TextStyle(fontSize: 16.0, color: Colors.black),
      ),
    ],
  ),
)
Dart
복사

Image

이미지를 출력하는 위젯 - 각각 서버에 있는 이미지, 앱 안에 있는 로컬 이미지를 출력하는 위젯이 있습니다.

Image.network()

네트워크에서 이미지를 가져와 표시하는 Flutter 위젯

Image.network(
  '이미지의 URL',
  width: 100.0,   // 이미지의 가로 크기 (옵션)
  height: 100.0,  // 이미지의 세로 크기 (옵션)
  fit: BoxFit.cover, // 이미지가 어떻게 화면에 맞출지 설정 (옵션)
)
Dart
복사

•

'이미지의 URL': 표시할 이미지의 URL을 지정합니다.

•

width, height: 이미지의 가로 및 세로 크기를 설정합니다. (옵션)

•

fit: 이미지가 화면에 맞게 조정되는 방식을 설정합니다. BoxFit 열거형을 사용하여 지정합니다. (옵션)

AssetImage

앱 안에 있는 로컬 이미지를 출력하는 위젯

Image(
  image: AssetImage('assets/image.png'),
  width: 100.0,  // 이미지의 가로 크기 (옵션)
  height: 100.0, // 이미지의 세로 크기 (옵션)
  fit: BoxFit.cover, // 이미지가 어떻게 화면에 맞출지 설정 (옵션)
)
Dart
복사

•

image: 표시할 이미지를 지정합니다. AssetImage는 앱의 자산 폴더에 있는 이미지를 로드할 때 사용됩니다.

•

width, height: 이미지의 가로 및 세로 크기를 설정합니다. (옵션)

•

fit: 이미지가 화면에 맞게 조정되는 방식을 설정합니다. BoxFit 열거형을 사용하여 지정합니다. (옵션)

pubspec.yaml 에서 image 폴더 설정

앱 내의 로컬 이미지를 사용하려면, pubspect.yaml 에서 이미지 경로를 설정해야합니다.

•

이미지 경로 : my_flutter_app/images

my_flutter_app/
  |- images/
     |- image1.png
     |- image2.png
  |- lib/
  |- pubspec.yaml
  ...
Plain Text
복사

•

pubspec.yaml

flutter:
  assets:
    - images/
YAML
복사

여기서 images/는 프로젝트 루트 디렉토리에 있는 images 폴더를 나타냅니다. 이제 해당 이미지 폴더에 있는 이미지 파일들은 Flutter 앱에서 접근 가능하게 됩니다.

flutter pub get 명령을 사용하여 패키지 의존성을 업데이트해야 합니다.

설정 후에는 앱 코드에서 Image.asset를 사용하여 이미지를 로드할 수 있습니다.

Image.asset('images/image1.png'),
Dart
복사

BoxFit

Image 위젯에서 이미지의 화면에 맞추는 방법을 지정하는 속성값(열거형)

BoxFit은 이미지를 어떻게 조절하고 화면에 맞출지를 결정하는 데 사용되는 속성값입니다.

•

종류

◦

contain

◦

cover

◦

fill

◦

fitWidth

◦

fitHeight

◦

scaleDown

◦

none

BoxFit 값	설명
contain	이미지가 화면에 딱 맞도록 크기를 조절하며, 화면에 모두 나타남
cover	이미지가 화면을 덮도록 크기를 조절하며, 일부가 화면 밖으로 나갈 수 있음
fill	이미지가 화면을 가득 채우도록 크기를 조절하며, 일부가 화면 밖으로 나갈 수 있음
fitWidth	이미지가 화면 너비에 맞도록 크기를 조절하며, 세로 부분이 잘릴 수 있음
fitHeight	이미지가 화면 높이에 맞도록 크기를 조절하며, 가로 부분이 잘릴 수 있음
scaleDown	이미지가 원본 크기보다 작을 경우에만 크기를 조절하거나 이미지를 그대로 표시
none	이미지를 크기를 조절하지 않고 그대로 표시

contain

이미지가 화면에 딱 맞도록 크기를 조절하며, 화면에 모두 나타납니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.contain,
)
Dart
복사

cover

이미지가 화면을 덮도록 크기를 조절하며, 이미지의 일부가 화면 밖으로 나갈 수 있습니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.cover,
)
Dart
복사

fill

이미지가 화면을 가득 채우도록 크기를 조절하며, 이미지의 일부가 화면 밖으로 나갈 수 있습니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.fill,
)
Dart
복사

fitWidth

이미지가 화면 너비에 맞도록 크기를 조절하며, 세로 부분이 잘릴 수 있습니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.fitWidth,
)
Dart
복사

fitHeight

이미지가 화면 높이에 맞도록 크기를 조절하며, 가로 부분이 잘릴 수 있습니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.fitHeight,
)
Dart
복사

scaleDown

이미지가 원본 크기보다 작을 경우에만 크기를 조절합니다. 그렇지 않으면 이미지를 그대로 표시합니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.scaleDown,
)
Dart
복사

none

이미지를 크기를 조절하지 않고 그대로 표시합니다.

Image.network(
  'https://example.com/image.jpg',
  fit: BoxFit.none,
)
Dart
복사

Icon

아이콘을 표시하는 위젯

Icon(
  Icons.star, // 사용할 아이콘 (Material Design Icons)
  size: 24.0, // 아이콘의 크기 (옵션)
  color: Colors.yellow, // 아이콘의 색상 (옵션)
)
Dart
복사

•

Icons.star: 사용할 아이콘을 지정합니다. Icons 클래스는 Material Design Icons를 포함하고 있습니다.

•

size: 아이콘의 크기를 설정합니다. (옵션)

•

color: 아이콘의 색상을 설정합니다. (옵션)

Material Design Icon 찾기

Material Design

Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences.

https://m2.material.io/icons/

Material Symbols and Icons - Google Fonts

Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.

https://fonts.google.com/icons

SafeArea

안전한 공간을 확보해주는 위젯

구현한 UI 가 디바이스의 상태바, 카메라 영역, 노치 영역 등을 침범하지 않게 하기 위해서, 안전 영역을 확보해주는 위젯입니다.

SafeArea(
  child: // 안전한 영역에 배치할 위젯을 설정
)
Dart
복사

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SafeArea Example'),
        ),
        body: SafeArea(
          top: true,  // 상단 안전한 영역 사용
          bottom: true,  // 하단 안전한 영역 사용
          left: true,  // 왼쪽 안전한 영역 사용
          right: true,  // 오른쪽 안전한 영역 사용
          minimum: EdgeInsets.all(16.0),  // 네 방향의 최소 안전 여백
          maintainBottomViewPadding: true,  // 하단 여백 유지
          child: Center(
            child: Text(
              'Hello, SafeArea!',
              style: TextStyle(fontSize: 24.0),
            ),
          ),
        ),
      ),
    );
  }
}
Dart
복사