もっと
FlutterでBack4appからのバックエンドデータを使用したドロップダウンメニューの作成

10min
はじめに
Flutterで動的なドロップダウンメニューを作成するのに苦労したことはありませんか？あなたは一人ではありません！このガイドでは、Back4appバックエンドからオプションを取得するドロップダウンメニューの構築方法を説明します。思っているよりも簡単で、最後にはFlutterアプリに柔軟でデータ駆動のドロップダウンができるようになります。
ピザ配達サービスのアプリを作っていると想像してみてください。利用可能なトッピングは頻繁に変わるかもしれないので、ハードコーディングするのは理想的ではありません。そこで、バックエンド駆動のドロップダウンが役立ちます！
前提条件
始める前に、Back4appアカウントを持っていることを確認してください（心配しないで、サインアップは無料です）と、Flutterがあなたのマシンにインストールされていることを確認してください。Flutterが初めての場合は、インストールガイドを確認してください。ああ、DartとFlutterウィジェットの基本的な理解があると助かりますが、難しい部分はガイドします！
ステップ1 – Back4appバックエンドの設定
Back4appバックエンドを設定しましょう。心配しないで、思っているほど難しくはありません！
まず、Back4appアカウントにログインします。アカウントがない？問題ありません！Back4app.comにアクセスしてサインアップしてください – 無料で簡単です。
新しいバックエンドプロジェクトを作成します。'AwesomeDropdownData'のような賢い名前を付けるか、今日はあまりクリエイティブでない場合は'DropdownExample'にしましょう。
次に、Parseクラスを作成します。これは、ドロップダウンオプションのための特別なテーブルのようなものです。'Options'と呼びます（想像力豊かですよね？）。ドロップダウンの選択肢を保存するために、optionValue（String）という名前の列を追加します。
サンプルデータを追加する時間です！'Options'クラスにいくつかの美味しいピザトッピングを追加しましょう：
ペパロニ
マッシュルーム
エクストラチーズ
最後に、プロジェクト設定からアプリケーションIDとクライアントキーを取得します。これらはFlutterアプリをBack4appに接続するために必要です。
ステップ2 – Flutterプロジェクトの設定
新しいFlutterプロジェクトを作成しましょう。ターミナルを開き、プロジェクトのための快適な場所を見つけて、次のコマンドを実行します:
Bash
flutter create dropdown_example
flutter create dropdown_example
﻿
さて、いくつかの依存関係を追加しましょう。 pubspec.yaml を開いて、これらの行を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0  # Use the latest version available
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^3.1.0  # Use the latest version available
﻿
これらのパッケージを取得するために flutter pub get を実行するのを忘れないでください!
さて、FlutterアプリにBack4appとどのように通信するかを教えましょう。 lib/main.dart を開いて、このコードを追加します。少し intimidating に見えても心配しないでください – 分解していきます!
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DropdownMenuScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DropdownMenuScreen(),
    );
  }
}
﻿
必ず 'YOUR_BACK4APP_APP_ID' と 'YOUR_BACK4APP_CLIENT_KEY' を実際のBack4appの資格情報に置き換えてください。これらはアプリとBack4appの間の秘密の握手のようなものです!
ステップ 3 – ドロップダウンメニューの構築
さあ、楽しい部分です – ドロップダウンメニューを作成しましょう！
こちらが私たちの DropdownMenuScreen ウィジェットのコードです。見た目は多いかもしれませんが、分解して説明しますので、安心してください！
Dart
class DropdownMenuScreen extends StatefulWidget {
  @override
  _DropdownMenuScreenState createState() => _DropdownMenuScreenState();
}

class _DropdownMenuScreenState extends State<DropdownMenuScreen> {
  String? _selectedOption;
  List<String> _options = [];
  bool _loading = true;

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

