FlutterでBack4appを使用してセグメント化されたボタンを使用する方法

はじめに セグメントボタンは、material 3で導入されたuiコンポーネントで、ユーザーが2〜5のオプションから選択できるようにします。これは、クリーンで整理された方法で排他的または非排他的な選択肢のセットを提供したい場合に特に便利です。このチュートリアルでは、flutterアプリでセグメントボタンを使用する方法を探り、選択されたオプションを保存および管理するためにback4appをバックエンドとして活用します。 前提条件 始める前に、以下のものを確認してください back4appアカウント。 back4app com https //www back4app com で無料アカウントにサインアップしてください。 ローカルマシンにflutter開発環境がセットアップされていること。まだセットアップしていない場合は、 flutterインストールガイド https //flutter dev/docs/get started/install を参照してください。 dart、flutterウィジェット、およびバックエンドサービスとしてのback4appの基本的な知識。 ステップ1 – back4appバックエンドの設定 back4appプロジェクトを作成する back4appアカウント https //www back4app com/ にログインし、新しいプロジェクトを作成します。 parseクラスを作成する このチュートリアルでは、セグメントボタンから選択されたオプションを保存するために、 userpreferences という名前のparseクラスを作成します username (string) ユーザーの名前。 selectedoption (string) ユーザーが選択したオプション。 back4appの資格情報を取得する プロジェクト設定に移動して、flutterアプリをback4appに接続するために必要なアプリケーションidとクライアントキーを取得します。 ステップ 2 – flutter プロジェクトの設定 新しい flutter プロジェクトを作成 ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します flutter create segmented button example 依存関係を追加 pubspec yaml を開き、次の依存関係を追加します dependencies flutter sdk flutter parse server sdk flutter latest version 次に flutter pub get を実行して、これらの依存関係をインストールします。 アプリでparseを初期化する lib/main dart , parse sdkを初期化します 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 preferencescreen(), ); } } 「 'your back4app app id' 」と 'your back4app client key' 」を実際のback4appの資格情報に置き換えてください。 ステップ3 – セグメントボタンの実装 preferencescreenウィジェットを作成する lib/main dart , セグメントボタンを表示し処理する新しいウィジェットを追加します class preferencescreen extends statefulwidget { @override preferencescreenstate createstate() => preferencescreenstate(); } class preferencescreenstate extends state\<preferencescreen> { string? selectedoption; final list\<buttonsegment\<string>> options = \[ buttonsegment(value 'option 1', label text('option 1')), buttonsegment(value 'option 2', label text('option 2')), buttonsegment(value 'option 3', label text('option 3')), ]; @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('user preferences')), body padding( padding const edgeinsets all(16 0), child column( mainaxisalignment mainaxisalignment center, children \[ segmentedbutton\<string>( segments options, selected selectedoption == null ? {} { selectedoption!}, onselectionchanged (newselection) { setstate(() { selectedoption = newselection first; }); savepreference( selectedoption!); }, ), sizedbox(height 20), if ( selectedoption != null) text('selected $ selectedoption', style textstyle(fontsize 16)), ], ), ), ); } future\<void> savepreference(string selectedoption) async { final userpreference = parseobject('userpreferences') set('username', 'test user') // this would normally come from user data set('selectedoption', selectedoption); await userpreference save(); } } このコードは、ユーザーが3つのオプションから選択できるセグメントボタンを持つシンプルなuiを定義しています。選択されたオプションは、選択が変更されるたびにback4appに保存されます。 ステップ4 – アプリの実行 アプリを実行する には、 flutter run を使用します。画面にセグメントボタンが表示されるはずです。オプションを選択すると、状態が更新され、選択がback4appに保存されます。 back4appでデータを確認する には、back4appダッシュボードにログインし、 userpreferences クラスを確認します。flutterアプリからの選択に対応するエントリが表示されるはずです。 結論 このチュートリアルでは、flutterでセグメントボタンを実装し使用する方法を探りました。また、ユーザーの好みを保存するためにflutterとback4appを統合する方法も示しました。セグメントボタンは、ユーザーに複数のオプションを提示するためのクリーンで直感的な方法を提供し、back4appのような強力なバックエンドと組み合わせることで、アプリのユーザーエクスペリエンスを大幅に向上させることができます。 flutterウィジェットに関する詳細情報は、 flutterドキュメント https //flutter dev/docs をチェックし、バックエンド統合のヒントについては、 back4appドキュメント https //www back4app com/docs を訪れてください。コーディングを楽しんでください！