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

9min
はじめに
セグメントボタンは、Material 3で導入されたUIコンポーネントで、ユーザーが2〜5のオプションから選択できるようにします。これは、クリーンで整理された方法で排他的または非排他的な選択肢のセットを提供したい場合に特に便利です。このチュートリアルでは、Flutterアプリでセグメントボタンを使用する方法を探り、選択されたオプションを保存および管理するためにBack4appをバックエンドとして活用します。
前提条件
始める前に、以下のものを確認してください:
Back4appアカウント。 Back4app.comで無料アカウントにサインアップしてください。
ローカルマシンにFlutter開発環境がセットアップされていること。まだセットアップしていない場合は、Flutterインストールガイドを参照してください。
Dart、Flutterウィジェット、およびバックエンドサービスとしてのBack4appの基本的な知識。
ステップ1 – Back4appバックエンドの設定
Back4appプロジェクトを作成する: Back4appアカウントにログインし、新しいプロジェクトを作成します。
Parseクラスを作成する: このチュートリアルでは、セグメントボタンから選択されたオプションを保存するために、UserPreferencesという名前のParseクラスを作成します:
username (String): ユーザーの名前。
selectedOption (String): ユーザーが選択したオプション。
Back4appの資格情報を取得する: プロジェクト設定に移動して、FlutterアプリをBack4appに接続するために必要なアプリケーションIDとクライアントキーを取得します。
ステップ 2 – Flutter プロジェクトの設定
新しい Flutter プロジェクトを作成: ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行します:
Bash
flutter create segmented_button_example
flutter create segmented_button_example
﻿
依存関係を追加: pubspec.yaml を開き、次の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: latest_version
﻿
次に flutter pub get を実行して、これらの依存関係をインストールします。
アプリでParseを初期化する: lib/main.dart, Parse SDKを初期化します:
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: PreferenceScreen(),
    );
  }
}
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, セグメントボタンを表示し処理する新しいウィジェットを追加します:
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();
  }
}
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ドキュメントをチェックし、バックエンド統合のヒントについては、Back4appドキュメントを訪れてください。コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
Back4appを使用したFlutter DevTools拡張機能の構築と使用
Flutterでフィードバックコンポーネントを使用してユーザーフィードバックを収集し、Back4appにデータを保存する