플러터 기초

1. Lint를 끄기 위해 analysis_options.yaml 파일에 다섯줄을 추가했다. Lint란 좋은 코딩 습관?을 잡을 수 있게 도와주는 뭐 그런거라는데 초보자한테는 불필요하고 거슬린다고 한다. Lint를 안끄고 코딩하면 자꾸 밑에 노란줄 뜨고 그런다해서 얼른 꺼버렸다.

   rules:
       prefer_typing_uninitialized_variables : false
       prefer_const_constructors_in_immutables : false
       prefer_const_constructors : false
       avoid_print : false
       prefer_const_literals_to_create_immutables : false

2. 기본 위젯 4가지 (글자, 이미지, 아이콘, 박스)

   1. 글자 : Text(’원하는 글자')

   2. 아이콘 : Icon(Icons.아이콘이름)

   3. 이미지 : Image.asset(’경로’)

      이미지 경로를 쓰려면 우선 프로젝트 폴더 안에 이미지 파일이 존재해야 한다. 추가로 pubspec.yaml 파일(앱 만들 때 필요한 패키지, 라이브러리 등 모든 자료를 정리해놓은 파일) 안에 assets 폴더를 쓰겠다고 명시해놓아야 한다.

   4. 박스 : Container(속성값)

      Container의 속성값은 width, height, color 등 html style과 비슷하다. 또 박스의 위치도 정해주어야 하기 때문에 Center(child: Container)를 이용해서 중앙에 배치하는 법을 배웠다. Center란 본인의 Child들을 모두 가운데에 배치하는 위젯이다.

      보통 위젯 안에 위젯을 넣기 위해서는 child를 사용하는데 이게 되는 것도 있고 안되는 것도 있어서 한번 해보라고 한다.

3. MaterialApp()은 구글에서 지원하는 여러 위젯들을 사용할 수 있게 하는 위젯이다. 아이폰 느낌의 위젯을 쓸 수 있게 해주는 위젯도 있다고 한다. 둘다 싫어서 커스터 마이징 하고 싶다 하더라도 MaterialApp()을 써야한다고 한다.

   return MaterialApp(
     home: Center(
       child: Container(width: 50, height: 50, color: Colors.blue),
     )
   );

   요런 식으로 MaterialApp 안에 Center 안에 Container 를 넣을 수 있다.

4. Scaffold()란 앱의 상단바, 중앙, 하단바를 구분할 수 있게 해주는 위젯이다. 대부분의 앱이 상단, 중앙, 하단 형태로 이루어져 있기 때문에 이것만 잘 이용해도 그럴싸한 앱을 만들 수 있다고 한다.

   home: Scaffold(
     appBar: AppBar(),
     body: Container(),
     bottomNavigationBar: BottomAppBar(child: Center(child: Text('바텀바'),)),
   )

5. Container() 안에 위젯을 넣기 위해 child를 사용하면 위젯을 하나밖에 넣지 못한다. 그래서 가로로 위젯을 여러개 배치하기 위해서는 Row(children: []) 을 사용하면 된다. 반대로 세로로 배치하기 위해서는 Column을 사용하면 된다.

   home: Scaffold(
     body: Row( //세로로 배치하려면 Column 사용!
       children: [
         Icon(Icons.star),
         Icon(Icons.star),
         Icon(Icons.star),
       ]
     ),
   )

6. 가로축 정렬, 세로축 정렬을 위해선 mainAxisAlignment, corssAxisAlignment를 사용하면 된다고 한다. 뭐 이런거는 외워서 할 필요는 없고 자동완성(ctrl+spacebar) 이용하면 된다는데 맥은 그게 안되서 preference → keymap → completion 을 (option+spacebar)로 바꿨다.

숙제

이렇게 만들어오는게 숙제다. Icon 이름은 모두 알려주었고 생각보다 쉬워보여서 후다닥 해치울줄 알았는데 30분은 걸린 것 같다...ㅠㅠ

처음 후다닥 만든 화면은 아래와 같다. 이 화면은 세개의 문제가 있다.

1. 상단 바 제목이 가운데 정렬이 된다. 나는 좌측정렬을 해야한다.
2. 하단바의 크기가 겁나게 조그맣다. 그래서 하단바의 위아래가 아이콘 사이즈에 딱 맞는다.
3. 양쪽 아이콘이 벽에 딱 달라붙는다.

이 화면을 만들기 위해 사용한 코드는 아래와 같다.

home: Scaffold(
  appBar: AppBar(title: Text('앱제목')),
  body: Container(),
  bottomNavigationBar: BottomAppBar(
    child:
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(Icons.phone),
          Icon(Icons.message),
          Icon(Icons.contact_page)
        ],
    )
  )
  )

첫번째 문제는 AppBar(title: Text('앱제목')) 이 기본적으로 중앙정렬이 된다는 점에서 발생했다. 자동완성 기능을 사용해보니 centerTitle 이라는 bool형태의 속성이 있었다. 그래서 AppBar(centerTitle:false ,title: Text('앱제목')) 로 바꿔주니 해결되었다.

두번째 문제는 BottomAppBar 안에 child로 Container 를 추가한 뒤 height 속성값을 높이는 방식으로 해결하였다.

세번째 문제는 spaceBetween 이 아니라 spaceEvenly 를 사용하니 해결되었다.

최종적인 코드와 화면은 아래와 같다.

home: Scaffold(
  appBar: AppBar(centerTitle:false ,title: Text('앱제목')),
  body: Container(),
  bottomNavigationBar: BottomAppBar(
    child: Container(
      height: 50, //그냥 50이 젤 적당하길래 50으로 했다.
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Icon(Icons.phone),
          Icon(Icons.message),
          Icon(Icons.contact_page)
        ],
      ),
    )
  )
  )

이렇게 숙제를 완성했다..!!

하루를 마치며

코로나 걸린 김에 공부나 열심히 하려고 했는데 자료구조는 너무 하기싫다 ㅠㅠ 애플코딩님 유튜브를 평소에 자주 보는데 말투도 그렇고 너무 내 스탈이다. 애플코딩님의 플러터 강의를 일단 무료로 풀린데까지 듣고 있긴 한데 아마 다 들으면 강의를 사지 않을까 싶다. 열심히 배워서 얼른 조그만 토이프로젝트 하나 완성시켜야겠다..!!