Flutter渲染引擎切换插件renderer_switcher的使用

在本教程中，我们将介绍如何在运行时切换Flutter Web应用中的渲染引擎。我们将使用renderer_switcher插件来实现这一功能。

安装

要使用此插件，你需要将renderer_switcher添加到你的pubspec.yaml文件作为依赖项。

然后，在你的web/index.html文件的body顶部添加以下脚本：

<script type="text/javascript">
  window.flutterWebRenderer = localStorage.getItem('flutterWebRenderer');
</script>

使用

首先，我们需要导入必要的包并初始化应用。

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:renderer_switcher/renderer_switcher.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  WebRenderer? _webRenderer;

  [@override](/user/override)
  void initState() {
    super.initState();
    getCurrentWebRenderer();
  }

  Future<void> getCurrentWebRenderer() async {
    final currentRenderer = await RendererSwitcher.getCurrentWebRenderer();
    if (!mounted) return;
    setState(() {
      _webRenderer = currentRenderer;
    });
  }

  void toggleRenderer() async {
    final currentRenderer = await RendererSwitcher.getCurrentWebRenderer();

    WebRenderer targetRenderer;
    if (currentRenderer == WebRenderer.html) {
      targetRenderer = WebRenderer.canvaskit;
    } else {
      targetRenderer = WebRenderer.html;
    }
    RendererSwitcher.switchWebRenderer(targetRenderer);
  }

  String get rendererDescription {
    /// 使用表情符号可以很好地识别你当前使用的渲染引擎。
    switch (_webRenderer) {
      case WebRenderer.html:
        return 'Html 🚀';
      case WebRenderer.canvaskit:
        return 'Canvaskit 🚀';
      default:
        return 'Auto 🚀';
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Renderer Switcher'),
        ),
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Running on $rendererDescription',
                style: Theme.of(context).textTheme.headline5,
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: toggleRenderer,
                child: const Text('Toggle Renderer'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

代码解释

1. 导入必要的包：

   import 'package:flutter/material.dart';
   import 'dart:async';
   import 'package:renderer_switcher/renderer_switcher.dart';
   

2. 初始化应用：

   void main() {
     runApp(const MyApp());
   }
   

3. 定义状态类：

   class MyApp extends StatefulWidget {
     const MyApp({Key? key}) : super(key: key);
   
     [@override](/user/override)
     State<MyApp> createState() => _MyAppState();
   }
   

4. 获取当前渲染器：

   class _MyAppState extends State<MyApp> {
     WebRenderer? _webRenderer;
   
     [@override](/user/override)
     void initState() {
       super.initState();
       getCurrentWebRenderer();
     }
   
     Future<void> getCurrentWebRenderer() async {
       final currentRenderer = await RendererSwitcher.getCurrentWebRenderer();
       if (!mounted) return;
       setState(() {
         _webRenderer = currentRenderer;
       });
     }
   

5. 切换渲染器：

   void toggleRenderer() async {
     final currentRenderer = await RendererSwitcher.getCurrentWebRenderer();
   
     WebRenderer targetRenderer;
     if (currentRenderer == WebRenderer.html) {
       targetRenderer = WebRenderer.canvaskit;
     } else {
       targetRenderer = WebRenderer.html;
     }
     RendererSwitcher.switchWebRenderer(targetRenderer);
   }
   

6. 描述当前渲染器：

   String get rendererDescription {
     /// 使用表情符号可以很好地识别你当前使用的渲染引擎。
     switch (_webRenderer) {
       case WebRenderer.html:
         return 'Html 🚀';
       case WebRenderer.canvaskit:
         return 'Canvaskit 🚀';
       default:
         return 'Auto 🚀';
     }
   }
   

7. 构建UI：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return MaterialApp(
       home: Scaffold(
         appBar: AppBar(
           title: const Text('Renderer Switcher'),
         ),
         body: Center(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.center,
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
               Text(
                 'Running on $rendererDescription',
                 style: Theme.of(context).textTheme.headline5,
               ),
               const SizedBox(height: 20),
               ElevatedButton(
                 onPressed: toggleRenderer,
                 child: const Text('Toggle Renderer'),
               ),
             ],
           ),
         ),
       ),
     );
   }