[Flutter] 플러터 기초 내용 정리 - Part 2

💡 아래는 Part 1에서 이어지는 내용

 

Data Fetching

---

객체지향 언어인 Dart는 거의 대부분이 클래스 기반으로 구성된다. API 호출, 응답 데이터 타입 정의, 데이터 처리 역시 모두 클래스 내부에서 이루어진다.

 

먼저 응답 데이터를 나타내는 모델 클래스를 정의한다. 일반적으로 fromJson 이라는 이름 있는 생성자를 사용하여 JSON 데이터를 인스턴스화 시킨다. 아래 예시에선 JSON 객체를 인자로 받기 때문에 초기화 리스트를 사용하여 클래스 필드에 할당하고 있다.

// lib/models/webtoon_model.dart

class WebtoonModel {
  final String id, title, thumb;

  WebtoonModel.fromJson(Map<String, dynamic> json)
      : title = json['title'],
        thumb = json['thumb'],
        id = json['id'];
}

 

Dart의 네트워크 호출은 주로 http 패키지를 사용한다. 브라우저, Node.js에서 사용할 수 있는 fetch 함수와 비슷하다고 보면 된다. pubspec.yaml 파일 dependencies 목록에 http: 버전 을 추가하면, IDE가 자동으로 인식하여 의존성 추가 여부 팝업이 표시된다. 혹은 Pub get 버튼을 눌러서 바로 추가할 수도 있다. 패키지를 제거할 때도 dependencies 목록에서 지운 후 Pub get 버튼을 누르면 된다.

 

 

• pub get: 패키지 다운로드/설치 (최초 프로젝트 설정 혹은 패키지 추가 후 사용)
• pub upgrade: 사용 중인 패키지들을 가능한 최신 버전으로 업그레이드
• pub outdated: 사용 중인 패키지들의 현재 버전과 업그레이드 가능한 버전을 비교해서 표시

 

그 후 데이터를 불러오고, 불러온 데이터를 처리하는 API 서비스 클래스를 정의한다. BaseUrl과 같은 값은 변경되지 않기 때문에 const 키워드를 사용하여 컴파일 상수로 선언한다. 이러한 값은 여러 인스턴스에서 동일하게 사용하므로 클래스의 정적(static) 필드로 정의하는게 적합하다. 데이터 패칭 로직은 별도의 메서드에 작성한다.

// services/api_service.dart

import 'dart:convert';

import 'package:http/http.dart' as http;

import '../models/webtoon_model.dart';

class ApiService {
  static const String baseUrl = 'webtoon-crawler.nomadcoders.workers.dev';
  static const String today = "today";

  // 오늘의 웹툰 목록을 불러오는 메서드. async 키워드를 붙였기 때문에 Future를 반환한다. 
  static Future<List<WebtoonModel>> getTodayToons() async {
    try {
      // baseUrl과 today를 사용해 HTTPS URI 생성
      // Uri.parse(...)로도 가능(이땐 주소에 프로토콜까지 모두 명시)
      final uri = Uri.https(baseUrl, '/$today');
      // 생성한 URI로 GET 요청을 보내고 응답 대기
      final response = await http.get(uri);

      if (response.statusCode == 200) {
        // String으로 받은 응답 데이터를 JSON으로 디코딩. json.decode(...)로도 가능
        final List<dynamic> webtoons = jsonDecode(response.body);
        // 디코딩된 각 JSON 데이터를 WebtoonModel 인스턴스로 매핑하여 리스트로 반환
        return webtoons.map((data) => WebtoonModel.fromJson(data)).toList();
      } else {
        // 상태 코드가 200이 아닐 경우, 예외 발생
        throw Exception('Failed to load webtoons: ${response.statusCode}');
      }
    } on http.ClientException catch (e) {
      // HTTP 클라이언트 예외 발생 시
      throw Exception('Failed to fetch webtoons: $e');
    } on Exception catch (e) {
      // 기타 예외 발생 시
      throw Exception('An unknown error occurred: $e');
    }
  }
}

// 사용 예시. 콘솔 출력: [Instance of 'WebtoonModel', ...]
ApiService.getTodayToons().then(print);

 

Uri.https 생성자를 사용하면 프로토콜이 포함된 URI 주소를 생성한다. 첫 번째 인자는 보통 도메인 주소를, 두번째 인자는 리소스에 대한 경로(path)를 지정한다. 이때 경로 가장 앞에는 / 슬래시를 붙여야 하고, 내부적으로 자동 인코딩 되기 때문에, 인코딩되지 않은 주소를 넘겨야 한다.

 

