Choe's In coding...

이번에는 dart 문법중 enum에 대해 알아보자

enum이란..?

한 변수안에 여러 가지 옵션을 제공하는 것이다.

예시

서버와 통신을 한다고 가정을 해보자

통신의 결과가 성공, 실패, 대기 라고 가정을 한다면

결과에 따라 다르게 수행할 로직이 있을것이다.

if(result== '성공')
{
	print("성공")
}

위 코드가 정상이지만

if(result== '성고') // 오타
{
	print("성공")
}

위 처럼 오타를 낸다면 당연히 오류가 날것이다.

위 같은 오타를 방지하기 위해 사용된다고 보면 된다.

예시 코드를 보자

enum ResultOption{
  success,
  fail,
  wait,
}
void main(){
  final result = ResultOption.success;
  if(result == ResultOption.success){
    print('성공');
  }
  else{
    print('실패');
  }
}

위 처럼 ResultOption을 통해

여러가지 옵션을 미리 지정함으로써

단순 오타로 인한 코드 오류를 방지할 수 있다.

어느새 눈이 오는 계절이 되어버렸다.

눈오는날엔 움직이기 너무 귀찮지만

창밖으로 카페에 앉아 눈내리는 걸 보면 정말 느낌있다.

프로젝트를 조금씩 완성시키고 있지만..

하나의 산을 넘을때 시간이 너무 들고 바로 다음 산을 넘어가야하나...

이렇게 비효율적으로 시간을 쓰는것보단 다시 기초를 다지자라는 생각에

Dart, Flutter 강의를 찾았고 우연히

노마드코드의 무료강의를 보았다.

인터넷 유튜브에서 여럿 강의를 보면서 공부했지만

개인적으론 노마드코드 강의가 최고인듯하다.

영어로 설명하여 자막을 보며 들어야한다는 장점아닌 단점이 있지만

내용이 너무 알차고 설명을 잘해준다.

이번주 토요일부터 GDG송도에서 하는 플러터 사이드프로젝트를 시작하는데

앞서 기초를 다지기에 너무 좋은 강의였다.

추후 유료 강의도 들어볼 예정이다.

Dart, Flutter를 시작하는 사람에게 꼭 추천하고 싶다.

날이 많이 추워졌다..

긴팔 긴바지 입었지만.

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

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

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

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

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

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

지난번 시간에 만든 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으로 구현하면된다.