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(); } } 이 코드는 사용자가 세 가지 옵션 중에서 선택할 수 있는 세그먼트 버튼을 사용하여 간단한 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 를 방문하세요 코딩을 즐기세요!