Flutter 스터디 3 캐릭터 카드 페이지 만들기 (+ Layout 몇 개 정리)

순한맛 9 캐릭터 페이지 디자인 1: 위젯정리

 

캐릭터 페이지 디자인 1 : 위젯정리

Padding widget : 특정 지점으로부터 사용하고자 하는 위젯이 위치할 거리를 지정할 때 사용


Column 위젯의 특별한 제약

위의 사진의 경우 자식 위젯들에게 세로축 관련해서 높이 제약이 없으니 마음껏 확장해라
= 가로축으론 넓이의 제약을 두고 있지만 세로축으로는 아무런 제약이 없음

그래서 Column 위젯과 Center 위젯이 만나면 Center 위젯은 Column 위젯의 자식들의 세로축 위치에 대해서는 관여하지 않고 대신 현재 Column 위젯의 자식 위젯 세로축 높이에 자동으로 고정됨.

 

세로축 정렬해 주는 mainAxisAlignment: MainAxisAlignment.center 없을때

 

mainAxisAlignment: MainAxisAlignment.center 있을 때

 

Column 위젯과 Center 위젯이 결합 되었을 때 세로축 상으로 정중앙에 Column 위젯에 자식들을 위치 시키려면 MainAxisAlignment가 필요함. 즉,

1. Column 위젯을 가로축 상으로 정중앙에 두고 싶다 = Center 위젯 사용
2. Column 위젯을 세로축 상으로 정중앙에 두고 싶다 = Column 위젯 내에서 MainAxisAlignment 속성 사용

 

 

(+주절주절. 아직 UI에 대한 공간 개념?이 부족해서인지 알거 같은데 다시 보면 모르겠다. 공부해야지,..)

 

 

순한맛 10 캐릭터 페이지 디자인 2: 실전코딩 part 1

순한맛 11 캐릭터 페이지 디자인 3: 실전코딩 part 2(완결편)

 

결과물 코드 ▼

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BBANTO',
      home: Grade(),
    );
  }
}

class Grade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true, // 정중앙 정렬
        elevation: 0.0, // 앱바 입체감 없애기
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 시작점 정렬
          children: <Widget>[
            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( // Icon과 Text를 가로로 배치하기 위한 위젯
              children: <Widget>[
                Icon(Icons.check_circle_outlined),
                SizedBox(
                  width: 10.0,
                ),
                Text('using lightsaber',
                style: TextStyle(
                  fontSize: 16.0,
                  letterSpacing: 1.0
                ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.check_circle_outlined),
                SizedBox(
                  width: 10.0,
                ),
                Text('face hero tattoo',
                  style: TextStyle(
                      fontSize: 16.0,
                      letterSpacing: 1.0
                  ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.check_circle_outlined),
                SizedBox(
                  width: 10.0,
                ),
                Text('fire flames',
                  style: TextStyle(
                      fontSize: 16.0,
                      letterSpacing: 1.0
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

 

---

➕ (정리) Column과 Row,  MainAxisAlignment

Column 

- 행

- 위젯을 세로로 배치할 때 사용.

 

Row

- 열

- 위젯을 가로로 배치하고 싶을 때 사용.

 

MainAxisAlignment

- 행 또는 열이 자식을 정렬하는 방법을 제어 = 위젯의 주축을 정함

출처 : 플러터 공식문서

---

 

이미지 추가

1. assets 폴더 생성

2. assets 폴더에 이미지 추가 (png 파일이어야 깔끔)

3. pubspec.yaml 이동 > assets: (이미지 파일 모두) 활성화 및 이미지와 경로에 맞추어 수정

예) assets/schna.png (확장자까지 꼭!)

( *주의 : pubspec.yaml 는 들여쓰기에 매우 민감. 최대한 형태를 지키면서 수정하기) 

 

 

결과물 코드 ▼

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 오른쪽 빨간띠
      title: 'BBANTO',
      home: Grade(),
    );
  }
}

class Grade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber[800],
      appBar: AppBar(
        title: Text('BBANTO'),
        backgroundColor: Colors.amber[700],
        centerTitle: true, // 정중앙 정렬
        elevation: 0.0, // 앱바 입체감 없애기
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 40.0, 0.0, 0.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start, // 시작점 정렬
          children: <Widget>[
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/schna.png'),
                radius: 60.0, //circle 크기
                  backgroundColor: Colors.amber[800],
              ),
            ),
            Divider( // 구분선
              height: 60.0, // divider의 위아래 간격의 합이 60. 즉, 30px/30px 사이에 위치.
              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( // Icon과 Text를 가로로 배치하기 위한 위젯
              children: <Widget>[
                Icon(Icons.check_circle_outlined),
                SizedBox(
                  width: 10.0,
                ),
                Text('using lightsaber',
                style: TextStyle(
                  fontSize: 16.0,
                  letterSpacing: 1.0
                ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.check_circle_outlined),
                SizedBox(
                  width: 10.0,
                ),
                Text('face hero tattoo',
                  style: TextStyle(
                      fontSize: 16.0,
                      letterSpacing: 1.0
                  ),
                ),
              ],
            ),
            Row(
              children: <Widget>[
                Icon(Icons.check_circle_outlined),
                SizedBox(
                  width: 10.0,
                ),
                Text('fire flames',
                  style: TextStyle(
                      fontSize: 16.0,
                      letterSpacing: 1.0
                  ),
                ),
              ],
            ),
            Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/schnauzer.png'),
                radius: 40.0,
                backgroundColor: Colors.amber[800],
              ),
            )
          ],
        ),
      ),
    );
  }
}

 

(주절주절 : 지금 약간 html / css 처음 배웠을 때 느낌.. 어색하고 뭐가뭔지 헷갈리고 헷갈린다)