더 많은
Back4app으로 Flutter DevTools 확장 만들기 및 사용하기

18min
소개
Flutter DevTools는 Flutter 앱을 디버깅하고 검사하며 프로파일링하기 위한 강력한 도구 모음입니다. Dart 및 Flutter DevTools 확장 프레임워크를 사용하여 개발자는 디버깅 및 개발 워크플로를 향상시키기 위해 사용자 정의 확장을 만들 수 있습니다. 이러한 확장은 Flutter 웹 앱으로 구축할 수 있으며 DevTools 모음에 원활하게 통합될 수 있습니다.
이 튜토리얼에서는 Flutter DevTools 확장을 만드는 방법, 백엔드 서비스에 Back4app을 사용하는 Flutter 앱과 통합하는 방법, 그리고 사용자 정의 확장을 사용하여 애플리케이션을 디버깅하는 방법을 탐구할 것입니다. 이를 통해 개발 프로세스를 간소화하고 앱의 동작에 대한 더 깊은 통찰력을 제공할 수 있는 맞춤형 개발 도구를 구축하는 데 도움이 될 것입니다.
전제 조건
이 튜토리얼을 완료하려면 다음이 필요합니다:
Back4app 계정. Back4app.com에서 무료 계정에 가입하세요.
로컬 머신에 Flutter 개발 환경이 설정되어 있어야 합니다. 아직 설정하지 않았다면 Flutter 설치 가이드를 따르세요.
Dart, Flutter 위젯 및 Flutter DevTools 사용에 대한 기본 지식.
1단계 – Back4app 백엔드 설정하기
Back4app 프로젝트 생성하기: Back4app 계정에 로그인하고 새 프로젝트를 생성합니다.
Parse 클래스 생성하기: 이 튜토리얼을 위해 ThemeSettings라는 Parse 클래스를 생성하여 Flutter 앱의 테마 구성 데이터를 저장합니다:
themeName (문자열): 테마의 이름.
primaryColor (문자열): 테마의 기본 색상.
accentColor (문자열): 테마의 강조 색상.
샘플 데이터로 클래스 채우기: Flutter 앱이 사용할 테마 구성을 시뮬레이션하기 위해 ThemeSettings 클래스에 여러 레코드를 추가합니다.
Back4app 자격 증명 가져오기: 프로젝트 설정으로 이동하여 Flutter 앱을 Back4app에 연결하는 데 필요한 애플리케이션 ID와 클라이언트 키를 검색합니다.
2단계 – Flutter DevTools 확장 만들기
새 Flutter 프로젝트 생성하기: 터미널 또는 명령 프롬프트를 열고 다음을 실행합니다:
Bash
flutter create theme_builder_extension
flutter create theme_builder_extension
﻿
확장 디렉토리 설정: 프로젝트 루트 디렉토리로 이동하여 DevTools 확장을 위한 새 디렉토리를 만듭니다:
Bash
mkdir devtools_extension
mkdir devtools_extension
﻿
이 디렉토리 안에 config.yaml 파일을 만들어 DevTools에 필요한 메타데이터를 저장합니다:
YAML
package_name: theme_builder_extension
version: 1.0.0
issue_tracker: https://github.com/yourusername/theme_builder_extension/issues
material_icon: assets/icon.png
package_name: theme_builder_extension
version: 1.0.0
issue_tracker: https://github.com/yourusername/theme_builder_extension/issues
material_icon: assets/icon.png
﻿
종속성 추가: pubspec.yaml을 열고 다음 종속성을 추가합니다:
YAML
dependencies:
  flutter:
    sdk: flutter
  devtools_extensions: latest_version
  devtools_app_shared: latest_version
dependencies:
  flutter:
    sdk: flutter
  devtools_extensions: latest_version
  devtools_app_shared: latest_version
﻿
실행 flutter pub get 이 종속성을 설치합니다.
DevTools 확장 만들기: lib/main.dart, 기본 내용을 다음 코드로 교체하여 Flutter 웹 앱을 DevToolsExtension 위젯으로 감쌉니다:
Dart
import 'package:flutter/material.dart';
import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:devtools_app_shared/devtools_app_shared.dart';

void main() {
  runApp(DevToolsExtension(child: ThemeBuilderApp()));
}

class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:devtools_extensions/devtools_extensions.dart';
import 'package:devtools_app_shared/devtools_app_shared.dart';

void main() {
  runApp(DevToolsExtension(child: ThemeBuilderApp()));
}

