더 많은
Flutter에서 Back4app을 사용하여 세분화된 버튼을 사용하는 방법

10min
소개
세그먼트 버튼은 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();
  }
}
﻿
이 코드는 사용자가 세 가지 옵션 중에서 선택할 수 있는 세그먼트 버튼을 사용하여 간단한 UI를 정의합니다. 선택된 옵션은 선택이 변경될 때마다 Back4app에 저장됩니다.
4단계 – 앱 실행하기
앱 실행하기 flutter run. 화면에 세그먼트 버튼이 표시되어야 합니다. 옵션을 선택하면 상태가 업데이트되고 선택이 Back4app에 저장됩니다.
Back4app에서 데이터 확인하기 위해 Back4app 대시보드에 로그인하고 UserPreferences 클래 확인하세요. Flutter 앱에서 선택한 항목에 해당하는 항목이 표시되어야 합니다.
결론
이 튜토리얼에서는 Flutter에서 세그먼트 버튼을 구현하고 사용하는 방법을 살펴보았습니다. 또한 사용자 선호도를 저장하기 위해 Flutter와 Back4app을 통합하는 방법을 시연했습니다. 세그먼트 버튼은 사용자에게 여러 옵션을 제공하는 깔끔하고 직관적인 방법을 제공하며, Back4app과 같은 강력한 백엔드와 결합하면 앱의 사용자 경험을 크게 향상시킬 수 있습니다.
Flutter 위젯에 대한 자세한 정보는 Flutter 문서, 그리고 백엔드 통합 팁은 Back4app 문서를 방문하세요. 코딩을 즐기세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Back4app으로 Flutter DevTools 확장 만들기 및 사용하기
플러터에서 피드백 컴포넌트를 사용하여 사용자 피드백 수집하기 및 Back4app에 데이터 저장하기