패키지, 저장소 및 앱 카테고리 검색

flutter_ume_kit_perf 표지
패키지 상세v1.0.0

flutter_ume_kit_perf

flutter_ume용 성능 키트.

AndroidiOSmacOSWindowsLinux
30일 다운로드
149
좋아요
1
Pub 점수
100

패키지 설치

flutter pub add flutter_ume_kit_perf

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

flutter_ume_kit_perf는 바이트댄스에서 개발한 플러터 애플리케이션용 성능 모니터링 툴킷입니다. 안드로이드, iOS, macOS, 윈도우, 리눅스 등 여러 플랫폼에서 프레임 렌더링, 메모리 사용량, CPU 부하와 같은 앱 성능 지표에 대한 실시간 인사이트를 제공합니다. flutter_ume 생태계와 원활하게 통합되도록 설계되어 개발 및 테스트 중에 성능 병목 현상을 식별하고 사용자 경험을 최적화할 수 있습니다. 코드 변경 없이 런타임 성능 진단을 지원하여 반복적인 성능 튜닝에 이상적입니다.

사용 사례

  • 실시간 성능 모니터링
  • 프레임 레이트 분석
  • 메모리 및 CPU 프로파일링
  • UI 지단 디버깅
  • 앱 반응성 최적화

주요 기능

  • 크로스 플랫폼 지원
  • 런타임 성능 추적
  • 경량 통합
  • 세부 성능 메트릭
  • flutter_ume와 원활하게 통합

적합한 대상

  • Flutter 개발자
  • 성능 엔지니어
  • QA 테스터
  • 앱 최적화 팀

고려 사항

  • flutter_ume 설정이 필요합니다
  • 생산 릴리스를 위한 것이 아님
  • 개발 및 테스트 환경에 한정
  • 디버그 모드에서 성능에 약간의 영향을 미칠 수 있습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

flutter_ume

简体中文

UME is an in-app debug kits platform for Flutter apps.

platforms license

pub package pub package pub package pub package pub package

Since ^1.0.0, flutter_ume starts adapting to the Flutter 3. See [Quick Start] to learn more.

banner

Scan QR code or click link to download apk. Try it now! https://github.com/bytedance/flutter_ume/releases/download/v0.2.1.0/app-debug.apk

There are 13 plugin kits built in the latest open source version of UME. Developer could create custom plugin kits, and integrate them into UME. Visit Develop plugin kits for UME for more details.

Please see Plugins from community to make your flutter_ume stronger.

Quick Start

All packages whose names are prefixed with flutter_ume_kit_ are function plug-ins of UME, and users can access them according to demand

  1. Edit pubspec.yaml, and add dependencies.

    Compatible with Flutter 3 since version 1.0.0.

    dev_dependencies:
      flutter_ume: ^1.0.1
      flutter_ume_kit_ui: ^1.0.0
      flutter_ume_kit_device: ^1.0.0
      flutter_ume_kit_perf: ^1.0.0
      flutter_ume_kit_show_code: ^1.0.0
      flutter_ume_kit_console: ^1.0.0
      flutter_ume_kit_dio: ^1.0.0
    

    ↓ Null-safety version, compatible with Flutter 2.x

    dev_dependencies: # Don't use UME in release mode
      flutter_ume: ^0.3.0+1
      flutter_ume_kit_ui: ^0.3.0+1
      flutter_ume_kit_device: ^0.3.0
      flutter_ume_kit_perf: ^0.3.0
      flutter_ume_kit_show_code: ^0.3.0
      flutter_ume_kit_console: ^0.3.0
      flutter_ume_kit_dio: ^0.3.0
    

    ↓ Non-null-safety version, compatible with Flutter 1.x

    dev_dependencies: # Don't use UME in release mode
      flutter_ume: ^0.1.1
      flutter_ume_kit_ui: ^0.1.1
      flutter_ume_kit_device: ^0.1.1
      flutter_ume_kit_perf: ^0.1.1
      flutter_ume_kit_show_code: ^0.1.1
      flutter_ume_kit_console: ^0.1.1 
    
  2. Run flutter pub get

  3. Import packages

    import 'package:flutter_ume/flutter_ume.dart'; // UME framework
    import 'package:flutter_ume_kit_ui/flutter_ume_kit_ui.dart'; // UI kits
    import 'package:flutter_ume_kit_perf/flutter_ume_kit_perf.dart'; // Performance kits
    import 'package:flutter_ume_kit_show_code/flutter_ume_kit_show_code.dart'; // Show Code
    import 'package:flutter_ume_kit_device/flutter_ume_kit_device.dart'; // Device info
    import 'package:flutter_ume_kit_console/flutter_ume_kit_console.dart'; // Show debugPrint
    import 'package:flutter_ume_kit_dio/flutter_ume_kit_dio.dart'; // Dio Inspector
    
  4. Edit main method of your app, register plugin kits and initial UME

    void main() {
      if (kDebugMode) {
        PluginManager.instance                                 // Register plugin kits
          ..register(WidgetInfoInspector())
          ..register(WidgetDetailInspector())
          ..register(ColorSucker())
          ..register(AlignRuler())
          ..register(ColorPicker())                            // New feature
          ..register(TouchIndicator())                         // New feature
          ..register(Performance())
          ..register(ShowCode())
          ..register(MemoryInfoPage())
          ..register(CpuInfoPage())
          ..register(DeviceInfoPanel())
          ..register(Console())
          ..register(DioInspector(dio: dio));                  // Pass in your Dio instance
        // After flutter_ume 0.3.0
        runApp(UMEWidget(child: MyApp(), enable: true));
        // Before flutter_ume 0.3.0
        runApp(injectUMEWidget(child: MyApp(), enable: true));
      } else {
        runApp(MyApp());
      }
    }
    
  5. flutter run for running or flutter build apk --debug、flutter build ios --debug for building productions.

