flutter(5) - stateless 페이지를 이용하여 캐릭터 페이지 만들기(실전)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp ({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 베타 표시 없애기
      title: 'BBANTO',
      home: Grade(),
    );
  }
}

// 커스텀 위젯을 만들 때는 stl일지 stf일지 결정
class Grade extends StatelessWidget {
  const Grade({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800], // 배경색 지정. 배열로 같은 계열의 다양한 색을 선택할 수 있다. 
      appBar: AppBar(
        title: Text('BBANTO'),
        centerTitle: true,
        backgroundColor: Colors.amber[700],
        elevation: 0.0 
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 가로 정렬, Column의 가장 첫부분에
          children: [
            Center(
              child: CircleAvatar( // 원 안에 사진 넣기
                backgroundImage: AssetImage('assets/flying.gif'), // assets 파일 안에 이미지 
                radius: 60.0, // 원의 크기
              ),
            ),
            Divider( // hr 같은 구분선
              color: Colors.grey[850],
              height: 60.0,
              thickness: 0.5,
              endIndent: 30.0, // 양쪽 끝 떨어짐 정도
            ),
            Text('NAME',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0 // 철자 간격
              ),
            ),
            SizedBox( // 텍스트 사이에 가로 세로 크기를 마음대로 조정해 간격 조정 height, weight
              height: 10.0,
            ),
            Text('BBANTO',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
              fontSize: 28.0,
              fontWeight: FontWeight.bold
            ),
            ),
            SizedBox( // 텍스트 사이에 가로 세로 크기를 마음대로 조정해 간격 조정 height, weight
              height: 30.0,
            ),
            Text('BBANTO_POWER_LEVEL',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0 // 철자 간격
              ),
            ),
            SizedBox( // 텍스트 사이에 가로 세로 크기를 마음대로 조정해 간격 조정 height, weight
              height: 10.0,
            ),
            Text('14',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
              fontSize: 28.0,
              fontWeight: FontWeight.bold
            ),
            ),
            SizedBox( // 텍스트 사이에 가로 세로 크기를 마음대로 조정해 간격 조정 height, weight
              height: 30.0,
            ),
            Row( // 가로로 배열
              children: [
                Icon(Icons.check_circle_outline), // 아이콘 
                SizedBox( // 텍스트 사이에 가로 세로 크기를 마음대로 조정해 간격 조정 height, weight
                  width: 10.0,
                ),
                Text('using lightsaber',
                style: TextStyle(
                  fontSize: 16.0,
                  letterSpacing: 1.0,
                ))
              ],
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox( // 텍스트 사이에 가로 세로 크기를 마음대로 조정해 간격 조정 height, weight
                  width: 10.0,
                ),
                Text('face hero tattoo',
                style: TextStyle(
                  fontSize: 16.0,
                  letterSpacing: 1.0,
                ))
              ],
            ), 
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox( // 텍스트 사이에 가로 세로 크기를 마음대로 조정해 간격 조정 height, weight
                  width: 10.0,
                ),
                Text('fire flames',
                style: TextStyle(
                  fontSize: 16.0,
                  letterSpacing: 1.0,
                ))
              ],
            ),
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/BBANTO.png'),
                radius: 40.0,
                backgroundColor: Colors.amber[800],
              )
            )   
          ],
        ),
      ),
    );
  }
}