더 많은
Flutter에서 CallbackShortcuts와 Back4App을 사용하여 키보드 단축키를 구현하는 방법

23min
소개
키보드 단축키는 애플리케이션 내에서 일반적인 작업에 빠르게 접근할 수 있도록 하여 사용자 경험을 향상시킵니다. Flutter에서는 CallbackShortcuts 위젯을 사용하여 개발자가 키보드 키 조합을 콜백 함수에 직접 매핑할 수 있도록 하여 작업이나 인텐트를 정의할 필요가 없습니다. 이는 앱에 키보드 단축키를 추가하는 과정을 단순화합니다.
이 튜토리얼에서는 CallbackShortcuts를 Flutter 애플리케이션에 통합하고 Parse Server로 구동되는 백엔드 서비스인 Back4App을 사용하여 데이터를 저장하고 검색하는 방법을 배웁니다. 이 튜토리얼이 끝나면 Back4App에서 데이터를 가져오는 등의 작업을 수행하기 위해 키보드 단축키에 반응하는 Flutter 앱을 갖게 될 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Flutter SDK가 귀하의 컴퓨터에 설치되어 있어야 합니다. 공식 Flutter 설치 가이드를 따라 귀하의 운영 체제에 맞게 설치하십시오.
Flutter 및 Dart에 대한 기본 지식. Flutter가 처음이라면 Flutter 문서를 검토하여 기본 사항에 익숙해지십시오.
Visual Studio Code 또는 Android Studio와 같은 IDE 또는 텍스트 편집기.
 Back4App 계정. Back4App에서 무료 계정을 등록하십시오.
Flutter용 Parse Server SDK를 프로젝트에 추가해야 합니다. Back4App Flutter SDK 가이드를 따라 설정하는 방법을 배우십시오.
키보드 단축키를 테스트하기 위한 물리적 키보드 또는 에뮬레이터.
1단계 – Flutter 프로젝트 설정
1.1. 새 Flutter 프로젝트 만들기
터미널을 열고 다음을 실행하세요:
Bash
flutter create callback_shortcuts_app
flutter create callback_shortcuts_app
﻿
프로젝트 디렉토리로 이동하세요:
Bash
cd callback_shortcuts_app
cd callback_shortcuts_app
﻿
1.2. 의존성 추가
 pubspec.yaml을 열고 다음 의존성을 추가하세요:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
﻿
 flutter pub get을 실행하여 패키지를 설치하세요.
2단계 – Back4App 설정하기
2.1. 새로운 Back4App 애플리케이션 만들기
귀하의 Back4App 대시보드에 로그인하세요.
"새 앱 만들기"를 클릭하세요.
애플리케이션의 이름을 입력하세요, 예: "CallbackShortcutsApp", 그리고 "생성"을 클릭하세요.
2.2. 데이터 모델 설정하기
애플리케이션 대시보드에서 "Database" 섹션으로 이동합니다.
클릭하여 "Create a class".
모달에서:
선택하십시오 "Custom".
입력하십시오 "Item" 클래스로 이름을.
클릭하십시오 "Create class".
2.3. 클래스에 열 추가하기
"Item" 클래스에서 "+"를 클릭하여 새 열을 추가합니다.
다음 열을 추가하십시오:
이름: 유형 문자열
설명: 유형 문자열
"Item" 클래스에 샘플 데이터를 추가하십시오. 예를 들어:
2.4. 애플리케이션 자격 증명 얻기
다음으로 이동하십시오 앱 설정 > 보안 및 키.
다음 정보를 적어 두십시오 애플리케이션 ID 및 클라이언트 키.
3단계 – Flutter 앱에서 Parse 초기화
다음 파일을 열고 lib/main.dart 다음과 같이 수정하십시오:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Callback Shortcuts App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Callback Shortcuts App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
﻿
다음으로 교체하십시오 'YOUR_APPLICATION_ID' 및 'YOUR_CLIENT_KEY' 실제 Back4App 자격 증명으로.
4단계 – Back4App에서 데이터 가져오기
새 파일을 생성하십시오 lib/home_page.dart:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Item {
  final String name;
  final String description;

  Item(this.name, this.description);
}

class _HomePageState extends State<HomePage> {
  List<Item> items = [];

  Future<void> fetchItems() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Item'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        items = apiResponse.results!.map((data) {
          final name = data.get<String>('name') ?? '';
          final description = data.get<String>('description') ?? '';
          return Item(name, description);
        }).toList();
      });
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchItems();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Callback Shortcuts App'),
      ),
      body: items.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index].name),
                  subtitle: Text(items[index].description),
                );
              },
            ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class Item {
  final String name;
  final String description;

  Item(this.name, this.description);
}

class _HomePageState extends State<HomePage> {
  List<Item> items = [];