Some functions rely on VM Service, and additional parameters need to be added for local operation to ensure that it can connect to the VM Service.

Flutter 2.0.x, 2.2.x and other versions run on real devices, flutter run needs to add the --disable-dds parameter. After Pull Request #80900 merging, --disable-dds was renamed to --no-dds.

IMPORTANT

From 0.1.1/0.2.1 version,we don't need set useRootNavigator: false. The following section only applies to versions before version 0.1.1/0.2.1 .

Since UME manages the routing stack at the top level, methods such as showDialog use rootNavigator to pop up by default, therefore must pass in the parameter useRootNavigator: false in showDialog, showGeneralDialog and other 'show dialog' methods to avoid navigator errors.

showDialog(
  context: context,
  builder: (ctx) => AlertDialog(
        title: const Text('Dialog'),
        actions: <Widget>[
          TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('OK'))
        ],
      ),
  useRootNavigator: false); // <===== It's very IMPORTANT!

Features

There are 13 plugin kits built in the current open source version of UME.

UI kits

Widget Info
Widget Info
Widget Detail
Widget Detail
Align Ruler
Align Ruler
Color Picker
Color Picker
Color Sucker
Color Sucker
Touch Indicator
Touch Indicator

Performance Kits

Memory Info
Memory Info
Perf Overlay
Perf Overlay

Device Info Kits

CPU Info
CPU Info
Device Info
Device Info

Show Code

Show Code
Show Code

Console

Console
Console

Dio Inspector

Dio Inspector
Dio Inspector

Develop plugin kits for UME

UME plugins are located in the ./kits directory, and each one is a package. You can refer to the example in ./custom_plugin_example about this chapter.

  1. Run flutter create -t package custom_plugin to create your custom plugin kit, it could be package or plugin.

  2. Edit pubspec.yaml of the custom plugin kit to add UME framework dependency.

    dependencies:
      flutter_ume: '>=0.3.0 <0.4.0'
    
  3. Create the class of the plugin kit which should implement Pluggable.

    import 'package:flutter_ume/flutter_ume.dart';
    
    class CustomPlugin implements Pluggable {
      CustomPlugin({Key key});
    
      @override
      Widget buildWidget(BuildContext context) => Container(
        color: Colors.white
        width: 100,
        height: 100,
        child: Center(
          child: Text('Custom Plugin')
        ),
      ); // The panel of the plugin kit
    
      @override
      String get name => 'CustomPlugin'; // The name of the plugin kit
    
      @override
      String get displayName => 'CustomPlugin';
    
      @override
      void onTrigger() {} // Call when tap the icon of plugin kit
    
      @override
      ImageProvider<Object> get iconImageProvider => NetworkImage('url'); // The icon image of the plugin kit
    }
    
  4. Use your custom plugin kit in project

    1. Edit pubspec.yaml of host app project to add custom_plugin dependency.

      dev_dependencies:
        custom_plugin:
          path: path/to/custom_plugin
      
    2. Run flutter pub get

    3. Import package

      import 'package:custom_plugin/custom_plugin.dart';
      
  5. Edit main method of your app, register your custom_plugin plugin kit

    if (kDebugMode) {
      PluginManager.instance
        ..register(CustomPlugin());
      runApp(
        UMEWidget(
          child: MyApp(), 
          enable: true
        )
      );
    } else {
      runApp(MyApp());
    }
    
  6. Run your app

