Uw eerste Flutter-app bouwen
Doorloop het proces van het maken van een eenvoudige Flutter-applicatie met 'Hello World', en leer de projectstructuur en de functie voor hot reload begrijpen.
Uw eerste Flutter-app bouwen is een gratis Mobiele ontwikkeling met Flutter-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider 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.
Je eerste Flutter-app!
Tijd om je eerste Flutter-app te bouwen — een eenvoudige Hello World om de workflow te leren. Je gaat zien waarom Flutter zo snel aanvoelt.
Een nieuw project maken
Voer flutter create uit om een nieuw project op te zetten en ga daarna met cd naar de map. Met één opdracht ben je klaar om te coderen.
flutter create my_first_app
cd my_first_appDe projectstructuur begrijpen
Flutter maakt verschillende mappen aan. De belangrijkste zijn: lib/main.dart (je code), pubspec.yaml (afhankelijkheden) en de platformmappen android/ en ios/.
Het startpunt van de app: main.dart
Elke app begint bij main(). Daarin neemt runApp() je hoofdwidget en koppelt die aan het scherm.
import 'package:flutter/material.dart';
void main() {
runApp(
const Center(
child: Text(
'Launching App...', // Text displayed directly
textDirection: TextDirection.ltr, // Required for root Text widget
style: TextStyle(color: Colors.blue, fontSize: 20),
),
),
);
}Je MyApp-widget bouwen
Wikkel je app in een hoofdwidget, vaak MyApp. Gebruik voor UI die niet verandert een StatelessWidget — die heeft alleen een build-methode nodig die de UI beschrijft.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// This widget will define the app's look and feel
return const Placeholder(); // A temporary visual marker
}
}De basis van MaterialApp en Scaffold
MaterialApp voegt Material Design toe; daarbinnen geeft Scaffold je de basisindeling — bovenaan een AppBar en een body voor de inhoud.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.blue), // Sets primary color
home: Scaffold(
appBar: AppBar(
title: const Text('My First App'), // Text in the app bar
),
body: const Center(
child: Text(
'Hello, CoddyKit!', // Our main content text
style: TextStyle(fontSize: 24),
),
),
),
);
}
}Je nieuwe app uitvoeren
Is je app klaar? Voer hem uit. Start een emulator of simulator, of sluit een apparaat aan, en voer daarna flutter run uit vanuit de hoofdmap van het project.
flutter runMaak kennis met Hot Reload!
Hot Reload voegt codewijzigingen vrijwel direct toe aan een actieve app — zonder volledige herstart en zonder verloren status. Sla je .dart-bestand op om dit te activeren.
Hot Reload in actie
Probeer het zelf: pas de tekst van de AppBar, de body of de themakleur hieronder aan, sla je wijzigingen op en kijk hoe Hot Reload de actieve app direct bijwerkt.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter App',
theme: ThemeData(primarySwatch: Colors.green), // Changed color!
home: Scaffold(
appBar: AppBar(
title: const Text('My Updated App'), // Changed text!
),
body: const Center(
child: Text(
'Hot Reloaded!', // Changed text and size!
style: TextStyle(fontSize: 28, color: Colors.red),
),
),
),
);
}
}Hot Reload versus Hot Restart
Hot Reload voegt code toe en behoudt de status van je app — ideaal voor aanpassingen aan de UI. Hot Restart bouwt alles opnieuw vanaf het begin op en wist de status, voor grotere wijzigingen.
Korte controle: Hot Reload
Je hebt Flutter's hot reload in actie gezien. Laten we controleren of je het begrijpt!
Samenvatting: je eerste Flutter-app
Gefeliciteerd! Je hebt je eerste Flutter-app gebouwd en uitgevoerd — flutter create, de structuur van main.dart, MaterialApp + Scaffold en de kracht van Hot Reload.
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
Veelgestelde vragen
Is de les “Uw eerste Flutter-app bouwen” gratis?
Ja — de volledige tekst van “Uw eerste Flutter-app bouwen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Mobiele ontwikkeling met Flutter wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Mobiele ontwikkeling met Flutter bevat in totaal 4 lessen.
Wat leer ik in “Uw eerste Flutter-app bouwen”?
Doorloop het proces van het maken van een eenvoudige Flutter-applicatie met 'Hello World', en leer de projectstructuur en de functie voor hot reload begrijpen. 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 “Uw eerste Flutter-app bouwen”?
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
- Flutter-ecosysteem en installatie
- Dart-beginselen voor Flutter
- Uw eerste Flutter-app bouwen
- Asynchroon programmeren met Futures en async/await