Flutter 위젯 만들기(text, image, icon, box)

나를 위해 기록하는 Flutter 기초 위젯을 만드는 방법

1. 화면 표시하기
2. text 위젯
3. image 위젯
4. icon 위젯
5. box 위젯

안드로이드 스튜디오 사용

---

1. 화면 표시하기

안드로이드 스튜디오 상단에서 형광펜을 칠한 부분을 클릭 후 출력 디바이스를 선택
크롬 선택 후 Run 하면 크롬 브라우저로 확인 가능

---

2. text 위젯 만들기

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: Text('text')
    );
  }
}

• 코드는 Dart 언어이지만, 해당 선택지가 없어 대충 C++ 선택
• home: Text('text') 로 텍스트 위젯 생성 가능
• 위젯의 첫 글자는 대문자로 시작하며 소괄호 속에 표시될 내용 입력

 
출력 화면 확인

---

2. image 위젯

1. 이미지 파일을 담을 폴더 생성
project 레포 하위에 "assets" 이름의 레포 생성
 
2. 이미지 파일 폴더 등록

flutter:
  assets:
    - assets/

pubspec.yaml 파일을 열어 중하단부의 flutter: 아래에 assets 등록 코드 추가
 
3. 사용을 원하는 사진 assets 내부로 이동
 
4. 이미지 위젯 생성

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: Image.asset('image.png')
    );
  }
}

• Image.asset('이미지경로')로 이미지 위젯 생성 가능
• 웹 브라우저 확인용으로 사용할 때를 제외하고는 이미지 경로를 올바르게 'assets/filename'으로 설정

 

출력 화면 확인

---

3. icon 위젯

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: Icon(Icons.face)
    );
  }
}

• home: Icon(Icon,name)으로 아이콘 위젯 생성 가능
• 아이콘 이름은 플러터 홈페이지에서 목록 확인

출력 화면 확인

---

4. box 위젯

Container와 Sizedbox 이용 가능
 
1. Container

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: Center(
        child: Container( width: 100, height: 100, color: Colors.black, ),
      )
    );
  }
}

• Center 등 요소로 배치 지정 후 child 이용
• Container()로 생성 가능
• 스타일 지정 시 소괄호 안에 지정하며 분리는 쉼표 사용
• 숫자의 단위는 LP, 100LP는 2.4cm 정도

출력 화면 확인
 
 
2. Sizedbox

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: Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: Container( color: Colors.red )
          ),
      )
    );
  }
}

• box를 생성한다는 점에서 Container와 유사
• child 위젯의 크기를 조정하기 위한 목적이나 빈공간을 두기 위해 사용

출력 화면 확인
 
 
 
 
초보라서 틀린 정보가 있을 수 있습니다.
틀린 정보 발견 시 가르쳐주시면 감사하겠습니다.