[Flutter] 네이처 이미지 API를 사용하여 Flutter 앱 만드는 방법

16 Aug 2023

flutter

네이처 이미지 API를 사용하여 Flutter 앱을 만드는 것은 매우 재미있는 일입니다. 여기서는 간단한 예시를 들어보겠습니다.

프로젝트 설정: 먼저 Flutter 프로젝트를 생성합니다. 이를 위해 터미널에서 다음과 같은 명령어를 실행합니다.

`flutter create nature_image_app` 

패키지 추가: 네이처 이미지 API를 사용하기 위해서는 http 패키지를 추가해야 합니다. 이를 위해 pubspec.yaml 파일에 다음과 같은 내용을 추가합니다.

`dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.4` 

API 호출: 네이처 이미지 API를 호출하기 위해, http 패키지를 이용합니다. API에서 제공하는 이미지 중 하나를 불러오는 예시 코드는 다음과 같습니다.

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

class NatureImageApi {
  final String apiUrl =
      "https://api.unsplash.com/photos/random?query=nature&orientation=landscape&client_id=<your_access_key>";

  Future<String> getImageUrl() async {
    var response = await http.get(Uri.parse(apiUrl));
    var jsonData = json.decode(response.body);
    return jsonData['urls']['regular'];
  }
}` 

UI 구성: API를 호출하여 받은 이미지를 화면에 보여주는 UI를 구성합니다. 예시 코드는 다음과 같습니다.

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

void main() => runApp(NatureImageApp());

class NatureImageApp extends StatefulWidget {
  @override
  _NatureImageAppState createState() => _NatureImageAppState();
}

class _NatureImageAppState extends State<NatureImageApp> {
  final NatureImageApi api = NatureImageApi();

  String _imageUrl = '';

  void _loadImage() async {
    String imageUrl = await api.getImageUrl();
    setState(() {
      _imageUrl = imageUrl;
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Nature Image'),
        ),
        body: Center(
          child: _imageUrl.isEmpty
              ? CircularProgressIndicator()
              : Image.network(_imageUrl),
        ),
      ),
    );
  }
}` 

이제 앱을 실행하면, 네이처 이미지 API에서 가져온 이미지가 화면에 보여집니다. 이 예시 코드를 기반으로, 더 다양한 UI와 기능을 추가하여 보다 흥미로운 앱을 만들어보시기 바랍니다.