  Future<void> _fetchOptions() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Options'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        _options = response.results!.map((e) => e.get<String>('optionValue')!).toList();
        _loading = false;
      });
    } else {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pizza Topping Selector')),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: DropdownButton<String>(
                value: _selectedOption,
                hint: Text('Choose your topping'),
                items: _options.map((String option) {
                  return DropdownMenuItem<String>(
                    value: option,
                    child: Text(option),
                  );
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedOption = newValue!;
                  });
                },
              ),
            ),
    );
  }
}
class DropdownMenuScreen extends StatefulWidget {
  @override
  _DropdownMenuScreenState createState() => _DropdownMenuScreenState();
}

class _DropdownMenuScreenState extends State<DropdownMenuScreen> {
  String? _selectedOption;
  List<String> _options = [];
  bool _loading = true;

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

  Future<void> _fetchOptions() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Options'));
    final response = await query.query();

    if (response.success && response.results != null) {
      setState(() {
        _options = response.results!.map((e) => e.get<String>('optionValue')!).toList();
        _loading = false;
      });
    } else {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pizza Topping Selector')),
      body: _loading
          ? Center(child: CircularProgressIndicator())
          : Center(
              child: DropdownButton<String>(
                value: _selectedOption,
                hint: Text('Choose your topping'),
                items: _options.map((String option) {
                  return DropdownMenuItem<String>(
                    value: option,
                    child: Text(option),
                  );
                }).toList(),
                onChanged: (String? newValue) {
                  setState(() {
                    _selectedOption = newValue!;
                  });
                },
              ),
            ),
    );
  }
}
﻿
ふぅ、これはかなりの量のコードですね！でも、パニックにならないでください – 一つずつ分解していきましょう。このウィジェットは私たちのためにいくつかの重要なことを行っています:
これは私たちのBack4appバックエンドにアクセスし、オプションのリストを取得しています。レストランでウェイターがメニューを持ってくるのを想像してください。
取得中は、ローディングスピナーを表示します。誰も真っ白な画面を見つめるのは好きじゃないですよね？
オプションを取得したら、それをきれいなドロップダウンメニューに表示します。
オプションを選択すると、その選択を記憶します。
クールですね？そして、最も良い部分は、Back4appでオプションを更新するたびに、アプリが次回読み込まれたときに自動的に新しいリストを表示することです。魔法のようですね！
ステップ 4 – アプリの実行
真実の瞬間の時間です！ flutter runを使用してアプリを実行します。すべてがうまくいけば、Back4appに保存したピザのトッピングで構成されたドロップダウンメニューが表示されるはずです。
さあ、トッピングを選んでください。どのように瞬時に更新されるか気づきましたか？それがFlutterの状態管理の力です！
バックエンド統合を伴うドロップダウンメニューのベストプラクティス
読み込み状態の処理: 私たちの例で見たように、データを取得している間は読み込みインジケーターを使用します。ゲストが夕食を待っている間に音楽をかけるようなものです – 経験が良くなります！
エラーハンドリング: 実際のアプリでは、エラーハンドリングを追加したいでしょう。インターネットがダウンしたらどうしますか？それともBack4appが昼寝をしている？常に予期しない事態に備えましょう！
ページネーションの使用: ドロップダウンリストがシカゴスタイルのピザの材料リストよりも長くなる場合は、ページネーションを実装することを検討してください。ユーザー（およびそのデバイス）は感謝するでしょう。
結論
Flutterでスマートなバックエンド駆動のドロップダウンメニューを構築しました！ 🎉 この例を拡張してみませんか？選択したトッピングをピザの注文に追加するボタンを追加したり、異なるUIコンポーネントでオプションを表示してみたり。限界はありません！
そして、もし行き詰まったり質問があれば、FlutterとBack4appのコミュニティは非常に助けになります。助けを求めることをためらわないでください！
さあ、素晴らしくダイナミックなUIを構築しましょう！ 💪
詳細については、FlutterのドキュメントとBack4appのドキュメントをチェックしてください。楽しいコーディングを！
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterでUint8Listを使用し、Back4appを利用してバックエンドに永続化する方法
Flutter、Google Wallet、Back4App：環境報酬アプリチュートリアル