Mobiele ontwikkeling met Flutter · Les

Native UI-integratie

Verken technieken om native platformweergaven in uw Flutter-widgetstructuur in te sluiten voor sterk aangepaste gebruikerservaringen.

Les 3 van 411 stappen

Native UI-integratie is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Mobiele ontwikkeling met Flutter. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Flutter en native UI verbinden

Welkom bij Native UI-integratie! Hoewel Flutter een uitgebreide verzameling widgets biedt, kan het soms nodig zijn om een bestaande of zeer gespecialiseerde native Android- of iOS-UI-component rechtstreeks in je Flutter-applicatie op te nemen.

In deze les leer je hoe je dat doet, zodat je de sterke punten van zowel Flutter als de native platforms kunt benutten.

Waarom native UI opnemen?

Waarom zou je native UI opnemen in plaats van alles in Flutter te bouwen? Dit zijn enkele veelvoorkomende redenen:

Prestaties: Voor sterk geoptimaliseerde native componenten, zoals complexe kaartweergaven, videospelers of 3D-rendering-engines.
Complexiteit: Wanneer het nabouwen van een functie in Flutter te moeilijk of tijdrovend zou zijn, vooral bij ingewikkeld platformspecifiek gedrag.
Bestaande bibliotheken: Om krachtige platformspecifieke UI-bibliotheken te benutten waarvoor geen Flutter-equivalenten of robuuste plug-ins bestaan.
Specifieke functies: Om toegang te krijgen tot unieke native UI-elementen die niet eenvoudig via standaard Flutter-widgets of plug-ins beschikbaar zijn.

Het is een krachtig hulpmiddel voor geavanceerde integratie-uitdagingen.

De widget `PlatformView`

Flutter biedt de abstracte widget PlatformView als basis voor het opnemen van native UI. Je gebruikt PlatformView niet rechtstreeks; het dient als basis voor platformspecifieke implementaties:

AndroidView voor het opnemen van native Android-weergaven.
UiKitView voor het opnemen van native iOS-weergaven.

Deze widgets vormen een belangrijke brug, waarmee Flutter een native weergave naadloos in zijn eigen widgetstructuur kan weergeven.

Android: de basis van `AndroidView`

Op Android gebruik je de widget AndroidView om native weergaven op te nemen. Hiervoor moet je een PlatformViewFactory registreren in je native Android-project (Kotlin of Java).

Deze fabriek maakt instanties van je native Android-View of ViewGroup wanneer Flutter daarom vraagt. Elke native weergave heeft een unieke tekenreeks voor viewType nodig om deze te identificeren.

Android: conceptuele configuratie

Bij het instellen van een native Android-weergave voor opname in Flutter doorloop je aan de native kant enkele belangrijke stappen:

Native weergave maken: Ontwikkel een aangepaste subklasse van Android-View of ViewGroup.
Fabriek implementeren: Maak een klasse PlatformViewFactory die je native weergave instantieert.
Fabriek registreren: Registreer deze fabriek met een unieke viewType in je MainActivity.kt of MainActivity.java.

Zo laat je Flutter weten hoe het je specifieke native UI-component kan vinden en maken.

Flutter-voorbeeld met `AndroidView`

Zo gebruik je AndroidView in je Flutter-code. In dit voorbeeld gaan we ervan uit dat je via een fabriek in je Android-project een native Android-TextView met de naam "myNativeTextView" hebt ingesteld.

Probeer deze eenvoudige Flutter-code uit (let op: de native weergave verschijnt alleen als de bijbehorende Android-configuratie is voltooid):

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Native Android View')),
        body: Center(
          child: SizedBox(
            width: 200,
            height: 100,
            child: AndroidView(
              viewType: 'myNativeTextView',
              layoutDirection: TextDirection.ltr,
              creationParams: <String, dynamic>{'text': 'Hello from Android!'},
              creationParamsCodec: const StandardMessageCodec(),
            ),
          ),
        ),
      ),
    );
  }
}

iOS: de basis van `UiKitView`

Voor iOS is de equivalente widget UiKitView. Net als bij Android moet je een FlutterPlatformViewFactory registreren in je native iOS-project (Swift of Objective-C).

Deze fabriek maakt instanties van je native iOS-UIView wanneer Flutter deze moet weergeven. Elke native weergave heeft een unieke tekenreeks voor viewIdentifier nodig.

iOS: conceptuele configuratie

Het integreren van een native iOS-weergave voor insluiting in Flutter omvat aan de native kant de volgende stappen:

Native weergave maken: ontwikkel uw aangepaste iOS-UIView of een subklasse van UIView.
Factory implementeren: maak een klasse FlutterPlatformViewFactory die uw native weergave instantieert.
Factory registreren: registreer deze factory met een unieke viewIdentifier in uw AppDelegate.swift of GeneratedPluginRegistrant.m.

Hierdoor kan Flutter rechtstreeks naar uw iOS-UI-component verwijzen en deze insluiten in zijn widgetstructuur.

Communiceren met native weergaven

Zodra een native weergave is ingesloten, moet uw Flutter-app er vaak mee kunnen communiceren, en andersom. Deze communicatie verloopt meestal via MethodChannels, vergelijkbaar met de manier waarop Flutter in het algemeen met native code communiceert.

U kunt berichten (methodeaanroepen) van Flutter naar de controller van de native weergave sturen om de status ervan bij te werken of acties te activeren. Omgekeerd kan de native weergave berichten terugsturen naar Flutter om gebeurtenissen of wijzigingen in gegevens te melden.

Een native kaartweergave kan bijvoorbeeld de huidige camerápositie naar Flutter sturen, of Flutter kan de kaart opdracht geven om in te zoomen.

Korte controle: wanneer insluiten?

U bouwt een Flutter-app en moet een sterk geoptimaliseerde 3D-renderengine integreren die alleen beschikbaar is als native Android/iOS-bibliotheek. Welke scenario's beschrijven het best wanneer u Native UI Integration zou gebruiken?

Beantwoord dit in de interactieve les

Samenvatting: Native UI Integration

In deze les hebt u geleerd hoe u native Android-weergaven (AndroidView) en iOS-weergaven (UiKitView) in uw Flutter-applicatie kunt insluiten. Deze techniek is van onschatbare waarde voor het integreren van zeer gespecialiseerde of prestatiekritieke platformspecifieke UI-componenten.

Overweeg native UI-integratie wanneer de widgets van Flutter of bestaande plug-ins niet volledig aan uw behoeften voor complexe native UI-functionaliteit kunnen voldoen. Het is een krachtige manier om de mogelijkheden van uw Flutter-app uit te breiden door verbinding te maken met het native platform.

Gratis beginnen

Leer Dart met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 22
Lessen: 88

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Native UI-integratie” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Mobiele ontwikkeling met Flutter, waaronder “Native UI-integratie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.

Wat leer ik in “Native UI-integratie”?

Verken technieken om native platformweergaven in uw Flutter-widgetstructuur in te sluiten voor sterk aangepaste gebruikerservaringen. Je oefent met Mobiele ontwikkeling met Flutter door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Mobiele ontwikkeling met Flutter te beginnen?

Ervaring vooraf is niet nodig. Mobiele ontwikkeling met Flutter op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.

Hoe lang duurt de les “Native UI-integratie”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Mobiele ontwikkeling met Flutter?

Ja. Elke les over Mobiele ontwikkeling met Flutter bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Mobiele ontwikkeling met Flutter