on 예외유형 구문은 특정 예외 유형을 지정할 때 사용한다. 예외 객체가 필요할 땐 on 예외유형 catch 구문을 사용한다. 일치하는 예외 유형이 없으면 다음 블록으로 넘어가고, 예외를 처리할 블록이 없을 경우엔 프로그램이 종료되기 때문에 일반 catch 블록도 함께 지정해주는 것이 좋다.

 

데이터 패칭/처리 과정을 정리하면 아래와 같다.

1. URI 생성 : Uri.https()
2. 네트워크 요청 : http.get()
3. 문자열을 JSON으로 변환 : jsonDecode()
4. JSON 각 항목을 데이터 모델로 맵핑 후 리스트로 반환

 

 

FutureBuilder

---

FutureBuilder는 비동기 작업의 상태를 추적하고, 그 결과에 따라 UI를 자동으로 업데이트할 수 있는 위젯이다. FutureBuilder는 Future 객체를 인자로 받아 해당 작업이 완료되면 builder 함수를 통해 UI를 다시 렌더링한다. then, await 등을 사용하지 않고도 비동기 작업 상태에 따라 UI를 관리할 수 있는 장점이 있다. React 18버전부터 지원하는 Suspense와 유사하다고 볼 수 있다.

 

FutureBuilder를 사용하지 않으면 isLoading 내부 상태를 추가하고, initState 같은 라이프사이클 메서드를 사용하기 위해 StatefulWidget으로 작성해야한다. 이로인해 거추장스러운 보일러플레이트가 많아진다 .

// FutureBuilder를 사용하지 않았을 때

class HomeScreen extends StatefulWidget {
  // ...
}

class _HomeScreenState extends State<HomeScreen> {
  List<WebtoonModel> webtoons = [];
  bool isLoading = true;

  void waitForWebToons() async {
    webtoons = await ApiService.getTodayToons();
    isLoading = false;
    setState(() => {});
  }

  @override
  void initState() {
    super.initState();
    waitForWebToons();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(/* ... */),
    );
  }
}

 

FutureBuilder를 사용하면 StatefulWidget을 사용하지 않고도 선언적인 방식으로 비동기 작업을 처리할 수 있다. FutureBuilder의 future 속성에 비동기 작업을 반환하는 Future 객체를 넣어주면, 비동기 작업의 상태가 변경될 때마다 builder 함수가 실행돼서 UI를 업데이트한다.

// FutureBuilder를 사용했을 때

// ...
import 'package:practice_flutter/services/api_service.dart';

class HomeScreen extends StatelessWidget {
  HomeScreen({super.key});

  late final Future<List<WebtoonModel>> webtoons = ApiService.getTodayToons();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(/* ... */),
      body: FutureBuilder(
        future: webtoons,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            // 로딩 중일 때
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            // 에러가 발생했을 때
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            // 데이터 있을 때 (생략)
          }
          // 데이터 없을 때
          return const Center(child: Text('No data available'));
        },
      ),
    );
  }
}

 

builder 함수의 두 번째 파라미터 snapshot은 Future의 상태를 나타내는 객체로 다양한 속성을 제공한다. 이를 이용해 현재 상태에 맞는 UI를 적절하게 표시할 수 있다.

• connectionState: 비동기 작업의 현재 상태
  • none: Future가 시작되지 않음
  • waiting: Future가 실행 중이며, 결과 대기 중
  • active: Future 진행 중 (주로 StreamBuilder에서 사용)
  • done: Future 완료
• hasData: 성공적으로 데이터를 받으면 true 반환
• hasError: 에러 발생 시 true 반환
• data: 완료 후 반환된 데이터
• error: 발생한 에러 메시지 또는 객체

 

 

ListView

---

스크롤 할 수 있는 목록을 표시할 때 ListView 위젯을 사용한다. ListView는 기본적으로 스크롤 기능을 지원하여 데이터가 화면을 초과할 경우 스크롤할 수 있다. 데이터 양이 많다면 ListView.builder 생성자를 사용해서 지연 로딩(Lazy Loading)을 적용할 수도 있다.

// 기본 사용법

