flutter - 캐릭터 정보 앱 만들기

Flutter

flutter - 캐릭터 정보 앱 만들기

바차 2021. 7. 19. 02:00

[최종 코드]

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,    //  우측 상단에 debug 띠 지우기
      title: "BBANTO",
      home: Grade(),
    );
  }
}

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'),
        backgroundColor: Colors.amber[700], // colors.색을 작성하고 마우스를 올리면 더 세부적인 색을 표시해준다.
        centerTitle: true,
        elevation: 0.0,
      ),

      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0),
        child: Column(
           // crossAxisAlignment -> 컬럼 위젯 내의 모든 요소 가로축 정렬 속성, Column의 맨 위에 이 속성을 추가할 것
           // CrossAxisAlignment.start -> 시작점 정렬
           // CrossAxisAlignment.center -> 중앙 정렬
           // CrossAxisAlignment.end -> 끝점 정렬
          crossAxisAlignment: CrossAxisAlignment.start, 
          children: [
          Center(
            child: CircleAvatar(       // 해당 위젯이 사용할 수 있는 속성을 확인하려면 ctrl + space
              backgroundImage: AssetImage('assets/firesnow.gif'), //backgroundImage: AssetImage ->  사용할 이미지 불러오기
              radius: 60.0,            // radius ->  이미지 크기 설정 
            ),
          ),


          Divider(            // Divider -> 공간을 나누는 선
            height: 60.0,     // height ->  높이 설정 -> 위와 아래 사이의 간격이 합쳐서 60.0 이라는 뜻(위 아래로 각 30px)
            color: Colors.grey[850],    // color -> 색상 설정
            thickness: 0.5,             // thickness -> 선의 굵기
            endIndent: 30.0,            // endIndent -> 선이 끝에서 부터 어느정도 떨어질 지 결정하는 속성
          ),
          Text('NAME', // ,쉼표 후 Text의 스타일 설정 가능 
          style: TextStyle(   // TextStyle() 메소드를 ctrl + 클릭 하면 그 안에 어떤 속성들이 있는지 확인 할 수 있다.
            color: Colors.white,
            letterSpacing: 2.0,        // letterSpacing -> 철자간의 간격을 조절하는 속성
          ), 
          ),
          
          SizedBox(   // SizedBox -> 눈에 보이지는 않지만 두 텍스트 사이에 보이지 않는 박스를 넣어 가로세로 사이 간격을 조절
            height: 10.0,
          ),

          Text('BBANTO', 
          style: TextStyle(
            color: Colors.white,
            letterSpacing: 2.0,
            fontSize: 28.0,         // fontSize -> Text의 font size 설정하는 속성
            fontWeight: FontWeight.bold           // fontWeight -> Text의 글자 굵기를 조절하는 속성
          ),
          ),

          SizedBox(   // SizedBox -> 눈에 보이지는 않지만 두 텍스트 사이에 보이지 않는 박스를 넣어 가로세로 사이 간격을 조절
            height: 30.0,
          ),

          Text('BBANTO 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,     // 설명 text와 체크 text 간의 간격 조정
          ),

          Row(          //Row -> 복수의 위젯을 가로로 나열하는 위젯
            children: [
              Icon(Icons.check_circle_outline),

              SizedBox(   
                width: 10.0,    // width 로 아이콘과 text 간의 가로 간격 조정
              ), 
              
              Text('using lightsaber',
              style: TextStyle(
                fontSize: 16.0,
                letterSpacing: 1.0,
              ),
              ),
              
            ],
          ),

          Row(    
            children: [
              Icon(Icons.check_circle_outline),

              SizedBox(   
                width: 10.0,  
              ), 
              
              Text('face hero tattoo',
              style: TextStyle(
                fontSize: 16.0,
                letterSpacing: 1.0,
              ),
              ),
              
            ],
          ),

          Row(          
            children: [
              Icon(Icons.check_circle_outline),

              SizedBox(   
                width: 10.0, 
              ), 
              
              Text('fire flames',
              style: TextStyle(
                fontSize: 16.0,
                letterSpacing: 1.0,
              ),
              ),
              
            ],
          ),

          Center(
            child: CircleAvatar(
              backgroundImage: AssetImage('assets/fireBan.png'),
              radius: 40.0,
              backgroundColor: Colors.amber[800], // 이미지의 배경이 투명일 경우 백그라운드 설정 가능
            ),
          ),

        ],),
        ),
    );
  }
}