En forenklet introduktion til Dart og Flutter

Lidt baggrund

Det hele begyndte i 2011: Xamarin, nu et Microsoft-ejet firma, kom med en løsning til hybrid mobile apps gennem sit signaturprodukt, Xamarin SDK med C #. Og dermed begyndte revolutionen inden for hybride mobilapplikationer, nemme at skrive en kodebase til mange platforme.

Ionic opstod i 2013 med sin første udgivelse af Drifty Co. Ionic hjalp webudviklere med at bruge deres eksisterende færdigheder i den voksende mobilappsindustri. I 2015 brugte Facebook React.js til at genopfinde det til udviklere af mobilapps. De gav os React Native, en helt JavaScript-kodebase, der er afhængige af indbyggede SDK'er.

Og disse er ikke de eneste, men et par af mange hybrid mobilrammer. Mere info kan findes her.

Nu kan vi se Googles tur til at lægge fingrene i kagen med Flutter.

Hvad er Dart?

Google havde sin første nogensinde udgivelse af Flutter 1.0 i december efter at have haft den i beta-tilstand i over 18 måneder. Dart er det programmeringssprog, der bruges til at kode Flutter-apps. Dart er et andet produkt fra Google og udgav version 2.1 før Flutter i november. Da det begynder, er Flutter-samfundet ikke så omfattende som ReactNative, Ionic eller Xamarin.

For et stykke tid siden opdagede jeg en smag for JavaScript. Jeg var i ekstase over at arbejde på en ReactNative mobilapp til min praktikophold. Jeg nyder også at kode hybridmobile apps, så jeg ville prøve Flutter, da jeg havde gjort Xamarin engang sidste år.

Ved mit første blik på Flutter (og Dart) følte jeg mig flov og kunne ikke synes at forstå noget. De havde endda et afsnit om deres dokumenter til udviklere, der flyttede fra React Native. Så jeg gik dybere ned på alle ting Dart.

Dart ligner lidt C og er et objektorienteret programmeringssprog. Så hvis du foretrækker C-sprog eller Java, er Dart den for dig, og du vil sandsynligvis være dygtig til det.

Dart bruges ikke kun til udvikling af mobilapps, men er et programmeringssprog. Godkendt som en standard af Ecma (ECMA-408), det bruges til at bygge næsten alt på nettet, servere, desktop og selvfølgelig mobile applikationer (Ja, de samme mennesker, der standardiserede vores favoritter ES5 og ES6.)

Dart, når det bruges i webapplikationer, sendes til JavaScript, så det kører i alle webbrowsere. Dart-installationen leveres også med en VM til at køre .dart-filerne fra en kommandolinjegrænseflade. Dart-filerne, der bruges i Flutter-apps, kompileres og pakkes i en binær fil (.apk eller .ipa) og uploades til appbutikker.

Hvordan ser kodning i Dart ud?

Som de fleste ALGOL-sprog (som C # eller Java):

  1. Indgangsstedet for en Dart-klasse er main()metoden. Denne metode fungerer også som udgangspunkt for Flutter-apps.
  2. Standardværdien for de fleste datatyper er null.
  3. Dartklasser understøtter kun enkelt arv. Der kan kun være en superklasse for en bestemt klasse, men den kan have mange implementeringer af grænseflader.
  4. Strømningskontrol af bestemte udsagn, som hvis betingelser, sløjfer (for, mens og gør-mens), switch-case, bryde og fortsætte udsagn er de samme.
  5. Abstraktion fungerer på en lignende måde og tillader abstrakte klasser og grænseflader.

I modsætning til dem (og nogle gange lidt som JavaScript):

  1. Dart har type inferens. Datatypen for en variabel behøver ikke at blive eksplicit erklæret, da Dart vil "udlede", hvad den er. I Java skal en variabel have sin type eksplicit angivet under erklæringen. For eksempel String something;. Men Dart er nøgleordet i stedet gerne så, var something;. Koden behandler variablen alt efter hvad den indeholder, det være sig et tal, streng, bool eller objekt.
  2. Alle datatyper er objekter inklusive tal. Så hvis de ikke er initialiseret, er deres standardværdi ikke 0, men er i stedet null.
  3. En returtype af en metode er ikke påkrævet i metodesignaturen.
  4. Typen numerklærer ethvert numerisk element, både reelt og heltal.
  5. Den super()metode opkald er kun i slutningen af en underklasse s konstruktør.
  6. Nøgleordet, der blev newbrugt før konstruktøren til oprettelse af objekter, er valgfrit.
  7. Metodesignaturer kan omfatte en standardværdi for de parametre, der er sendt. Så hvis en ikke er inkluderet i metodekaldet, bruger metoden i stedet standardværdierne.
  8. Den har en ny indbygget datatype kaldet Runes, der beskæftiger sig med UTF-32-kodepunkter i en streng. For et simpelt eksempel, se emojis og lignende ikoner.

Og alle disse forskelle er blot nogle få i de mange, som du kan finde i Dart Language-turen, som du kan tjekke her.

Dart har også indbyggede biblioteker installeret i Dart SDK, hvor det mest anvendte er:

  1. dart: kerne til kernefunktionalitet; det importeres i alle dartfiler.
  2. dart: async til asynkron programmering.
  3. dart: matematik til matematiske funktioner og konstanter.
  4. dart: konverter til konvertering mellem forskellige datarepræsentationer, som JSON til UTF-8.

Du kan finde mere information om Dart-biblioteker her.

Brug af Dart i Flutter

Flutter har flere app-specifikke biblioteker, oftere på brugergrænsefladeelementer som:

  1. Widget: almindelige appelementer, som f.eks. Text eller ListView.
  2. Materiale: indeholdende elementer efter materialedesign, som FloatingActionButton.
  3. Cupertino: indeholder elementer, der følger aktuelle iOS-design, som CupertinoButton.

Du kan finde Flutter-specifikke biblioteker her.

Opsætning af Flutter

Så for at få denne ting i gear skal du følge Flutter-dokumenterne. Det giver detaljer om installation af Flutter SDK og opsætning af din foretrukne IDE; min ville være VS-kode. Opsætning af VS-kode med Flutter-udvidelsen er nyttigt. Den leveres med indbyggede kommandoer i modsætning til at bruge terminalen.

Følg dokumenterne igen for at oprette din første app. I mit tilfælde skal du køre udvidelseskommandoen Flutter: New Project. Skriv derefter projektnavnet og vælg destinationsmappen.

Hvis du foretrækker at bruge terminalen, skal du flytte til appens destinationsmappe. Brug derefter kommandoenflutter create me> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

A First Look at the Flutter App

The app currently looks like this now:

Building the user interface of a Flutter app makes use of Widgets.

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

Hot Reloading

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

Altering the current code

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

Creating the Custom Card Component

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it customCard.dart.

import 'package:flutter/material.dart'; class CustomCard extends StatelessWidget { CustomCard({@required this.index}); final index; @override Widget build(BuildContext context) { return Card( child: Column( children: [Text('Card $index')], ) ); } }

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

Displaying a List of Custom Cards

Import the above component to the main.dart like so:

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

body: Center( child: Container( child: ListView.builder( itemCount: _counter, itemBuilder: (context, int index) { return CustomCard( index: ++index, ); }, ) ), ),

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

And that’s a simple example of using Flutter.

In conclusion…

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

Find the code repo, here.

Find the commit for this post, here.