[Flutter] 위젯 구성 3 (이미지 넣기, Divider, CircleAvator, Row, Icon)

Flutter에서 이미지 넣는 법

1. 새 디렉터리 만들기

assets 폴더를 만들었습니다.

2. 만든 폴더에 이미지 넣기

3. pubspec.yaml 파일로 이동해서 assets : 부분 주석 해제 후 경로 입력

에러가 나면 들여쓰기를 확인해보세요.

---

main.dart

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(
      debugShowCheckedModeBanner: false,
      title: 'Codey',
      home: Grade(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('Codey'),
        backgroundColor: Colors.amber[700],
        centerTitle: true,
      ),
      // 패딩 위젯을 불러옴
      body: Padding(
        // 패딩 알그먼트를 불러옴, 왼쪽 30, 위쪽 40, 오른쪽 0, 아래쪽 0
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          // 가로축을 따라 텍스트 시작점(왼쪽)에 정렬
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            // 원형의 사용자 프로필 이미지, 아이콘
            Center(
              child: CircleAvatar(
                backgroundImage:
                // 이미지 경로
                AssetImage('assets/codey.png'),
                // 원 크기
                radius: 60.0,
              ),
            ),
            // 구분선을 나타내는 위젯
            Divider(
              // divider 위와 아래 사이의 간격이 60.0, 즉 위에서부터 30px, 아래에서부터 30px
              height: 60.0,
              color: Colors.grey[850],
              // 두께
              thickness: 0.5,
              // divider 선이 끝에서 얼만큼 떨어질지
              endIndent: 30.0,
            ),
            Text('NAME',
            style: TextStyle(
              color: Colors.white,
              // 철자간의 간격
              letterSpacing: 2.0,
            ),
            ),
            // 첫번째 텍스트 위젯과 두번째 텍스트 위젯 글자 간격을 조절하기 위한 상자 모양 위젯
            SizedBox(
              height: 10.0,
            ),
            Text('Codey',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
                fontSize: 28.0,
                fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(
              height: 30.0,
            ),
            Text('Codey POWER LEVEL',
              style: TextStyle(
                color: Colors.white,
                // 철자간의 간격
                letterSpacing: 2.0,
              ),
            ),
            // 첫번째 텍스트 위젯과 두번째 텍스트 위젯 글자 간격을 조절하기 위한 상자 모양 위젯
            SizedBox(
              height: 10.0,
            ),
            Text('14',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0,
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold
              ),
            ),
            SizedBox(
              height: 30.0,
            ),
            // Row 위젯 호출
            Row(
              children: <Widget>[
                // Icon 위젯 호출, Icons.check_circle_outline은 체크 되지 않은 원 아이콘
                Icon(Icons.check_circle_outline),
                // 가로 간격을 위한 sizedbox
                SizedBox(
                  width: 10.0,
                ),
                Text('first Circle',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                // Icon 위젯 호출, Icons.check_circle_outline은 체크 되지 않은 원 아이콘
                Icon(Icons.check_circle_outline),
                // 가로 간격을 위한 sizedbox
                SizedBox(
                  width: 10.0,
                ),
                Text('second Circle',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                // Icon 위젯 호출, Icons.check_circle_outline은 체크 되지 않은 원 아이콘
                Icon(Icons.check_circle_outline),
                // 가로 간격을 위한 sizedbox
                SizedBox(
                  width: 10.0,
                ),
                Text('third Circle',
                  style: TextStyle(
                    fontSize: 16.0,
                    letterSpacing: 1.0,
                  ),
                ),
              ],
            ),
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/lion.png'),
                radius: 40.0,
                backgroundColor: Colors.amber[800],
              ),
            ),
          ],
        ),
      ),
    );
  }
}