3.2    App-Entwicklung

Die folgenden Debugging-Beispielen beziehen sich auf die Flutter-Bibliothek. Damit können Sie Apps für iOS und Android sowie Web-Applikationen erstellen.

Flutter und Null-Safe-Werte

Die mobile App, die wir mit der Flutter-Bibliothek erstellt haben, sollte mehrsprachig werden. Flutter als modernes Toolkit bringt die Werkzeuge dafür natürlich mit, aber wir kamen doch zu einem kleinen Problem. Die Anwendung wollte nicht mehr kompilieren, weil die Übersetzungseinträge nicht Null-Safe sind. Grob gesagt kann der Compiler zur Compilezeit nicht sicherstellen, dass das Übersetzungsobjekt zur Laufzeit auch zur Verfügung steht.

Die ausführlichen Fehlermeldungen des Dart-Compilers geben eigentlich schon den deutlichen Hinweis, was zu tun ist, wir wollten uns das Problem aber auch von der KI lösen lassen:

Prompt: flutter: My app is not compiling after I inserted translations for labels.

ERROR: lib/widgets/team.dart:43:62: Error: Property 'warning'
  cannot be accessed on 'AppLocalizations?' because it is
  potentially null.
  - 'AppLocalizations' is from
  'package:flutter_gen/gen_l10n/app_localizations.dart'
  ('.dart_tool/flutter_gen/gen_l10n/app_localizations.dart').
  Try accessing using ?. instead.
  title: Text(AppLocalizations.of(context).warning),
                                           ^^^^^^^

This error occurs because the AppLocalizations.of(context) call might return null, and Dart’s null safety feature is preventing you from accessing the warning property on a potentially null object. To fix this, you can use the null-aware operator ?. as suggested in the error message. Here’s how you can modify your code:

title: Text(AppLocalizations.of(context)?.warning ?? 'Warning')

Wie schon aus der Fehlermeldung hervorgeht, soll der null-aware operator, also das Fragezeichen, für die AppLocalizations verwendet werden. Die KI geht aber noch einen Schritt weiter und hängt den Ersatz-Text ‘Warning’ an (das doppelte Fragezeichen bietet das Fallback für den Null-Wert in Flutter/Dart). Ohne diese Änderung würde die App nämlich immer noch nicht kompilieren, weil die umgebende Text()-Funktion unbedingt einen String erwartet und eben nicht Null.

Außerdem klärte uns die KI noch kurz über den Hintergrund der Änderungen auf, was wir durchaus hilfreich fanden:

This change does two things:

1. It uses the ?. operator to safely access the warning property only if AppLocalizations.of(context) is not null.

2. It provides a fallback string (‘Warning’ in this case) using the ?? operator in case AppLocalizations.of(context) is null or warning is not available.

Einmal mehr waren wir von den Debugging-Möglichkeiten der KI positiv überrascht.

Layouts in Flutter

Bei der App-Entwicklung mit der Flutter-Bibliothek muss man in der Web-Entwicklung etwas umdenken. Werden Bereiche nicht ganz von Widgets ausgefüllt oder überschreiten sie den vorhandenen Platz, so füllt Flutter die Fläche mit einem schwarz-gelb gestreiften Hintergrund, um auf das Problem hinzuweisen. Das hilft uns zwar, das Problem zu erkennen, aber leider nicht, es zu lösen. Wir wollen sehen, ob uns die KI auch hier aus der Patsche helfen kann:

Abbildung 3.4     Die Flutter-Anzeige für ein fehlerhaftes Layout am unteren Rand

Prompt: flutter: I get a yellow-black striped area at the bottom of my app. The widget I am using looks like this:

return Scaffold(
  drawer: const MyDrawer(),
  body: Column(
    children: <Widget>[
      SizedBox(
        width: MediaQuery.of(context).size.width,
        height: 250,
        child:
            Image.file(File(state.currentEntry.image),
              fit: BoxFit.cover),
      ),
      const TagsWidget(),
      MarkdownPreview(
        entry: state.currentEntry,
        picturePath: state.picturePath,
      ),
    ],
  ),
  appBar: AppBar(
      title: Text(state.currentTrip.title),
      actions: action.getActions(context)),
);

The yellow-black striped area at the bottom of your app typically indicates an overflow error in Flutter. This happens when a widget tries to render content that doesn’t fit within its allocated space. In your case, the issue is likely caused by the Column widget in the Scaffold’s body. …

Claude 3.5 Sonnet erklärt im Folgenden zwei Möglichkeiten, die beide zu dem gewünschten Ergebnis führen. Der erzeugte Code kann ohne Veränderungen ersetzt werden und funktioniert.

Die sehr kurze Erklärung zu den zwei verschiedenen Lösungen (einmal mit einem ListView und einmal mit einem SingleChildScrollView) lässt uns im Unklaren, was die bessere Lösung für unseren Einsatz ist. Wir fragen also nach:

Prompt: What is the difference between a ListView and a SingleChildScrollView?

ListView and SingleChildScrollView are both scrollable widgets in Flutter, but they have some key differences:

1. Child widgets:

   • ListView is designed to efficiently handle a potentially large number of children. It can have multiple child widgets.

   • SingleChildScrollView can only have a single child widget, typically a Column or Row.

2. Lazy loading:

   • ListView supports lazy loading. It only builds the child widgets that are currently visible on the screen, which is more memory-efficient for long lists.

   • SingleChildScrollView builds all its content at once, which can be less efficient for large amounts of content.

…

Es folgen weitere Punkte, die die Unterschiede prägnant beschreiben. Auch hier enttäuscht uns die KI nicht: Schon bei den ersten Punkten wird uns klar, dass für unser zu großes Element die zweite Variante mit dem SingleChildScrollView besser passt.