[Flutter] 블로그 만들기 - 기본 프로젝트 설정

Flutter로 블로그 앱을 만들기 위한 기본 프로젝트 설정을 정리한 글입니다. 필요한 라이브러리, 테마 설정, 네비게이션 및 기본 페이지 구조까지 포함되어 있습니다.

---

1. 프로젝트에 필요한 라이브러리 추가

pubspec.yaml에 필요한 라이브러리를 추가합니다.

cupertino_icons: ^1.0.8
flutter_svg: ^2.0.6
intl: ^0.18.1
dio: ^5.2.0 # 서버와 통신하기 위해 필요한 라이브러리 입니다.
flutter_riverpod: ^2.3.6 # 상태관리 Riverpod 라이브러리 입니다.
logger: ^1.3.0 # 콘솔창에서 결과물을 쉽게 확인할 수 있도록 하는 Log 라이브러리입니다.
flutter_secure_storage: ^8.0.0 # 어플리케이션 Secure Storage를 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.
pull_to_refresh: ^2.0.0

📌 설명

• dio: 서버와 HTTP 통신을 쉽게 처리할 수 있는 라이브러리
• flutter_riverpod: 상태 관리를 위한 Riverpod 라이브러리
• logger: 콘솔 로그를 보기 쉽게 출력하는 라이브러리
• flutter_secure_storage: 보안 저장소를 쉽게 사용할 수 있도록 도와주는 라이브러리
• pull_to_refresh: 리스트를 새로고침할 수 있도록 하는 라이브러리

---

2. Linter 설정

코드 스타일과 품질을 검사하는 linter 설정을 추가합니다.

linter

#linter란?
# 코드 스타일과 품질을 검사하여 코드에 있는 잠재적 오류
# 스타일 위반, 비효율적 패턴 등을 알려주는 도구입니다.
linter:
  # The lint rules applied to this project can be customized in the
  # section below to disable rules from the `package:flutter_lints/flutter.yaml`
  # included above or to enable additional rules. A list of all available lints
  # and their documentation is published at https://dart.dev/lints.
  #
  # Instead of disabling a lint rule for the entire project in the
  # section below, it can also be suppressed for a single line of code
  # or a specific dart file by using the `// ignore: name_of_lint` and
  # `// ignore_for_file: name_of_lint` syntax on the line or in the file
  # producing the lint.
  rules:
    # 상수로 선언 가능한 생성자에 대해 경고를 표시하지 않음으로 설정.
    prefer_const_constructors: false
    # 변하지 않는 변수에 대해 const로 선언하지 않아도 경고를 표시하지 않음.
    prefer_const_declarations: false
    # 불변 컬렉션(List, Map, Set 등)에 대해 const를 사용하지 않아도 경고를 표시하지 않음.
    prefer_const_literals_to_create_immutables: false
    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
    # avoid_print: false  # Uncomment to disable the `avoid_print` rule
    # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule

📌 설명

• prefer_const_constructors: 상수로 선언 가능한 생성자에 대해 경고를 표시하지 않음
• prefer_const_declarations: 변하지 않는 변수에 대해 const를 선언하지 않아도 경고를 표시하지 않음
• prefer_const_literals_to_create_immutables: 불변 컬렉션(List, Map, Set 등)에 대해 const를 사용하지 않아도 경고를 표시하지 않음

---

3. 기본 페이지 뼈대 만들기

아래와 같이 블로그의 기본적인 화면을 구성합니다.

📌 회원가입 페이지

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

📌 로그인 페이지

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

📌 게시글 작성 페이지

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

---

4. UI에서 사용될 공통 상수 정의

간격이나 화면 크기 등을 쉽게 관리할 수 있도록 상수를 설정합니다.

import 'package:flutter/material.dart';

const double smallGap = 5.0;
const double mediumGap = 10.0;
const double largeGap = 20.0;
const double xlargeGap = 100.0;

