더 많은
Back4app의 백엔드 데이터로 Flutter에서 드롭다운 메뉴 만들기

11min
소개
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을 열고 이 코드를 추가하세요. 조금 위협적으로 보일 수 있지만, 차근차근 설명해 드릴게요!
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_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, 구글 월렛 및 백4앱: 환경 보상 앱 튜토리얼