Access the nested widget debug kits quickly

We introduce the PluggableWithNestedWidget from 0.3.0. It is used to insert nested Widgets in the Widget tree and quickly access embedded kits with nested widget.

For more details, see ./kits/flutter_ume_kit_ui/lib/components/color_picker/color_picker.dart and ./kits/flutter_ume_kit_ui/lib/components/touch_indicator/touch_indicator.dart.

The key steps are as follows:

  1. The class of your plugin should implement PluggableWithNestedWidget.
  2. Implements Widget buildNestedWidget(Widget child). Handling the nested widgets and returning the new Widget.

How to use UME in Release/Profile mode

Once you use flutter_ume in Release/Profile mode, you agree that you will bear the relevant risks by yourself.

The maintainer of flutter_ume does not assume any responsibility for the accident caused by this.

We recommend not to use it in Release/Profile mode for the following reasons:

  1. VM Service is not available in these environments, so some functions are not available
  2. In this environment, developers need to isolate the app distribution channels by themselves to avoid submitting relevant debugging code to the production environment

In order to use in Release/Profile mode, the details that need to be adjusted in the normal access process:

  1. In pubspec.yaml, flutter_ume and plugins should be write below dependencies rather than dev_dependencies.
  2. Don't put the code which call PluginManager.instance.register() and UMEWidget(child: App()) into conditionals which represent debug mode. (Such as kDebugMode)
  3. Ensure the above details, run flutter clean and flutter pub get, then build your app.

About version

Compatibility
UME version 1.12.13 1.22.3 2.0.1 2.2.3 2.5.3 2.8.0 3.0.5 3.3.1
0.1.x ✅ ✅ ✅ ✅ ⚠️ ⚠️ ❌ ❌
0.2.x ❌ ❌ ✅ ✅ ✅ ⚠️ ❌ ❌
0.3.x ❌ ❌ ✅ ✅ ✅ ✅ ❌ ❌
1.0.x ❌ ❌ ⚠️ ⚠️ ⚠️ ⚠️ ✅ ✅
1.1.x ❌ ❌ ⚠️ ⚠️ ⚠️ ⚠️ ✅ ✅

⚠️ means the version has not been fully tested for compatibility.

Special case
  • Please use flutter_ume_kit_ui: ^1.1.0 and above version when you are using Flutter 3.7 and above.
Coverage
Package master develop develop_nullsafety
flutter_ume Coverage Coverage Coverage
flutter_ume_kit_device Coverage Coverage Coverage
flutter_ume_kit_perf Coverage Coverage Coverage
flutter_ume_kit_show_code Coverage Coverage Coverage
flutter_ume_kit_ui Coverage Coverage Coverage
flutter_ume_kit_console Coverage Coverage Coverage
flutter_ume_kit_dio Coverage N/A Coverage
Version upgrade rules

Please refer to Semantic versions for details.

Change log

Changelog

Contributing

Contributing rules: Contributing

Contributors

Thanks to the following contributors (names not listed in order):

ShirelyC ShirelyC
lpylpyleo lpylpyleo
Alex Li Alex Li
Swain Swain
mengdouer mengdouer
LAIIIHZ LAIIIHZ
XinLei XinLei
suli suli
wei-spring wei-spring
Plugins from community
About the third-party open-source project dependencies
  • The TouchIndicator use the pub touch_indicator, the ColorPicker use the pub cyclop.
  • We fork the package cyclop and modify some code meet our functional needs. We should depend cyclop by pub version after the PR being merged.

LICENSE

This project is licensed under the MIT License - visit the LICENSE for details.

Contact the author

Maybe...

  • Found a bug in the code, or an error in the documentation
  • Produces an exception when you use the UME
  • UME is not compatible with the new version Flutter
  • Have a good idea or suggestion

You can submit an issue in any of the above situations.

Maybe...

  • Communicate with the author
  • Communicate with more community developers
  • Cooperate with UME

Welcome to Join the ByteDance Flutter Exchange Group.

Or contact [author](mailto:sunkai.dev@bytedance.com).

카테고리

의존성

의존성 목록 2 개

소스 저장소

이 패키지를 사용하는 프로젝트