[Flutter] Simpsons Quotes API를 이용하여 Flutter 앱 예제

16 Aug 2023

flutter

Simpsons Quotes API를 이용하여 Flutter 앱을 만들어드리겠습니다.

먼저 pubspec.yaml 파일에 http 패키지를 추가합니다.

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

다음으로 Simpsons Quotes API를 호출하여 명대사 데이터를 가져오는 service 클래스를 만듭니다.

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

class SimpsonsQuotesService {
  static const String baseUrl = 'https://thesimpsonsquoteapi.glitch.me/quotes';

  static Future<List<dynamic>> getQuotes() async {
    final response = await http.get(Uri.parse(baseUrl));

    if (response.statusCode == 200) {
      return json.decode(response.body);
    } else {
      throw Exception('Failed to load quotes');
    }
  }
}` 

이제 가져온 명대사 데이터를 보여주는 화면을 만들어봅시다.

`import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:simpsons_quotes/services/simpsons_quotes_service.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simpsons Quotes',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: MyHomePage(title: 'Simpsons Quotes'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late Future<List<dynamic>> _futureQuotes;

  @override
  void initState() {
    super.initState();
    _futureQuotes = SimpsonsQuotesService.getQuotes();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: FutureBuilder<List<dynamic>>(
          future: _futureQuotes,
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                  final quote = snapshot.data![index];
                  return ListTile(
                    title: Text(quote['quote']),
                    subtitle: Text(quote['character']),
                    leading: CircleAvatar(
                      backgroundImage: NetworkImage(quote['image']),
                    ),
                  );
                },
              );
            } else if (snapshot.hasError) {
              return Text("${snapshot.error}");
            }

            return CircularProgressIndicator();
          },
        ),
      ),
    );
  }
}` 

이제 앱을 실행해보면 Simpsons Quotes API에서 가져온 명대사 데이터를 볼 수 있습니다.

위 코드는 간단한 예제일 뿐이며, 필요에 따라서 UI를 더욱 개선하고 기능을 추가할 수 있습니다.