ListView(
  children: <Widget>[
    ListTile(
      leading: Icon(Icons.map), // 카드 가장 왼쪽에 나타나는 요소
      title: Text('Map'), // 카드 우측 상단 제목
    ),
    ListTile(
      leading: Icon(Icons.photo_album),
      title: Text('Album'),
    ),
    ListTile(
      leading: Icon(Icons.phone),
      title: Text('Phone'),
    ),
  ],
)

 

ListView.builder 생성자는 화면에 노출된 항목들만 빌드하기 때문에 성능 최적화가 필요한 상황이나 무한 스크롤 등을 구현할 때 유용하게 쓰인다. 특히, 데이터가 많거나 동적으로 추가될 때 이전에 노출된 항목을 재사용하여 메모리를 절약할 수 있다.

class HomeScreen extends StatelessWidget {
  HomeScreen({super.key});

  late final Future<List<WebtoonModel>> webtoons = ApiService.getTodayToons();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(/* ... */),
      body: FutureBuilder(
        future: webtoons,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              // 스크롤 방향 지정
              scrollDirection: Axis.horizontal,
              // 아이템 총 개수 지정
              itemCount: snapshot.data!.length,
              // 화면에 노출된 아이템을 생성할 때 호출되는 함수
              itemBuilder: (BuildContext context, int index) {
                var webtoon = snapshot.data![index];
                return Text(webtoon.title);
              },
            );
          }
          return const Center(
            child: CircularProgressIndicator(),
          );
        },
      ),
    );
  }
}

 

itemCount 속성으로 아이템의 총 개수를 지정하면 빌더가 호출될 횟수를 미리 계산해서 리스트를 더 효율적으로 생성한다. itemBuilder는 각 아이템을 생성할 때 호출되는 함수로 아이템이 화면에 노출될 때마다 해당 아이템의 인덱스 정보가 itemBuilder 두 번째 인자로 전달된다.

 

출력 화면

리스트 항목 사이에 구분선을 넣을 수 있는 ListView.separated 생성자도 있다. 각 아이템 사이에 간격을 추가하거나 특정 위젯을 표시할 때 사용한다. separatorBuilder는 리스트 항목 사이에 들어갈 구분선을 생성하는 함수로, 구분선이 화면에 노출될 때마다 호출되고, 두 번째 인자로 노출 중인 항목의 인덱스가 전달된다.

class HomeScreen extends StatelessWidget {
  HomeScreen({super.key});

  late final Future<List<WebtoonModel>> webtoons = ApiService.getTodayToons();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(/* ... */),
        body: FutureBuilder(
          future: webtoons,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.separated(
                scrollDirection: Axis.horizontal,
                itemCount: snapshot.data!.length,
                itemBuilder: (BuildContext context, int index) {
                  var webtoon = snapshot.data![index];
                  return Text(webtoon.title);
                },
                // 화면에 노출된 아이템 사이에 구분선을 생성할 때 호출
                separatorBuilder: (BuildContext context, int index) {
                  return const SizedBox(width: 10);
                },
              );
            }
            return const Center(child: CircularProgressIndicator());
          },
        ));
  }
}

 

출력 화면

 

Image.network

---

네트워크 상의 이미지를 불러올 때 Image.network 생성자를 사용한다. Image.network는 로딩 처리를 위한 loadingBuilder, 에러 처리를 위한 errorBuilder 메서드를 제공하며, 이미 다운로드한 이미지는 기본적으로 기기에 저장된 캐시를 재사용한다.

Image.network(
  // 불러올 이미지 URL
  'https://example.com/image.png',
  // 이미지를 로드하는 동안 표시할 위젯 정의
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent? loadingProgress) {
    if (loadingProgress == null) {
      return child; // 로드 완료 시 이미지(child) 반환
    } else {
      return Center(
        // 진행률을 표시하는 원형 인디케이터. value는 0.0~1.0 사이의 값. null이면 무한 로딩 인디케이터로 동작
        child: CircularProgressIndicator(
          value: loadingProgress.expectedTotalBytes != null
              ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes!
              : null, // 이미지 크기를 알 수 없는 경우 null 반환
        ),
      );
    }
  },
  // 이미지 로드에 실패했을 때 표시할 위젯 정의
  errorBuilder: (BuildContext context, Object error, StackTrace? stackTrace) {
    return Text('이미지 로드 실패');
  },
  // 네트워크 요청에 필요한 HTTP 헤더 지정
  headers: const {
    'Referer': 'https://example.com',
  },
  // 이 외에도 width, height, fit 등의 매개변수를 통해 이미지 표시 방식을 조절할 수 있다
)

 