class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
﻿
이것은 앱을 DevToolsExtension 위젯으로 감싸며, 이는 테마 설정 및 DevTools 스위트와의 통합을 처리합니다.
DevTools 통합 추가: 앱을 수정하여 DevToolsButton을 사용하여 일반 ElevatedButton, 대신 DevTools 전용 기능을 통합합니다:
Dart
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: DevToolsButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: Center(
        child: DevToolsButton(
          onPressed: () {
            // Your extension logic here
          },
          child: Text('Generate Theme'),
        ),
      ),
    );
  }
}
﻿
이 변경 사항은 귀하의 확장 UI가 DevTools 스위트의 나머지 부분과 원활하게 통합되도록 보장합니다.
3단계 – Back4app과 통합하기
귀하의 확장에서 Parse 초기화하기: 이 확장은 Back4app과 상호작용하므로, 귀하의 확장에서 Parse를 초기화하세요:
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(DevToolsExtension(child: ThemeBuilderApp()));
}
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(DevToolsExtension(child: ThemeBuilderApp()));
}
﻿
테마 데이터 가져오기 및 사용하기: 귀하의 확장에서 Back4app의 데이터를 사용하여 테마를 생성하고 적용하세요:
Dart
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: FutureBuilder<List<ParseObject>>(
        future: fetchThemes(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          }

          final themes = snapshot.data!;
          return ListView.builder(
            itemCount: themes.length,
            itemBuilder: (context, index) {
              final theme = themes[index];
              return ListTile(
                title: Text(theme.get<String>('themeName') ?? 'No Name'),
                subtitle: Text('Primary Color: ${theme.get<String>('primaryColor')}'),
                onTap: () {
                  // Apply theme logic
                },
              );
            },
          );
        },
      ),
    );
  }

  Future<List<ParseObject>> fetchThemes() async {
    final query = QueryBuilder<ParseObject>(ParseObject('ThemeSettings'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load themes');
    }
  }
}
class ThemeBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Theme Builder')),
      body: FutureBuilder<List<ParseObject>>(
        future: fetchThemes(),
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return CircularProgressIndicator();
          }

          final themes = snapshot.data!;
          return ListView.builder(
            itemCount: themes.length,
            itemBuilder: (context, index) {
              final theme = themes[index];
              return ListTile(
                title: Text(theme.get<String>('themeName') ?? 'No Name'),
                subtitle: Text('Primary Color: ${theme.get<String>('primaryColor')}'),
                onTap: () {
                  // Apply theme logic
                },
              );
            },
          );
        },
      ),
    );
  }

  Future<List<ParseObject>> fetchThemes() async {
    final query = QueryBuilder<ParseObject>(ParseObject('ThemeSettings'));
    final response = await query.query();
    if (response.success && response.results != null) {
      return response.results as List<ParseObject>;
    } else {
      throw Exception('Failed to load themes');
    }
  }
}
﻿
이 코드는 Back4app에서 테마 설정을 가져와 목록에 표시합니다. 테마를 선택하면 이를 적용하기 위한 추가 로직이 트리거될 수 있습니다.
4단계 – 시뮬레이션 환경에서 확장 프로그램 테스트하기
시뮬레이션 환경에서 확장 프로그램 실행하기: 매번 컴파일하지 않고 확장 프로그램을 테스트하려면, 시뮬레이션 DevTools 환경을 사용하세요:
Bash
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
flutter run -d chrome --dart-define=USE_SIMULATED_ENVIRONMENT=true
﻿
연결된 앱 시뮬레이션: 확장 프로그램이 연결할 또 다른 Flutter 앱을 시작합니다. 연결된 앱의 VM 서비스 URI와 DTD 서비스 URI를 시뮬레이션 환경에 복사하여 붙여넣습니다.
5단계 – 확장 프로그램 빌드 및 게시
확장 프로그램 빌드: 확장 프로그램에 만족하면, 프로덕션을 위해 빌드합니다:
Bash
flutter pub get
flutter build web --output=devtools_extension/build
flutter pub get
flutter build web --output=devtools_extension/build
﻿
확장 프로그램 검증: DevTools 검증 명령을 사용하여 확장 프로그램이 올바르게 구성되었는지 확인합니다:
Bash
dart run devtools_extensions validate
dart run devtools_extensions validate
﻿
확장 프로그램 게시: 다른 개발자들이 사용할 수 있도록 확장 프로그램을 pub.dev에 게시합니다:
Bash
flutter pub publish
flutter pub publish
﻿
결론
이 튜토리얼에서는 Flutter DevTools 확장 프로그램을 생성하고, 백엔드 서비스에 Back4app과 통합하며, 시뮬레이션 환경에서 테스트하는 방법을 배웠습니다. DevTools를 확장함으로써 생산성을 높이고 앱의 동작에 대한 새로운 통찰력을 제공하는 맞춤형 도구를 만들 수 있습니다. 확장 프로그램이 준비되면, pub.dev에 게시하여 다른 개발자들이 귀하의 작업을 활용할 수 있도록 합니다.
Back4app과 함께 Flutter를 사용하는 방법에 대한 자세한 정보는 Back4app 문서와 Flutter DevTools 문서를 확인하세요. 행복한 코딩 되세요!
업데이트됨 24 Jan 2025
이 페이지가 도움이 되었습니까?
Flutter에서 Back4app과 함께 Isolates를 사용하여 대량의 데이터 처리를 수행하는 방법
Flutter에서 Back4app을 사용하여 세분화된 버튼을 사용하는 방법