Choe's In coding...

날이 많이 추워졌다..

긴팔 긴바지 입었지만.

슬리퍼를 신고나왔더니 발꾸락이 춥다!

플러터를 공부하면서 느끼는 거지만

최고의 선생님은 구글인거같다..

검색하면 다나온다 정말..

물론 영어로 검색해야하기에 영어를 잘하면 좋겠지만

비슷하게 검색하더라도 잘나온다.

지난번 시간에 만든 AppBar에 있는 메뉴버튼을 누르면 좌측에서 Drawer menu가 나오게 구현하려고한다.

우선 복습할겸 새프로젝트를 시작해 기본틀부터 다시 만들었다...

    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer App'),
        centerTitle: true,
        actions:[
          IconButton(onPressed:(){}, icon: Icon(Icons.shopping_cart, size: 25,),),
          IconButton(onPressed: (){}, icon: Icon(Icons.search_rounded, size: 25,),),
        ],
      ),
    );

title Text를 Center로 묶어주는것과

centertitles을 해주는것은 좀 다르다..

후자의 경우가 정가운데로 정렬해주기에 사용했다.

맨 왼쪽 menu 아이콘은 Drawer를 구현하면 자동으로 생성되기에 삭제해줘야한다.

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children:[
      UserAccountsDrawerHeader(
        currentAccountPicture: CircleAvatar(
          backgroundImage: AssetImage('assets/a.png'),
          backgroundColor: Colors.white,
        ),
        accountName: Text('monster'),
        accountEmail: Text('tngudzzzz@naver.com'),
        onDetailsPressed: () {},
        decoration: BoxDecoration(
          color: Colors.red[200],
          borderRadius: BorderRadius.only(
            bottomRight: Radius.circular(40.0),
            bottomLeft: Radius.circular(40.0),
          )
          )
        ),
    ],
  ),
),

appbar를 벗어나

drawer를 만들어준다.

-ListView

   - UserAccountsDrawerHeader

       - currentAccountPicture

       - accountName (필수)

       - accountEmail (필수)

이런 구조로 되어있다.

Image assets 하는방법은

1. 프로젝트 디렉토리에 새로운 디렉토리를 만들고 그안에 이미지 파일을 넣어준다.

2.

pubspec.yaml에 들어가 해당 부분에 이미지 경로를 넣어준다.

위 에시는 assets라는 새로운 디렉토리를 만들어 안에 a와 b라는 이미지 파일을 넣어줬다.

여기서 주의해야할 점은 띄어쓰기가 중요하다.

빨간색 부분은 띄어쓰기 2번 or 탭 1번

노란색 부분은 띄어쓰기 4번 or 탭 2번

이렇게 맞춰줘야 인식이 가능하다.

본문에서의 호출법은 AssetImage('assets/a.png') 이다.

onDetailsPressed: () {}

이 부분은 사진에 보이는 아랫 화살표 표시이다.

이제 아래에 Listtile을 추가해보자

사진을 보면 home, settings, Q&A  총 3개의 Listtile로 구성되어있다.

하나의 코드만 보자면

    ListTile(
      leading: Icon(Icons.home, color: Colors.grey[850],),
      title: Text('home'),
      onTap: () {
        print('onTap is Tap');
      },
      trailing: Icon(Icons.add),
    ),

leading은 appbar에서도 사용했듯

처음으로 오는 아이콘을 뜻한다.

가장오른쪽에 붙는 + 아이콘은 trailing으로 구현하면된다.

보이는 사진을 구역별로 나눠 코드를 보여주고 설명하도록 하겠다..

우선적으로 이번 예제에선 데이터에 변화가 없기에 Stateless Widget만 사용한다.

material을 import 시켜주고

기본적인 위젯 코드를 짜주자 외울필요없이 stl만 치면 나온다. 

위 코드가 항상 시작할때 필요한 기본 코드이다.

맨위 appbar이다.

appbar를 보면 배경색이 있는데 보통강의를 보면 Colors.red 처럼 지정된 색을 사용하였지만 나는 hex코드를 이용했다.

hex코드는 Color(0xFF-------) 이렇게 사용하면 된다. 3번째줄의 색 코드는 앱 전체 배경색이고 

appbar이 배경색 코드는 아랫쪽이다.

title는 센터로 한번 감싸주어 Text와 backgroundColor 두개 child를 갖고있다.

아래 elevation은 appbar와 body의 경계 음영이다. 숫자를 키워서 적용하면 이해가능할것이다.

body는 기본적으로 column으로 구성된다.

처음 위젯은 CircleAvatar이다.

해당 위젯또한 Center로 한번 감싸

x축의 센터로 맞춰준다.

백그라운드 이미지는 해당 프로젝트 루트에 저장했기에 AssetImage를 이용해 줬다.

인터넷 url을 통한 방법도 있지만 많을경우 앱이 무거워질수가있다.

radius는 원의 크기이다.

해당 위젯은 Divider로 만들었다.

height는 위아래 여백이며 위 30 아래 30의 공간을 둔다는 의미이다.

color은 hex코드를 이용하지않고 지정된 색을 사용하였다.

thickness는 선의 두깨를 의미한다. 숫자를 변경해보면 이해가능하다.

endIndent는 오른쪽 여백을 의미하며 해당 코드가 없으면 선이 오른쪽에 붙는걸 확인할 수 있을것이다.

4개의 텍스트 위젯을 사용했다.

letterSpacing - 문자간 간격을 의미한다.

fontsize - 글자 크기

fontWeight  - 글자 굵기를 설정할 수 있다.

해당 위젯을보면 가로 2개씩 세로 3개로 구성되어있다.

Row 로 2개(아이콘,텍스트) 묶어 구성하면 된다.

Icon은 Icon(Icons. 을 찍으면 아이콘 종류가 많이 나온다. 원하는걸 쓰면 된다.

SizeBox는 Icon과 Text 사이 여백을 의미한다.

기본적으로 위젯을 디자인하는 방법은 정말 다양하다. 여백을 주는 방법 또한 여러가지이다.

얼추 기본 구성은 감이 잡혔지만 계속해서 예제를 통해 더 익혀야겠다.

아래는 풀 코드이다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'BBANTO',
      home: Grade(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF69abce),
      appBar: AppBar(
        title: Center(
          child: Text(
            'ID card',
            style: TextStyle(
              fontSize: 30.0,
            ),
          ),
        ),
        backgroundColor: Color(0xff5D8FA9),
        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/2.png'),
                radius: 80.0,
              ),
            ),
            Divider(
              height: 60.0,
              color: Colors.grey[850],
              thickness: 1.5,
              endIndent: 30.0,
            ),
            Text(
              'NAME',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              'Coding Master',
              style: TextStyle(
                  color: Colors.white,
                  letterSpacing: 2.0,
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold),
            ),
            SizedBox(
              height: 30.0,
            ),
            Text(
              'score',
              style: TextStyle(
                color: Colors.white,
                letterSpacing: 2.0,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            Text(
              '3.5',
              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,
                  size: 25.0,
                ),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  '1111111111',
                  style: TextStyle(
                    fontSize: 25.0,
                    letterSpacing: 1.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Icon(
                  Icons.check_circle_outline,
                  size: 25.0,
                ),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  '2222222222',
                  style: TextStyle(
                    fontSize: 25.0,
                    letterSpacing: 1.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
            Row(
              children: [
                Icon(
                  Icons.check_circle_outline,
                  size: 25.0,
                ),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  '3333333333',
                  style: TextStyle(
                    fontSize: 25.0,
                    letterSpacing: 1.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}