loadingBuilder 콜백은 아래 3개의 파라미터를 받는다.

1. context: 현재 위젯 트리에서 Image.network가 위치한 빌드 컨텍스트.
2. child: 이미지 로드를 완료했을 때 표시할 실제 이미지.
3. loadingProgress: 이미지 로드 상태를 나타내는 ImageChunkEvent 객체. 로드 완료 시 null 반환. 이 객체는 아래 두 속성을 가진다.
   • cumulativeBytesLoaded: 현재까지 다운로드한 바이트 수 (int).
   • expectedTotalBytes: 이미지 파일의 예상 총 바이트 수 (int?). 이미지 크기를 알 수 없으면 null 반환.

 

 

GestureDetector

---

사용자의 터치 동작을 감지하고 처리할 때 GestureDetector 위젯을 사용한다. 탭, 더블탭, 드래그, 스와이프 등 다양한 제스처를 감지할 수 있다. 웹개발에서 자주 사용하는 onClick, onChange 이벤트와 비슷하게 작동한다고 보면 된다.

 

GestureDetector 클래스의 child 속성에 터치 이벤트를 감지할 위젯을 추가하고, 원하는 제스처에 대한 콜백을 정의하면 이벤트가 발생할 때마다 대응하는 콜백이 실행된다.

GestureDetector(
  onTap: () {
    print('탭 감지');
  },
  onDoubleTap: () {
    print('더블탭 감지');
  },
  onLongPress: () {
    print('롱프레스 감지');
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text('터치'),
    ),
  ),
);

 

 

Page Transition

---

Navigator.push와 MaterialPageRoute를 사용하면 새로운 페이지를 스택(stack)에 추가하여 다른 화면으로 이동할 수 있다. 웹 브라우저의 페이지 내비게이션처럼(앞으로/뒤로가기) 플러터도 화면 전환을 스택 구조로 관리한다. 새로운 화면으로 이동할 땐 페이지가 스택에 쌓이고, 뒤로가기 시엔 스택에서 제거된다.

 

Navigator.push는 새로운 화면(페이지)을 스택에 추가하는 역할을 하며, MaterialPageRoute는 새로운 페이지를 생성하고 Material Design 가이드를 따른 화면 전환 애니메이션을 제공한다.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(),
    fullscreenDialog: true,
  ),
  // ...
);

 

기본적으로 화면 전환 애니메이션은 오른쪽에서 왼쪽으로 슬라이드 되면서 새로운 페이지가 나타나고, 상단에 뒤로 가기 버튼이 표시된다. fullscreenDialog 속성을 true로 설정하면, 새로운 페이지가 아래에서 위로 슬라이드 되면서 전체 화면 모드로 열리며, 뒤로 가기 버튼 대신 닫기 버튼이 표시된다. 이 방식은 주로 설정 페이지나 별도의 확인 창을 열 때 유용하다. 참고로 fullscreenDialog의 애니메이션 동작은 플랫폼마다 다를 수 있다.

 

(좌)fullscreenDialog: false(기본값), (우)fullscreenDialog: true

 

새로운 페이지는 완전히 독립적인 화면이기 때문에 Scaffold 위젯을 사용하여 기본 구조를 정의해야 한다. 이를 통해 앱바(appBar), 본문(body), 플로팅 액션 버튼과 같은 레이아웃 요소를 새롭게 구성할 수 있다.

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('Welcome to Second Page'),
      ),
    );
  }
}

 

 

Hero

---

Hero 위젯은 두 화면(페이지) 간의 자연스러운 전환 애니메이션을 제공하여, 특정 UI 요소가 마치 화면을 가로질러 이동하는 듯한 시각적 효과를 만든다. 예를 들어 Navigator를 통해 A 화면에서 B 화면으로 이동할 때 A와 B 화면에서 공통으로 사용하는 요소를 Hero 위젯으로 감싸면, 해당 요소가 두 화면 사이를 자연스럽게 이동하는 듯한 애니메이션이 적용된다. 이를 통해 사용자는 화면 전환 시 일관성 있고 부드러운 사용자 경험을 얻을 수 있으며, 앱의 흐름을 더 쉽게 이해할 수 있다.

 

코드 출처 - Flutter 공식 문서

