【Flutter】Datamuseを使って、オートコンプリート機能を実装

DatamuseAPIを使用して、英語のオートコンプリート機能を実装しました。

オートコンプリート機能は、予測変換のようなものです。

Datamuse APIは、単語やフレーズを見つけるためのクエリエンジンで、テキスト入力フィールドのオートコンプリート、検索関連性ランキング、アシスティブライティングアプリ、単語ゲームなど、さまざまな機能に使用されます。

使用制限は1日あたり100,000リクエストまでとなっており、それを超えるとレート制限される可能性があります。公開アプリ内でAPIを使用する場合は、アプリのドキュメント内でDatamuse APIに言及するように求められています。
https://www.datamuse.com/api/

コードは、表示された英単語をタップするとfirebaseに保存する処理になっています。

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Datamuse Autocomplete',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AutocompleteExample(),
    );
  }
}

class AutocompleteExample extends StatefulWidget {
  @override
  _AutocompleteExampleState createState() => _AutocompleteExampleState();
}

class _AutocompleteExampleState extends State<AutocompleteExample> {
  final TextEditingController _controller = TextEditingController();
  List<String> _suggestions = [];
  String _userId = 'your_user_id'; // 実際のユーザーIDに置き換えてください。

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

  Future<void> _getSuggestions(String query) async {
    Uri uri = Uri.https('api.datamuse.com', '/sug', {'s': query});
    http.Response response = await http.get(uri);
    final List<dynamic> data = json.decode(response.body);

    setState(() {
      _suggestions = data.map((e) => e['word'] as String).toList();
    });
  }

  Future<void> _saveWord(String word) async {
    final DocumentReference ref = FirebaseFirestore.instance
        .collection('users')
        .doc(_userId)
        .collection('words')
        .doc(); // 新しいドキュメントIDを自動生成

    await ref.set({'text': word});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Datamuse Autocomplete'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: TextField(
              controller: _controller,
              decoration: InputDecoration(
                hintText: '英単語を入力してください',
              ),
              onChanged: _getSuggestions,
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: _suggestions.length,
              itemBuilder: (context, index) {
                final String suggestion = _suggestions[index];
                return ListTile(
                  title: Text(suggestion),
                  onTap: () {
                    _saveWord(suggestion);
                    _controller.text = suggestion;
                  },
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}