[Flutter 단기 속성] 1일차. 예제 따라해보기(1)

학교 과제로 flutter로 앱을 만들게 되었다. 그것도 단 3일만에(!) - 사실 주어진 시간은 2주 남짓한 시간이었지만 다른 과목의 기말 일정도 겹쳐있기 때문에 사실상 할당할 수 있는 시간은 3일이다.

 

어찌되었든 구현해야 하는 기능은 다음과 같다.

 

1. LoginPage, HomePage, DetailPage 등 일반적인 UI로 구성된 자신만의 페이지 개발 (하)

- 자신만의 UI 구성할 것.

2. 여러 페이지를 전환할 수 있는 기능 개발 (하)

- 참고자료) https://flutter-ko.dev/docs/development/ui/navigation

3. 파일 입출력을 통한 회원가입 및 로그인 기능 개발 (중)

- txt 파일에 로그인에 필요한 정보들을 저장

- 저장하는 방식은 자유이나 String으로 저장하여 문자열 슬라이싱을 통해 필요정보 입출력 하는 것을 추천

- 참고자료) https://flutter-ko.dev/docs/cookbook/persistence/reading-writing-files

4. 파일 입출력을 통한 사용자 별 데이터 관리 (중)

- 회원 가입 시 사용자 별 개인 정보(아이디, 비밀번호, 개인 프로필 등)를 받고 해당 사용자로 로그인하면 개인 정보를 볼 수 있는 페이지 개발

- 어플리케이션 내에서 사용자의 개인 정보(비밀번호 or 프로필) 수정 및 새로운 정보(ex. 친구 목록, 좋아요 목록 등)를 저장하는 기능 Ex. 사용자마다 다른 프로필 페이지, 사용자에 대한 친구 목록 등

5. 외부 API를 활용한 어플리케이션 개발 (상)

- Google map API를 활용하여 현재 어플리케이션이 실행된 기기의 위치(GPS)가 지도 위에 표기가 될 수 있도록 개발

- 참고자료) https://github.com/flutter/samples/tree/master/place_tracker

 

futter와 dart 쌩초보한테 이런 과제는 벅차다고 느껴지는 시작이지만, 일단 하나하나 해보도록 하겠다. 주어진 시간이 짧으니, 과제에 대한 접근 방식은 먼저 코드를 따라 하며 구현을 하고 기능을 조금씩 바꿔보는 방향을 생각중이다.

 

1. LoginPage, HomePage, DetailPage 등 일반적인 UI로 구성된 자신만의 페이지 개발 (하)

2. 여러 페이지를 전환할 수 있는 기능 개발 (하)

 

이 두 부분은 여러 예제를 보고 차근차근 해보려 한다. 우선 flutter 기본 예제1를 보고 있다.

 

결과적으로 만들어진 앱은, 외부 패키지에서 불러온 여러 영어 단어가 생성 되고 그것을 앱 화면에 띄워주는 기능을 가졌다.

 

이 예제를 따라하며 얻은 것은,

 

• Flutter 앱을 처음부터 만들었습니다.
• Dart 코드를 작성했습니다.
• 외부 서드파티 라이브러리를 활용했습니다.
• 빠른 개발 사이클을 위해 hot reload를 사용했습니다.
• Stateful 위젯을 적용했습니다.
• Lazy한 방식 무한 스크롤 목록을 만들었습니다.

라고 한다.

 

LoginPage, DetailPage, HomePage도 이어서 만들어보자. 그 다음으로 참고한 예제는 flutter 기본 예제2 여기에 있다. 이 예제를 따라 하며 배우게 될 내용은,

 

• How to write a Flutter app that looks natural on iOS, Android, and the web
• How to use hot reload for a quicker development cycle
• How to add interactivity to a stateful widget
• How to create and navigate to a second screen
• How to change the look of an app using themes

라고 한다.(여기부터 영어 예제가 나온다(!))

 

일단 4. Add icons to the list를 따라서 여기까지 하면 그림과 같이 하트모양을 만들 수 있다. 세부적인 것이 어떻게 구현되었는지는 조금 있다가 다시 찾아보기로 하자.

 

기존의 _buildRow method에 아래의 코드를 추가하였더니,

    onTap: () {      // NEW lines from here...
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else { 
          _saved.add(pair); 
        } 
      });
    },               // ... to here.

 

다음과 같이 하트 모양을 추가할 수 있었다. 그렇다면 이쯤에서 다시 _buildRow로 돌아가 이게 무슨 코드였는지를 찾아보겠다.

 

Widget _buildRow(WordPair pair) {
  return ListTile(
    title: Text(
      pair.asPascalCase,
      style: _biggerFont,
    ),
  );
}

 