Hero 위젯은 사용 방법도 간단하다. Hero 전환 효과를 주고 싶은 A, B 화면의 요소를 각각 Hero 위젯으로 감싼 후 고유한 tag 값을 지정하면 된다. Hero 위젯은 이미지 갤러리, 카드 리스트 또는 화면 전환 시 시각적 연결감을 강조하고자 할 때 유용하다.

// ...

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SecondScreen(),
            ),
          );
        },
        child: Hero(
          // 두 화면의 Hero 위젯 tag 값을 동일하게 지정한다
          tag: 'hero-tag',
          child: Image.asset(
            'assets/my_image.png',
            width: 100,
            height: 100,
          ),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Hero(
          // 두 화면의 Hero 위젯 tag 값을 동일하게 지정한다
          tag: 'hero-tag',
          child: Image.asset(
            'assets/my_image.png',
            width: 300,
            height: 300,
          ),
        ),
      ),
    );
  }
}

 

 

Refer to Parent Widget

---

Stateful 위젯에서 부모 위젯의 데이터나 설정을 참조할 땐 widget을 사용한다.

 

Stateful 위젯을 정의할 때, _MyWidget extends State<MyWidget> 형식으로 이 위젯의 상태를 관리하는 별도의 State 클래스를 생성한다. State 클래스 내부에선 widget 접근자 속성을 제공하는데, 이 속성을 통해 부모 프로퍼티나 데이터에 접근할 수 있다.

// Stateful 위젯
class DetailScreen extends StatefulWidget {
  final String title, thumb, id;

  const DetailScreen({
    super.key,
    required this.title,
    required this.thumb,
    required this.id,
  });

  @override
  State<DetailScreen> createState() => _DetailScreenState();
}

// State 클래스
class _DetailScreenState extends State<DetailScreen> {
  late Future<WebtoonDetailModel> webtoon;
  late Future<List<WebtoonEpisodeModel>> episodes;

  @override
  void initState() {
    super.initState();
    // widget 접근자 속성을 통해 부모 위젯의 프로퍼티 접근
    webtoon = ApiService.getToonById(widget.id);
    episodes = ApiService.getLatestEpisodesById(widget.id);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(/* ... */);
  }
}

 

위 코드에서 getToonById, getLatestEpisodesById는 id를 받아야 하는 함수들이다. 이 id는 부모 위젯인 DetailScreen이 생성될 때 전달되지만, State 클래스가 초기화되기 전까진 부모 위젯의 프로퍼티에 안전하게 접근할 수 없다.

 

때문에 부모 위젯의 정보를 필요로 하는 프로퍼티들은 late 키워드를 사용하여 선언하고(null 안전성 보장), 실제 데이터 할당은 initState() 실행 시점으로 지연시켜야 한다. initState()는 상태 클래스의 초기화가 완료된 후 호출되므로, 이 시점에 widget 프로퍼티에 접근하는 것은 안전하다.

 

 

SingleChildScrollView

---

화면을 벗어난 콘텐츠를 스크롤 가능하도록 만들 때 SingleChildScrollView 클래스(위젯)를 사용할 수 있다. 이 클래스는 하나의 자식 위젯만 포함할 수 있으며, scrollDirection 속성을 통해 스크롤 방향(가로/세로)을 설정할 수 있다. 기본값은 세로 스크롤이다.

SingleChildScrollView(
  scrollDirection: Axis.horizontal, // 가로 스크롤 설정
  child: Row(
    children: [
      // ...
    ],
  ),
)

 

ListView 같은 다른 스크롤 가능한 위젯과 함께 사용하면 충돌이 발생할 수 있으므로 주의하자. SingleChildScrollView는 주로 콘텐츠 양이 적을 때 사용하기 좋다. 데이터양이 많다면 지연 로딩을 지원하는 ListView를 사용하는게 더 적절할 수 있다.

 

 

URL Launcher

---

URL Launcher는 앱에서 외부 애플리케이션을 실행할 수 있게 해주는 패키지다. 웹 페이지를 브라우저에서 열거나, 전화 걸기, 이메일/메시지 전송 등의 작업을 수행해야 할 때 사용한다. 예를들어 사용자가 앱 내에서 링크를 클릭하면 사파리 같은 외부 앱을 통해 해당 페이지를 열도록 할 수 있다.

 

구분	스키마
웹 페이지 열기	https:<URL>
이메일 보내기	mailto:<email address>?subject=<subject>&body=<body>
전화 걸기	tel:<phone number>
문자 보내기	sms:<phone number>
파일 열기	file:<path>

 

