[flutter] 플러터로 책 읽기 앱 개발하기

12 Dec 2023

flutter

플러터는 Google에서 개발한 모바일 앱을 만들기 위한 오픈 소스 프레임워크입니다. 이번 포스트에서는 플러터를 사용하여 간단한 책 읽기 앱을 어떻게 개발하는지 알아보겠습니다.

1. 시작하기

우선, 플러터를 설치하고 프로젝트를 생성합니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '책 읽기 앱',
      home: BookList(),
    );
  }
}

2. 화면 디자인

앱의 기본적인 디자인을 설정합니다.

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

class BookList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('책 목록')),
      body: Center(
        child: Text('여기에 책 목록이 표시됩니다.'),
      ),
    );
  }
}

3. 책 목록 표시

가짜 데이터를 이용하여 책 목록을 표시합니다.

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

class BookList extends StatelessWidget {
  final List<String> books = ['책1', '책2', '책3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('책 목록')),
      body: ListView.builder(
        itemCount: books.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(books[index]),
          );
        },
      ),
    );
  }
}

4. 책 읽기 기능 추가

책을 클릭하면 해당 책의 내용을 표시하는 화면으로 이동합니다.

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

class BookDetail extends StatelessWidget {
  final String title;
  final String content;

  BookDetail(this.title, this.content);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(content),
      ),
    );
  }
}

5. 마치며

이번 포스트에서는 플러터를 사용하여 간단한 책 읽기 앱을 개발하는 방법을 살펴보았습니다. 더 많은 기능들을 추가하여 완벽한 책 읽기 앱을 만들어 보세요!

개발자 사이트: flutter.dev

이 문서는 참고용으로 작성되었습니다.

목차

1. 시작하기

2. 화면 디자인

3. 책 목록 표시

4. 책 읽기 기능 추가

5. 마치며