Flutter 데모 앱 살펴보기 2 - Widget과 외부 패키지 사용법, 스크롤 기능

플러터 코드랩에서는 https://docs.flutter.dev/get-started/codelab#step-1-create-the-starter-flutter-app 라는 예제를 통해 Widget 다루는 방법, 외부 패키지를 불러들여 사용하는 방법, ListView를 통한 스크롤 기능을 소개하고 있습니다. 기본적으로 생성되는 데모 앱 다음 단계로 다루기 좋은 내용이라 한 번 살펴보도록 하겠습니다.

터미널에서 앱 생성하기



코드랩 예제는 터미널에서 플러터 앱 생성하는 방법으로 시작하고 있어서 저도 터미널에서 해당 프로젝트를 먼저 생성했습니다. 전체적으로는 터미널에서 iOS 시뮬레이터를 띄우고 (open -a Simulator), startup_namer라는 플러터 앱을 생성한 후 (flutter create startup_namer), startup_namer 프로젝트를 Android Studio에서 열어보는 (studio startup_namer) 순서로 진행했습니다.

startup_namer 앱으로 바꾸기

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

Android Studio에서 startup_namer 프로젝트를 연 후 가장 먼저 할 일은 lib/main.dart 파일에서 기존 데모 앱 코드를 지우고 위 코드를 추가해주는 것입니다. 그럼 다음 이미지와 같이 Hello, World가 찍히는 Stateless Widget 하나가 덩그러니 보이게 됩니다. Stateless Widget이기 때문에 상태를 변화시키는 함수나 변수는 사용하지 않게 됩니다.

외부 패키지 설치하기 (pubspec.yaml)

이번 앱에서는 외부 패키지를 적용하는 방법도 다루고 있는데요, english_words라는 패키지에서 WordPair 클래스를 가져다 쓰게 됩니다. WordPair 클래스를 통해 앱 화면에서 출력되는 텍스트를 'Hello World'에서 두 영어 단어의 조합으로 된 텍스트 출력으로 바꿔줍니다. 예를 들면 'AirKey' 같은 단어로 말이죠.

외부 패키지가 필요한 경우에는 먼저 pubspec.yaml (yaml은 야믈 또는 얘믈로 발음) 파일에서 추가할 패키지 이름과 버전을 적어줍니다.
그러면 상단 Flutter Commands에서 Pub get이라는 단어가 보이는데 클릭해서 패키지를 설치해줍니다.

패키지 설치 시 하단에서는 터미널을 통해 진행 상황을 알려줍니다.

패키지 설치 후에는 WordPair.random() 함수를 통해 생성한 랜덤 영단어 페어를 wordPair라는 변수에 저장하고, Text 위젯에 파라미터로 이 변수를 넣어줘서 화면에 출력되게 만들어 줍니다. 기본적인 폰트 크기가 작아서 약간 수정해주었습니다. 오른쪽은 iOS 시뮬레이터에서 보이는 결과 화면입니다.

Stateful Widget

이 앱에서는 스크롤을 통해 다음 화면으로 넘어갈 때마다 새로운 영단어 페어를 보여주는 기능이 있습니다. 화면의 상태가 변할 때, 이 기능이 동작하도록 Stateful Widget을 상속하는 RandomWords 클래스를 만들어 줍니다. Stateful Widget을 만들 때는 IDE에 stful이라는 단어를 치고 탭 키를 누르면, 아래 이미지와 같이 기본적인 Stateful Widget 타입 클래스 골격을 만들어 줍니다.

텍스트 표시를 담당하는 RaondomWords 클래스를 만들어서 Material App에서도 이 단어를 보여주도록 구성한 코드입니다.

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: Center(
          child: RandomWords()
        ),
      ),
    );
  }
}

class RandomWords extends StatefulWidget {
  const RandomWords({super.key});

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(
      wordPair.asPascalCase,
      style: TextStyle(fontSize: 30),
    );
  }
}

 

이전 코드에서의 실행 상태와 다르지는 않지만 이제 RandomWords 클래스에 _suggestions라는 WordPair 리스트 변수를 추가해 여러 개의 WordPair를 담을 수 있게 하고, ListView를 통해 WordPair 리스트를 보여줍니다.

그 다음 ListTile을 추가해 Text가 출력되는 형식을 좀 더 다듬어 줍니다.

최종적으로는 아래 코드를 통해 startup_namer 앱의 스크롤 가능한 word pair 리스트 출력 기능이 완성되었습니다!

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Startup Name Generator',
      home: RandomWords()
    );
  }
}

class RandomWords extends StatefulWidget {
  const RandomWords({super.key});

  @override
  State<RandomWords> createState() => _RandomWordsState();
}

class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Startup Name Generator'),
        ),
        body: _buildSuggestions(),
    );
  }


  Widget _buildSuggestions() {
    //final wordPair = WordPair.random();
    return ListView.builder(
      padding: const EdgeInsets.all(16),
      itemBuilder: /*1*/ (BuildContext context, int i) {
        if (i.isOdd) return const Divider(); /*2*/

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

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