Project structure and resources

Domains: Flutter

Where do I start writing the code?

Start with the main.dart file. It’s autogenerated when you create a Flutter app.

// Dart
void main(){
 print('Hello, this is the main function.');
}

In Flutter, the entry point file is ’projectname’/lib/main.dart and execution starts from the main function.

How are files structured in a Flutter app?

When you create a new Flutter project, it builds the following directory structure. You can customize it later, but this is where you start.

┬
└ projectname
  ┬
  ├ android      - Contains Android-specific files.
  ├ build        - Stores iOS and Android build files.
  ├ ios          - Contains iOS-specific files.
  ├ lib          - Contains externally accessible Dart source files.
    ┬
    └ src        - Contains additional source files.
    └ main.dart  - The Flutter entry point and the start of a new app.
                   This is generated automatically when you create a Flutter
                    project.
                   It's where you start writing your Dart code.
  ├ test         - Contains automated test files.
  └ pubspec.yaml - Contains the metadata for the Flutter app.
                   This is equivalent to the package.json file in React Native.

Where do I put my resources and assets and how do I use them?

A Flutter resource or asset is a file that is bundled and deployed with your app and is accessible at runtime. Flutter apps can include the following asset types:

  • Static data such as JSON files
  • Configuration files
  • Icons and images (JPEG, PNG, GIF, Animated GIF, WebP, Animated WebP, BMP, and WBMP)

Flutter uses the pubspec.yaml file, located at the root of your project, to identify assets required by an app.

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

The assets subsection specifies files that should be included with the app. Each asset is identified by an explicit path relative to the pubspec.yaml file, where the asset file is located. The order in which the assets are declared does not matter. The actual directory used (assets in this case) does not matter. However, while assets can be placed in any app directory, it’s a best practice to place them in the assets directory.

During a build, Flutter places assets into a special archive called the asset bundle, which apps read from at runtime. When an asset’s path is specified in the assets section of pubspec.yaml, the build process looks for any files with the same name in adjacent subdirectories. These files are also included in the asset bundle along with the specified asset. Flutter uses asset variants when choosing resolution-appropriate images for your app.

In React Native, you would add a static image by placing the image file in a source code directory and referencing it.

<Image source={require('./my-icon.png')} />

In Flutter, add a static image to your app using the AssetImage class in a widget’s build method.

image: AssetImage('assets/background.png'),

For more information, see Adding Assets and Images in Flutter.

How do I load images over a network?

In React Native, you would specify the uri in the source prop of the Image component and also provide the size if needed.

In Flutter, use the Image.network constructor to include an image from a URL.

// Flutter
body: Image.network(
          'https://flutter.io/images/owl.jpg',

How do I install packages and package plugins?

Flutter supports using shared packages contributed by other developers to the Flutter and Dart ecosystems. This allows you to quickly build your app without having to develop everything from scratch. Packages that contain platform-specific code are known as package plugins.

In React Native, you would use yarn add {package-name} or npm install --save {package-name} to install packages from the command line.

In Flutter, install a package using the following instructions:

  1. Add the package name and version to the pubspec.yaml dependencies section. The example below shows how to add the google_sign_in Dart package to the pubspec.yaml file. Check your spaces when working in the YAML file because white space matters!
dependencies:
  flutter:
    sdk: flutter
  google_sign_in: ^3.0.3
  1. Install the package from the command line by using flutter pub get. If using an IDE, it often runs flutter pub get for you, or it might prompt you to do so.
  2. Import the package into your app code as shown below:
import 'package:flutter/cupertino.dart';

For more information, see Using Packages and Developing Packages & Plugins.

You can find many packages shared by Flutter developers in the Flutter packages section of pub.dev.

Similar pages

Page structure
Terms

Flutter

Assets

Widget