URL 스키마는 해당 스키마를 처리할 수 있는 앱이 기기에 설치되어 있을 때만 작동한다. 예를들어 iOS 시뮬레이터엔 기본적으로 메일, 전화 앱이 설치되어 있지 않기 때문에 tel:, mailto: 스키마를 실행할 수 없다.

 

URL 스키마를 실행하려면 허용할 스키마 목록을 미리 명시해야 한다. iOS는 Info.plist 파일을 수정해야하고, 안드로이드는 AndroidManifest.xml 파일을 수정해야 한다. 아래는 URL을 브라우저에서 열기 위해 https 스키마를 허용하도록 설정한 예시.

 

ios/Runner/Info.plist ▼

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  <!-- 앱에서 특정 URL 스킴을 사용할 수 있도록 허용 -->
  <key>LSApplicationQueriesSchemes</key>
  <array>
    <string>https</string>
  </array>
</dict>
</plist>

 

💡 Info.plist, AndroidManifest.xml 처럼 네이티브 구성 요소를 정의하는 파일은 Hot Reload, Hot Restart만으로는 변경사항이 반영되지 않고, 앱을 완전히 종료한 후 다시 빌드 및 실행 해야 한다.

• Hot Reload : 상태는 유지하면서 코드 변경 사항 반영. main(), initState() 다시 실행 안함.
• Hot Restart : 모든 상태를 초기화하여 앱 재시작. main() 다시 실행.

 

URL Launcher 패키지는 특정 URL을 열 때 사용하는 launchUrl(Uri), 문자열 URL을 직접 전달하여 실행할 수 있는 launchUrlString(String), 특정 URL의 실행 여부를 확인할 수 있는 canLaunchUrl(Uri) 함수를 제공한다.

import 'package:url_launcher/url_launcher.dart';

class Episode extends StatelessWidget {
  // ...

  static const String baseUrl = 'https://comic.naver.com/webtoon/detail';

  // ...

  onEpisodeTab() async {
    final uri = Uri.parse(baseUrl).replace(queryParameters: {
      'titleId': webtoonId,
      'no': episode.id,
    });
    // Uri.https 생성자를 사용할 수도 있음
    // final uri = Uri.https('comic.naver.com', 'webtoon/detail', {
    //   'titleId': webtoonId,
    //   'no': episode.id,
    // });

    // launchUrl은 비동기 함수로 Future를 반환함.
    // 에피소드를 탭했을 때, 지정된 주소로 이동.
    // 예: https://comic.naver.com/webtoon/detail?titleId=...&no=...
    await launchUrl(uri);
  }

  // ...
}

 

문자열 보간법(${...} 으로 문자열에 변수 삽입)으로 쿼리 파라미터를 직접 입력하면 오타를 내기 쉬우므로 위처럼 replace() 메서드를 사용하거나 Uri() 생성자를 이용하는 방식이 더 구조적이고 안전하다.

 

에피소드를 터치하면 launchUrl 함수를 통해 인앱 브라우저에서 링크가 열리는 모습(GIF)

 

SharedPreferences

---

SharedPreferences는 키-값 쌍으로 이루어진 데이터를 영구적으로 저장할 때 사용하는 플러그인이다(플러터 팀에서 개발). 이 플러그인을 사용하면 사용자 장치의 로컬 스토리지에 데이터를 저장하기 때문에 앱을 종료하고 다시 실행해도 데이터는 유지된다. 웹 브라우저의 로컬 스토리지와 비슷하다고 보면 된다.

 

데이터는 디스크에 비동기적으로 저장되며, 쓰기 작업을 호출한 후 데이터가 즉시 저장된다고 보장할 수 없기 때문에(데이터의 일관성 보장 안함) 중요한 데이터를 저장하는 것은 권장하지 않는다. 주로 앱 설정, 사용자 선호도, 간단한 상태 정보 같은 작은 데이터를 저장할 때 적합하다.

 

SharedPreferences는 int, bool, double, String, List<String> 총 5가지 자료형으로 저장할 수 있으며, 각 자료형에 맞는 메서드를 사용해야 한다.

 

쓰기 메서드 ▼

// SharedPreferences 인스턴스를 불러온 후 prefs 변수에 할당
final SharedPreferences prefs = await SharedPreferences.getInstance();