  Future<void> fetchItems() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('Item'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        items = apiResponse.results!.map((data) {
          final name = data.get<String>('name') ?? '';
          final description = data.get<String>('description') ?? '';
          return Item(name, description);
        }).toList();
      });
    } else {
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchItems();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Callback Shortcuts App'),
      ),
      body: items.isEmpty
          ? Center(child: CircularProgressIndicator())
          : ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(items[index].name),
                  subtitle: Text(items[index].description),
                );
              },
            ),
    );
  }
}
﻿
설명
Item 클래스: Back4App에서 가져온 항목을 나타내는 모델 클래스입니다.
fetchItems(): Back4App의 Item 클래스에서 데이터를 가져오고 items 목록을 업데이트합니다.
build(): 항목 목록을 표시하거나 데이터가 아직 가져오는 중인 경우 로딩 표시기를 표시합니다.
5단계 – CallbackShortcuts 구현하기
이제 데이터 새로 고침 및 목록 탐색을 위한 키보드 단축키를 추가해 보겠습니다.
5.1. 포커스 및 콜백 단축키 위젯 추가
다음의 build() 메서드를 수정하십시오 home_page.dart:
Dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Callback Shortcuts App'),
    ),
    body: Focus(
      autofocus: true,
      child: CallbackShortcuts(
        bindings: {
          SingleActivator(LogicalKeyboardKey.keyR, control: true): () {
            fetchItems();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data refreshed')),
            );
          },
          SingleActivator(LogicalKeyboardKey.arrowDown): () {
            _focusNextItem();
          },
          SingleActivator(LogicalKeyboardKey.arrowUp): () {
            _focusPreviousItem();
          },
        },
        child: items.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return FocusableActionDetector(
                    child: ListTile(
                      title: Text(items[index].name),
                      subtitle: Text(items[index].description),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Callback Shortcuts App'),
    ),
    body: Focus(
      autofocus: true,
      child: CallbackShortcuts(
        bindings: {
          SingleActivator(LogicalKeyboardKey.keyR, control: true): () {
            fetchItems();
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Data refreshed')),
            );
          },
          SingleActivator(LogicalKeyboardKey.arrowDown): () {
            _focusNextItem();
          },
          SingleActivator(LogicalKeyboardKey.arrowUp): () {
            _focusPreviousItem();
          },
        },
        child: items.isEmpty
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return FocusableActionDetector(
                    child: ListTile(
                      title: Text(items[index].name),
                      subtitle: Text(items[index].description),
                    ),
                  );
                },
              ),
      ),
    ),
  );
}
﻿
설명
포커스 위젯: 본문을 감싸서 포커스와 키보드 이벤트를 받을 수 있도록 합니다.
콜백 단축키: 키보드 단축키를 콜백 함수에 매핑합니다.
Ctrl + R: fetchItems()을 호출하여 데이터를 새로 고칩니다.
아래 화살표: 다음 항목으로 포커스를 이동합니다.
위 화살표: 이전 항목으로 포커스를 이동합니다.
포커스 가능한 액션 감지기: 각 ListTile을 포커스 가능하게 하여 키보드를 사용하여 탐색할 수 있도록 합니다.
5.2. 탐색 기능 구현
항목 탐색을 처리하기 위해 다음 메서드를 추가하세요:
Dart
void _focusNextItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.nextFocus();
  }
}

void _focusPreviousItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.previousFocus();
  }
}
void _focusNextItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.nextFocus();
  }
}

void _focusPreviousItem() {
  final focus = FocusScope.of(context);
  if (focus.canRequestFocus) {
    focus.previousFocus();
  }
}
﻿
6단계 – 키보드 단축키 테스트
6.1. 앱 실행
터미널에서 다음을 실행하세요:
Bash
flutter run
flutter run
﻿
6.2. 새로 고침 단축키 테스트
앱이 실행되는 동안 Ctrl + R (또는 Cmd + R macOS에서) 를 누르세요.
"데이터가 새로 고쳐졌습니다"라는 스낵바 메시지가 표시됩니다.
데이터에 변경 사항이 있으면 목록이 업데이트되어야 합니다.
6.3. 탐색 단축키 테스트
목록을 탐색하려면 아래 화살표 및 위 화살표 키를 사용하세요.
포커스가 다른 항목으로 이동하는 것을 볼 수 있어야 합니다.
결론
이 튜토리얼에서는 CallbackShortcuts를 사용하여 Flutter 애플리케이션에서 키보드 단축키를 구현하는 방법을 배웠습니다. Back4App을 통합하여 데이터를 가져오고 표시했으며, 사용자가 키보드 단축키를 사용하여 앱과 상호작용할 수 있도록 하여 사용자 경험을 향상시켰습니다.
주요 요점
CallbackShortcuts: 콜백 함수에 직접 키 조합을 매핑하여 키보드 단축키 추가를 간소화합니다.
포커스 관리: 위젯이 키보드 이벤트를 수신하는 데 필수적입니다.
Back4App 통합: 데이터를 저장하고 검색할 수 있는 확장 가능한 백엔드를 제공합니다.
다음 단계
단축키 확장: 추가 기능을 위해 더 많은 키보드 단축키를 추가합니다.
플랫폼별 수정자: 플랫폼 간 수정 키의 차이를 처리합니다 (예: Control vs. Command).
접근성: 키보드 탐색 및 스크린 리더를 지원하여 앱이 접근 가능하도록 합니다.
오류 처리: Back4App에서 데이터를 가져올 때 오류 처리를 개선합니다.
추가 리소스
﻿Back4App 문서﻿
﻿Flutter 가이드용 Parse SDK﻿
﻿Flutter 공식 문서﻿
﻿CallbackShortcuts 위젯﻿
행복한 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter에서 HomeWidget 및 Back4App으로 홈 화면 위젯 만들기 방법
드래그 앤 드롭 플러터 앱 만들기: 드래그 가능한 위젯과 Back4App 사용하기