캐릭터 페이지 디자인 실습

캐릭터 페이지 디자인 실습

이번에는 캐릭터 페이지를 만들어보는 실습을 진행.

 

 

AppBar

• CenterTitle : title을 중앙에 위치 시킴 - True or False
• appbar Background : 앱바 배경색 바꿈
• elavation : 앱 바에 있는 그림자 설정

 

Padding Widget

패딩도 하나의 위젯임

즉, 하나의 View라는 의미.

 

플러터에서 가로 방향에 대해서는 width를 가능한 넓게 채우도록 레이아웃이 설정되어 있고, 세로 축에 대해서는 별도의 레이아웃을 잡지 않음.

따라서 아래 코드처럼 세로축을 기준으로 중심에 위치하게 하는 코드이다.

mainAxisAlignment: MainAxisAlignment.center

 

Padding 위젯에 대한 설명 및 코드 및 결과

 

 

Center Widget

얘도 뷰라서 결국은 위젯으로 볼 수 있고 레이아웃을 잡아보자.

 

Center 위젯은 가로축 상에서 중심을 잡아주고 세로축 상에서의 중심은 아래 코드로 잡는다.

mainAxisAlignment: MainAxisAlignment.center

 

Center 위젯에 대한 설명 및 코드 및 결과

 

 

만약 아래 코드를 사용하지 않는다면 세로축에 대해서 레이아웃이 잡혀있지 않은걸 확인할 수 있음.

mainAxisAlignment: MainAxisAlignment.center

 

이미지

 

 

캐릭터 페이지 디자인 완성하기

 

아래 코드로 간단하게 완성할 수 있음

확실히 선언형 UI라서 작성하는데, 들여쓰는게 많지만 UI 작업 속도가 진짜 빠름

 

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], // 배경색을 뷰 이미지 색과 맞춰서 투명하게 보이게
              ),
            )

          ],
        ),
      ),
    );
  }
}