Visão Geral da Solução

O projeto Flutter android_splash_screen demonstra como criar uma transição suave entre uma tela de início nativa no Android 12+ e a interface do Flutter. Embora não seja um pacote convencional, fornece um esquema completo que pode ser adaptado para implementações semelhantes no HarmonyOS. A solução aborda a criação de uma tela de início com enimações e a sincronização precisa com o carregamento do Fluter.

Configuração Inicial no Projeto

Para utilizar a referência, adicione a seguinte dependência ao arquivo pubspec.yaml do seu projeto Flutter no HarmonyOS:

dependencies:
  android_splash_screen:
    git:
      url: "https://gitcode.com/openharmony-tpc/flutter_packages.git"
      path: "packages/flutter_samples/android_splash_screen"

Execute flutter pub get para baixar os arquivos de exemplo.

Configuração da Página de Início no HarmonyOS

No diretório resources do projeto HarmonyOS, crie os recursos visuais para a tela de início. Atualize o arquivo config.json5 conforme abaixo para registrar a ability de splash screen:

{
  "module": {
    "abilities": [
      {
        "name": "MainAbility",
        "launchType": "standard",
        "icon": "$media:app_icon",
        "label": "$string:app_label",
        "splashScreenAbility": "$ability:LaunchScreenAbility",
        "skills": [
          {
            "entities": ["entity.system.home"],
            "actions": ["action.system.home"]
          }
        ]
      },
      {
        "name": "LaunchScreenAbility",
        "type": "splashScreen",
        "splashScreen": {
          "backgroundColor": "#EFEFEF",
          "image": {
            "imageResource": "$media:launch_background",
            "alignment": { "x": 0.5, "y": 0.5 },
            "objectFit": "cover"
          },
          "duration": 1500
        }
      }
    ]
  }
}

Desenvolvimento da Ability de Tela de Início

Crie um arquivo LaunchScreenAbility.ets com a lógica de controle da tela de início. A classe abaixo gerencia a janela e a transição para a ability principal:

import Ability from '@ohos.app.ability.Ability';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';

export default class LaunchScreenAbility extends Ability {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.loadContent('pages/LaunchView', (err) => {
      if (err) {
        console.error('Erro ao carregar a tela de início.');
        return;
      }
      windowStage.getMainWindow().then((win) => {
        win.setFullScreen(true);
        win.setSystemBarEnable(['status', 'navigation']);
      });
    });
  }

  onForeground() {
    setTimeout(() => {
      let want: Want = {
        bundleName: this.context.abilityInfo.bundleName,
        abilityName: 'MainAbility'
      };
      this.startAbility(want).then(() => {
        this.terminateSelf();
      });
    }, 1500);
  }
}

Criação da Interface de Tela de Início

Implemente o componente visual da tela de início usando ArkTS. O exemplo abaixo inclui uma animação de fade-in e navegação automática:

import router from '@ohos.router';

@Entry
@Component
struct LaunchView {
  @State opacityValue: number = 0;
  @State scaleValue: number = 0.9;

  aboutToAppear() {
    animateTo({
      duration: 800,
      curve: Curve.EaseInOut,
      onFinish: () => {
        setTimeout(() => {
          this.navigateAway();
        }, 700);
      }
    }, () => {
      this.opacityValue = 1;
      this.scaleValue = 1;
    });
  }

  navigateAway() {
    animateTo({
      duration: 400,
      curve: Curve.EaseIn
    }, () => {
      this.opacityValue = 0;
    });
    setTimeout(() => {
      router.replaceUrl({ url: 'pages/Main' });
    }, 400);
  }

  build() {
    Column() {
      Image($r('app.media.logo'))
        .width(100)
        .height(100)
        .opacity(this.opacityValue)
        .scale({ x: this.scaleValue, y: this.scaleValue })
      Text('Aplicativo HarmonyOS Flutter')
        .fontSize(20)
        .fontColor('#444444')
        .margin({ top: 16 })
        .opacity(this.opacityValue)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#EFEFEF')
  }
}

Integração com o Flutter

No arquivo principle do Flutter (main.dart), configure a aplicação para garantir a transição suave. Ajuste os tempos de inicialização e a tela de carregamento para coincidir com a duração da tela de início HarmonyOS:

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

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await loadResources();
  runApp(const HarmonyApp());
}

Future<void> loadResources() async {
  // Simulação de carregamento de recursos
  await Future.delayed(const Duration(seconds: 1));
}

class HarmonyApp extends StatelessWidget {
  const HarmonyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'App HarmonyOS',
      theme: ThemeData(primarySwatch: Colors.teal),
      home: const InitialScreen(),
    );
  }
}

class InitialScreen extends StatefulWidget {
  const InitialScreen({super.key});

  @override
  State<InitialScreen> createState() => _InitialScreenState();
}

class _InitialScreenState extends State<InitialScreen> {
  @override
  void initState() {
    super.initState();
    Timer(const Duration(milliseconds: 500), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const MainScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade200,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/logo.png', width: 100, height: 100),
            const SizedBox(height: 16),
            const Text('Aplicativo HarmonyOS Flutter', style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Página Principal')),
      body: const Center(child: Text('Bem-vindo ao aplicativo!')),
    );
  }
}