Colin's Blog
[flutter] 플러터(expandable)을 이용한 책 읽기 앱 개발 방법

소개

이번 포스트에서는 플러터의 expandable 패키지를 활용하여 책 읽기 앱을 개발하는 방법에 대해 알아보겠습니다. expandable 패키지는 위젯을 확장/축소하는 것을 도와주며, 사용자가 텍스트를 쉽게 읽을 수 있는 환경을 제공합니다.

프로젝트 설정

먼저, expandable 패키지를 사용하기 위해서는 pubspec.yaml 파일에 패키지를 추가해야 합니다. 아래 코드를 pubspec.yaml 파일에 추가해주세요:

dependencies:
  expandable: ^5.0.1

이후 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

화면 구성

  1. ExpandableNotifier를 사용하여 expandable 위젯의 상태를 관리합니다.
  2. 책 제목을 표시할 Expandable 위젯을 생성합니다.
  3. 책 내용을 표시할 Expandable 위젯을 생성합니다.
  4. 화면에 책 제목과 내용을 표시합니다.
import 'package:flutter/material.dart';
import 'package:expandable/expandable.dart';

class BookReaderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ExpandableNotifier(
      child: Column(
        children: [
          Expandable(
            collapsed: Text(
              '책 제목',
              style: TextStyle(fontSize: 20),
            ),
            expanded: Text(
              '책 제목',
              style: TextStyle(fontSize: 20),
            ),
          ),
          SizedBox(height: 10),
          Expandable(
            collapsed: Text(
              '책 내용',
              style: TextStyle(fontSize: 16),
              maxLines: 3,
              overflow: TextOverflow.ellipsis,
            ),
            expanded: Text(
              '책 내용',
              style: TextStyle(fontSize: 16),
            ),
          ),
        ],
      ),
    );
  }
}

동작 테스트

이제 BookReaderApp 위젯을 메인 앱에 추가하여 동작을 테스트해보겠습니다. 아래와 같이 코드를 작성해주세요:

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Book Reader App'),
      ),
      body: BookReaderApp(),
    ),
  ));
}

위 코드를 실행하여 앱을 빌드하고 실행하면, 화면에 책 제목과 내용이 표시됩니다. 책 제목을 누르면 내용이 확장되고, 다시 누르면 축소됩니다.

이렇게 플러터의 expandable 패키지를 사용하여 책 읽기 앱을 개발하면 사용자들이 쉽게 책을 읽을 수 있는 환경을 제공할 수 있습니다. 추가적으로 디자인이나 기능을 개선하여 더욱 편리한 앱을 만들어보세요!

참고 자료

© 2018 Colin. All rights reserved.