Set up your project

In the next few lessons, you'll learn how to work with data in a Flutter app. You'll build an app that fetches and displays article summaries from the Wikipedia API.

These lessons explore:

• Making HTTP requests in Flutter.
• Managing application state with ChangeNotifier.
• Using the MVVM architecture pattern.
• Creating responsive user interfaces that update automatically when data changes.

This tutorial assumes you've completed the Getting started with Dart and the Introduction to Flutter UI tutorials, and therefore doesn't explain concepts like HTTP, JSON, or widget basics.

Create a new Flutter project using the Flutter CLI. In your preferred terminal, run the following command to create a minimal Flutter app:

$ flutter create wikipedia_reader --empty

Your app needs two packages to work with HTTP requests and Wikipedia data. Add them to your project:

$ cd wikipedia_reader && flutter pub add http dartpedia

The http package provides tools for making HTTP requests, while the dartpedia package contains data models for working with Wikipedia's API responses.

Open lib/main.dart and replace the existing code with this basic structure, which adds required imports that the app uses:

import 'dart:convert';
import 'dart:io';
​
import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:wikipedia/wikipedia.dart';
​
void main() {
  runApp(const MainApp());
}
​
class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Wikipedia Flutter'),
        ),
        body: const Center(
          child: Text('Loading...'),
        ),
      ),
    );
  }
}

This code provides a basic app structure with a title bar and placeholder content. The imports at the top include everything you need for HTTP requests, JSON parsing, and Wikipedia data models.

Test that everything works by running your app:

$ flutter run -d chrome

You should see a simple app with "Wikipedia Flutter" in the app bar and "Loading..." in the center of the screen.