플러터 순한맛 강좌 - 캐릭터 페이지 디자인

해당 코드는 코딩셰프의 수업을 바탕으로 만들었습니다.
코딩셰프

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,  // 맨위의 붉은 색의 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[400],
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[800],
        centerTitle: true,
        elevation: 0.0,
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/mollu.gif'),
                backgroundColor: Colors.amber[400],
                radius: 60.0,
              ),
            ),
            Divider(
              height: 60.0, // Divider 위아래 기준으로 높이가 60이라는 뜻, 즉 위 30픽셀, 아래 30픽셀 공간을 만든다는 뜻
              color: Colors.grey[850],
              thickness: 0.5,
              endIndent: 30.0,
            ),
            Text('Name',
            style: TextStyle(
              color: Colors.white,
              letterSpacing: 2.0,
            ),
            ),
            SizedBox(
              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(
              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 lightsaver',
                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/mollu.jpg'),
                radius: 40.0,
              ),
            )
          ],
        ),
      ),

    );
  }
}

pubspec.yaml
해당 부분에서 탭 조금이라도 삐끗하면 오류가 나타나서 반영이 안되므로 조심할 것
assets 폴더는 별도로 flutter 프로젝트 폴더에 만들어줘야 한다.
jpg와 gif는 아무거나 써도 상관없다.

# To add assets to your application, add an assets section, like this:
  assets:
    - assets/mollu.jpg
    - assets/mollu.gif