// 간혹 현재 모바일 크기의 가로 , 세로 크기를 동적으로 가져와야 할 때가 있다.
double getScreenWidth(BuildContext context) {
  return MediaQuery.of(context).size.width;
}

// Drawer의 너비 설정
double getDrawerWidth(BuildContext context) {
  return getScreenWidth(context) * 0.6;
}

// 현재 모바일 화면의 세로 크기 가져오기
double getScreenHeight(BuildContext context) {
  return MediaQuery.of(context).size.height;
}

---

5. 테마 설정 (ThemeData)

Flutter의 ThemeData를 설정하여 앱의 기본 스타일을 정의합니다.

import 'package:flutter/material.dart';

ThemeData theme() {
  return ThemeData(
    appBarTheme: appBarTheme(),
    useMaterial3: true,
  );
}

AppBarTheme appBarTheme() {
  return AppBarTheme(
    titleTextStyle: TextStyle(color: Colors.white, fontSize: 20),
    centerTitle: true,
    backgroundColor: Colors.black12,
    elevation: 0,
  );
}

📌 설명

• useMaterial3: true → Material 3 스타일 적용
• appBarTheme() → 앱바의 배경 색상 및 제목 스타일 설정

---

6. Logger 설정

앱에서 로그를 쉽게 출력할 수 있도록 logger 라이브러리를 설정합니다.

import 'package:logger/logger.dart';

final logger = Logger();

📌 설명

• Logger() → 디버깅 시 콘솔에서 로그를 보기 쉽게 출력

---

7. 네비게이션 설정

Flutter에서 페이지 이동을 관리하는 Navigator를 설정합니다.

import 'package:class_f_story/_core/constants/theme.dart';
import 'package:class_f_story/ui/pages/auth/join_page/join_page.dart';
import 'package:class_f_story/ui/pages/auth/login_page/login_page.dart';
import 'package:class_f_story/ui/pages/post/list_page/post_list_page.dart';
import 'package:class_f_story/ui/pages/post/write_page/post_write_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

// 사전 기반 --> Navigator(화면 전환을 관리하는 객체)  -- stack 구조로 화면을 관리 한다.
GlobalKey<NavigatorState> navigatorkey = GlobalKey<NavigatorState>();
// 고유 키를 생성 (GlobalKey) -> 모든 위젯은 고유 값을 식별하기 위해 키를 가질 수 있다.
// 전역 변수로 navigatorkey 선언 -> Navigator 관리 상태에 접근이 가능하다
// 현재 가장 위에 있는 context 를 알아 낼 수 있습니다.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // context 가 없는 곳에서 context를 사용할 수 있게 하는 방법
      navigatorKey: navigatorkey,
      debugShowCheckedModeBanner: false,
      home: LoginPage(),
      // initialRoute: LoginPage(),
      routes: {
        "/login": (context) => LoginPage(),
        "/join": (context) => JoinPage(),
        "/post/list": (context) => PostListPage(),
        "/post/write": (context) => PostWritePage()
      },
      theme: theme(),
    );
  }
}

📌 설명

• GlobalKey<NavigatorState>() → 전역적으로 Navigator를 관리할 수 있도록 설정
• routes → 로그인, 회원가입, 게시글 목록, 게시글 작성 페이지를 등록

---

8. 마무리

이번 글에서는 Flutter로 블로그 앱을 개발하기 위한 기본적인 프로젝트 설정을 다뤘습니다.

✅ 정리

• 필수 라이브러리 추가 (dio, flutter_riverpod, logger 등)
• linter 설정
• 기본 페이지 (LoginPage, JoinPage, PostWritePage)
• UI 상수 (gap, screenWidth, screenHeight 등)
• 앱 전체 테마 (ThemeData)
• logger 설정
• Navigator 및 라우팅 설정

다음 글에서는 회원가입 및 로그인 기능을 구현해보겠습니다. 🚀