Skip to main content

Set up your project

Instructions on how to create a new Flutter app.

Preview the Wikipedia reader app you'll build and set up the initial project with required packages.

What you'll accomplish

Preview the Wikipedia reader app you'll build
Add packages for handling HTTP requests and Wikipedia data
Set up the initial project structure

Steps

1

Introduction

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.

A screenshot of the completed Wikipedia reader app showing an article with image, title, description, and extract text.

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.

2

Create a new Flutter project

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
3

Add required dependencies

Your app needs the http package to make HTTP requests. Add it to your project: 

cd wikipedia_reader && flutter pub add http
4

Examine the starter code

First, create a new file lib/summary.dart to define the data model for Wikipedia article summaries. This file has no special logic, and is simply a collection of classes that represent the data returned by the Wikipedia API. Its sufficient to copy the code below into the file and then ignore it. If you aren't comfortable basic Dart classes, you should read the Dart Getting Started tutorial first.

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

lib/main.dart
dart 
import 'dart:convert';
import 'dart:io';
​
import 'package:flutter/material.dart';
import 'package:http/http.dart';
​
import 'summary.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 the Wikipedia data model.

5

Run your app

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.

6

Review

What you accomplished

Here's a summary of what you built and learned in this lesson.
Previewed the Wikipedia reader app

You're starting a new tutorial section focused on working with data. You'll learn HTTP requests, state management with ChangeNotifier, and the MVVM architectural pattern.

Added the http package and created a data model

You used flutter pub add to install the http package for making HTTP requests and created the Summary class for Wikipedia data. Packages let you leverage existing code built by the community instead of building everything from scratch.

Set up the initial project structure

Your app has the basic structure with all necessary imports for HTTP requests, JSON parsing, and Wikipedia data. You're ready to start fetching real data from the Wikipedia API!

7

Test yourself

Project Setup Quiz

1 / 2
What does the `--empty` flag do when running `flutter create`?

  1. Creates a project with no files at all.

    Not quite

    The project still has essential files; it just uses a minimal template.

  2. Creates a minimal Flutter project with less boilerplate code.

    That's right!

    The `--empty` flag generates a minimal starter template without the default counter app.

  3. Creates a project without any dependencies.

    Not quite

    The project still includes core Flutter dependencies.

  4. Creates a project that can only run on web.

    Not quite

    The flag doesn't restrict platforms; it only affects the starter template.

What command is used to add a package dependency to a Flutter project?

  1. `flutter install [package_name]`

    Not quite

    The correct command uses `pub add`, not `install`.

  2. `flutter pub add [package_name]`

    That's right!

    Running `flutter pub add` adds the package to pubspec.yaml and downloads it.

  3. `dart get [package_name]`

    Not quite

    The command for adding packages is `flutter pub add` or editing pubspec.yaml.

  4. `flutter package install [package_name]`

    Not quite

    There is no `flutter package` command; use `flutter pub add`.

Unless stated otherwise, the documentation on this site reflects Flutter 3.38.6. Page last updated on 2026-1-28. View source or report an issue.