원래 이런 모습이었던 buildRow는 _buildSuggestions() 함수가 단어 쌍 마다 한 번 씩 호출하게 된다. 이 함수는 ListTile에서 각각 새로운 쌍을 표시한다고 한다. 그러면 _buildSuggestions()가 뭔지도 한 번 봐야할 필요가 있을 듯 하다.

 

Widget _buildSuggestions() {
  return ListView.builder(
      padding: const EdgeInsets.all(16.0),
      itemBuilder: /*1*/ (context, i) {
        if (i.isOdd) return Divider(); /*2*/

        final index = i ~/ 2; /*3*/
        if (index >= _suggestions.length) {
          _suggestions.addAll(generateWordPairs().take(10)); /*4*/
        }
        return _buildRow(_suggestions[index]);
      });
}

 

RandomWordsState 클래스에 _buildSuggestions() 함수를 추가하게 되는데, 

1. itemBuilder 콜백은 단어 쌍이 제안될 때마다 호출되고 각각을 ListTile 행에 배치합니다. 짝수 행인 경우 ListTile 행에 단어 쌍을 추가합니다. 홀수 행인 경우 시각적으로 각 항목을 구분하는 Divider 위젯을 추가합니다. 작은 기기에서는 구분선을 보기 어려울 수 있습니다.
2. ListView의 각 행 앞에 1 픽셀 높이의 구분선 위젯을 추가하십시오.
3. i ~/ 2 표현식은 i를 2로 나눈 뒤 정수 결과를 반환합니다. 예를 들어: 1, 2, 3, 4, 5는 0, 1, 1, 2, 2가 됩니다. 이렇게 하면 구분선 위젯을 제외한 ListView에 있는 단어 쌍 수가 계산됩니다.
4. 가능한 단어 쌍을 모두 사용하고 나면, 10개를 더 생성하고 제안 목록에 추가합니다.

라고 한다. 좀 더 정리해서 말하자면,

 

RandomWordsState 클래스에 _buildSuggestions() 함수를 추가하세요. 이 메서드는 제안된 단어 쌍을 표시하는 ListView를 만듭니다. ListView 클래스는 builder 속성인 itemBuilder를 제공합니다. 이 팩토리 빌더는 익명 함수 형태의 콜백 함수를 받습니다. 두 인자가 함수에 전달됩니다; BuildContext와 행 반복자 i입니다. 반복자는 0부터 시작되고 함수가 호출될 때마다 증가합니다. ListTile에 제안된 모든 단어 쌍에 대해 2번씩, 그리고 Divider에 1번씩 증가합니다. 이 방식을 사용하여 사용자가 스크롤을 할 때마다 목록이 무한하게 증가할 수 있게 할 수 있습니다.

 

이라고 할 수 있겠다. (여기까지 왔을 때 솔직한 마음은 막막하다. 하지만 일단 해나가보겠다.)

 

그 다음 단계는 6. Navigate a new screen 이다. 그렇다. 드디어 2. 여러 페이지를 전환할 수 있는 기능 개발 (하) 이 기능을 구현할 수 있게 되는 것 같다.

 

"In this step, you'll add a new page (called a route in Flutter) that displays the favorites. You'll learn how to navigate between the home route and the new route.

 

Next, you'll add a list icon to the AppBar in the build method for _RandomWordsState. When the user clicks the list icon, a new route that contains the saved favorites is pushed to the Navigator, displaying the icon."

 

actions: [
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ],

 

scaffold의 appbar 안에 다음과 같은 코드를 넣었다. 그리고 _RandomWordsState class에 다음의 코드를 추가하였다.

 

  void _pushSaved() {
  }

 

그리고 실행시킨 결과 애뮬레이터가 실행되지 않았다...(이런...) 해당 코드의 문제는 아니고 컴퓨터 내에서의 설정? 혹은 실행 문제인 듯 한데, 반갑지 않은 오류다. 코드 실행은 둘째치고 이 부분부터 해결해야 할 것 같다.

 

분명 잘 되던 'flutter pub get'이 갑자기 오류가 떠버렸다. first_app이 on both cupertino_icons ^1.00 and ^0.1.2 인 상태가 문제인 것 같은데(아니 대체 제가 뭘 건드렸단 말입니까....?)

 

찾아보니 'pubspec.yaml'에서 cupertino_icons: ^1.0.0와 cupertino_icons: ^0.1.2가 동시에 있었다. 다행히 cupertino_icons ^1.0.0만을 남기는 방식으로 문제를 해결할 수 있었다.

 

정상적인 실행결과는 다음과 같다.

 

(이어서 계속...)