// 'counter' 키에 정수 값 저장
await prefs.setInt('counter', 10);
// 'repeat' 키에 불리언 값 저장
await prefs.setBool('repeat', true);
// 'decimal' 키에 실수 값 저장
await prefs.setDouble('decimal', 1.5);
// 'action' 키에 문자열 값 저장
await prefs.setString('action', 'Start');
// 'items' 키에 문자열 리스트 저장
await prefs.setStringList('items', <String>['Earth', 'Moon', 'Sun']);

 

읽기 메서드 ▼

// 'counter' 키 데이터 조회. 존재하지 않으면 null 반환
final int? counter = prefs.getInt('counter');
// 'repeat' 키 데이터 조회. 존재하지 않으면 null 반환
final bool? repeat = prefs.getBool('repeat');
// 'decimal' 키 데이터 조회. 존재하지 않으면 null 반환
final double? decimal = prefs.getDouble('decimal');
// 'action' 키 데이터 조회. 존재하지 않으면 null 반환
final String? action = prefs.getString('action');
// 'items' 키 데이터 조회. 존재하지 않으면 null 반환
final List<String>? items = prefs.getStringList('items');

 

제거 메서드 ▼

// 'counter' 키의 데이터 삭제
await prefs.remove('counter');

 

아래는 웹툰의 좋아요 상태를 스토리지에 저장하고 불러오는 예시. 위젯이 초기화되면 initPrefs 메서드를 호출하여 SharedPreferences 인스턴스를 불러오고, 저장된 좋아요 목록을 기반으로 isLiked의 초기 상태를 설정한다.

class _DetailScreenState extends State<DetailScreen> {
  // SharedPreferences 인스턴스를 저장할 멤버 변수
  late SharedPreferences prefs;

  // 좋아요한 웹툰 ID 목록을 저장할 때 사용하는 SharedPreferences 키
  static const likedToonsPrefsKey = 'likedToons';

  // 현재 웹툰의 좋아요 여부를 나타내는 상태 변수
  bool isLiked = false;

  // SharedPreferences 초기화 및 isLiked 초기 상태 설정
  Future<void> initPrefs() async {
    // SharedPreferences 인스턴스를 불러온 후 prefs 변수에 할당
    prefs = await SharedPreferences.getInstance();

    // 좋아요한 웹툰 ID 목록 불러오기
    final likedToons = prefs.getStringList(likedToonsPrefsKey);

    // 앱을 처음 실행해서 좋아요 목록이 없는 경우 빈 리스트로 초기화
    if (likedToons == null) {
      prefs.setStringList(likedToonsPrefsKey, []);
    } else {
      // 좋아요 목록에 현재 웹툰 ID가 포함되어 있는지 확인 후 isLiked 상태 설정
      setState(() {
        isLiked = likedToons.contains(widget.id);
      });
    }
  }

  @override
  void initState() {
    super.initState();
    initPrefs();
  }

  // 좋아요 상태 변경 메서드 (AppBar 우측 좋아요 버튼 클릭 시 호출)
  void onHeartTab() async {
    final likedToons = prefs.getStringList(likedToonsPrefsKey);
    if (likedToons == null) return;

    // 현재 isLiked 상태에 따라 웹툰 ID를 목록에 추가하거나 제거
    if (isLiked) {
      likedToons.remove(widget.id);
    } else {
      likedToons.add(widget.id);
    }

    // 업데이트한 좋아요 목록을 SharedPreferences에 저장
    prefs.setStringList(likedToonsPrefsKey, likedToons);

    // isLiked 상태 토글 및 UI 업데이트
    setState(() {
      isLiked = !isLiked;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        // AppBar 우측에 표시될 액션 위젯 목록 (아이콘 버튼 등)
        actions: [
          IconButton(
            onPressed: onHeartTab,
            icon: Icon(isLiked ? Icons.favorite : Icons.favorite_outline),
          ),
        ],
        // ...
      ),
      body: SingleChildScrollView(
        // ...
      ),
    );
  }
}

 

그 후 AppBar의 좋아요 버튼을 클릭 할 때마다 onHeartTab 메서드가 호출돼서 ①현재 isLiked 상태에 따라 좋아요 목록을 업데이트하고, ②업데이트한 좋아요 목록을 SharedPreferences에 저장한 후, ③isLiked 상태 토글 및 setState를 호출해서 UI를 업데이트한다.

 

AppBar 우측 좋아요 버튼. isLiked 상태가 true이면 filled 아이콘을, false이면 outlined 아이콘을 표시한다.

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요