[flutter] 10강~11강 | 캐릭터 페이지 디자인 2,3: 실전코딩 완결

✅ 이번 시간에는 part1,2를 동시에 정리해 보았다.

이전에 개발을 했어서 그런지 위젯을 다루는 것이 크게 어렵지 않았다.

 

❗️포스팅을 보기 전 이 글의 맨 아래에 변경사항 부분이 있는데 꼭 참고하길 바람.

 

여기서는 Divider와 Center안에 Columns 그 안에 Center를 이용해서 UI구성을 보았는데 상당히 신박했다

 

(좌) part1까지의 결과 (우) part2까지의 결과

✅ 코드리뷰 및 코드에 대한 설명

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'BBANTO', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme: ThemeData(primarySwatch: Colors.blue // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
          ),
      home: Grade(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

class Grade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 교육학 용 : 무언가를 혼자 해낼 수 있게 발판을 만들어 주다. -> 빈 도화지 같은 역할
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('BBANTO'), // 앱바의 이름
        centerTitle: true, // 중앙에 위치하게
        backgroundColor: Colors.amber[700], // Colors의 색상 지정
        elevation: 0.0, // 앱 바에 있는 그림자를 설정
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          // 위젯을 좌로 정렬
          //mainAxisAlignment: MainAxisAlignment.center, // 위젯들을 세로 축으로 상단 하단 중간 등에 정렬할 때 쓰임
          children: [
            Center( // 이미지를 중간으로
              child: CircleAvatar( // 동그란 이미지 넣을
                backgroundImage: AssetImage('assets/flying.gif'),
                radius: 60.0,
              ),
            ),
            Divider( // 구분선 만드는 위젯
              height: 60.0, // 위로 30 + 아래로 30
              color: Colors.grey[850],
              thickness: 0.5, // 두께
              endIndent: 30.0, // 끝에서 부터 얼마나 떨어져야할지 지정
            ),
            Text(
              'NAME',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0, // 글자 사이의 간격
              ),
            ),
            SizedBox(
              // 텍스트와 텍스트 간의 간격을 두고 싶은데 박스를 넣어서 10만큼 거리를 만든다.
              height: 10.0,
            ),
            Text(
              'BBANTO',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0, // 글자 사이의 간격
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 30.0,
            ),
            Text(
              'BBANTO  POWER LEVEL',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0, // 글자 사이의 간격
              ),
            ),
            SizedBox(
              // 텍스트와 텍스트 간의 간격을 두고 싶은데 박스를 넣어서 10만큼 거리를 만든다.
              height: 10.0,
            ),
            Text(
              '14',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0, // 글자 사이의 간격
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(
                height: 30.0
            ),
            Row(
              children: [
                Icon(Icons.check_circle_outline),
                SizedBox(
                    width: 10.0
                ),
                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/bbanto.png'),
                radius: 40.0,
                backgroundColor: Colors.amber[800], // 배경색을 뷰 이미지 색과 맞춰서 투명하게 보이게
              ),
            )

          ],
        ),
      ),
    );
  }
}

✅ 프로젝트 변경사항

좌측 사진 : assets 폴더를 만듦

우측 사진 : pubspec.yaml에 assets쪽에 이미지 등록

변경사항