How do I add an Example Project to a Flutter Package?

Question

Is there a way to autogenerate template code for the example map structure in a package?

Most packages have a /example folder within the package root that showcases the package functionality. I'm not sure what's the "best" way to create the example is, or if it even matter.

Do I create all files individually? Do I create a new project and then copy it to the package root? Can I autogenerate an example project directly in the project?

It's my first attempt on creating a package and I want to get it right the first time.

Chris Sprague · Accepted Answer · 2020-08-24T00:48:05.540

40

To create a Flutter package with an Example in Android Studio

Create a new Flutter Project
Select Flutter Package
After the new project opens in Android Studio, select the "Terminal" tab and then run:

flutter create example

Select "Edit Configuration"-> add configuration -> Select the main.dart file that is located in the example/lib folder
Open your example pubspec.yaml and link to the library by adding:

your_package_name: path: ..\

NOTE: When you open the Example folder it will look like an entire Flutter app nested into your project; that's because it is. Just open the io and android folders to see that they share that pattern:

edited Aug 24 '20 at 00:48

answered Aug 20 '20 at 13:04

Chris Sprague

3,158
33
24

2

This is probably the best answer I have seen on stackoverflow. Thank You – ASAD HAMEED Jan 16 '21 at 13:24
This was way better than my own answer. Moved the correct answer to this and hope that the people who's looking for a quick answer finds the old one bellow. – Joel Broström Jun 28 '21 at 11:53
1

Glad to hear that it helped – Chris Sprague Jul 02 '21 at 23:27
Just to complement this, from the cmd line: To create package:`flutter create package [packagname]`. To create example: cd into the package then`flutter create example` – lenz Jul 20 '21 at 01:36

score 19 · Answer 2 · answered Jun 08 '19 at 13:26

19

Create a new project inside the root directory of your project called example and then remove unnecessary files such as CHANGELOG, LICENSE and README as they will be in your package folder.

Here's an example (no pun intended) with a package that I created:

Now in pubspec.yaml you should include your package as dev dependency like this:

dev_dependencies:
  your_package:
    path: ../

I believe you can also use regular dependencies, but this worked for me.

Now inside /lib you can add a main.dart file, import your package and then create an example project.

answered Jun 08 '19 at 13:26

Noodles

3,888
2
20
31

3

Just to clarify, go to your project root folder and run `flutter create example`. Thats it. – Joel Broström Jun 10 '19 at 12:53
@JoelBroström By the way, you could keep the `README` inside the example project, for the Example tab on pub.dev, but otherwise it will just show the code. – Noodles Jun 10 '19 at 13:23
@JoelBroström Please add this as an answer, not a response – Chris Sprague Aug 20 '20 at 12:36
Did as you said. Thanks for bringing it to my attention. – Joel Broström Aug 20 '20 at 14:46

score 16 · Answer 3 · answered Aug 20 '20 at 14:45

16

Go to your project root folder and run flutter create example.
Thats it.

answered Aug 20 '20 at 14:45

Joel Broström

3,530
1
34
61

score 7 · Answer 4 · edited Oct 25 '21 at 08:36

Use the built-in flutter command-line tool in the root directory of the project to do all the work:

/e/projects/myproject # flutter create example

which has this output:

Creating project example... androidx: true
  example\.gitignore (created)
  example\.idea\libraries\Dart_SDK.xml (created)
  example\.idea\libraries\Flutter_for_Android.xml (created)
  example\.idea\libraries\KotlinJavaRuntime.xml (created)
  example\.idea\modules.xml (created)
  example\.idea\runConfigurations\main_dart.xml (created)
  example\.idea\workspace.xml (created)
  example\.metadata (created)
  example\android\app\build.gradle (created)
  example\android\app\src\main\kotlin\com\example\example\MainActivity.kt (created)
  example\android\build.gradle (created)
  example\android\example_android.iml (created)
  example\android\.gitignore (created)
  example\android\app\src\debug\AndroidManifest.xml (created)
  example\android\app\src\main\AndroidManifest.xml (created)
  example\android\app\src\main\res\drawable\launch_background.xml (created)
  example\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png (created)
  example\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png (created)
  example\android\app\src\main\res\values\styles.xml (created)
  example\android\app\src\profile\AndroidManifest.xml (created)
  example\android\gradle\wrapper\gradle-wrapper.properties (created)
  example\android\gradle.properties (created)
  example\android\settings.gradle (created)
  example\ios\Runner\AppDelegate.swift (created)
  example\ios\Runner\Runner-Bridging-Header.h (created)
  example\ios\Runner.xcodeproj\project.pbxproj (created)
  example\ios\Runner.xcodeproj\xcshareddata\xcschemes\Runner.xcscheme (created)
  example\ios\.gitignore (created)
  example\ios\Flutter\AppFrameworkInfo.plist (created)
  example\ios\Flutter\Debug.xcconfig (created)
  example\ios\Flutter\Release.xcconfig (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Contents.json (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-1024x1024@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-20x20@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-29x29@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-40x40@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-60x60@3x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@1x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-76x76@2x.png (created)
  example\ios\Runner\Assets.xcassets\AppIcon.appiconset\Icon-App-83.5x83.5@2x.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\Contents.json (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@2x.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\LaunchImage@3x.png (created)
  example\ios\Runner\Assets.xcassets\LaunchImage.imageset\README.md (created)
  example\ios\Runner\Base.lproj\LaunchScreen.storyboard (created)
  example\ios\Runner\Base.lproj\Main.storyboard (created)
  example\ios\Runner\Info.plist (created)
  example\ios\Runner.xcodeproj\project.xcworkspace\contents.xcworkspacedata (created)
  example\ios\Runner.xcworkspace\contents.xcworkspacedata (created)
  example\lib\main.dart (created)
  example\example.iml (created)
  example\pubspec.yaml (created)
  example\README.md (created)
  example\test\widget_test.dart (created)
Running "flutter pub get" in example...                             3.0s
Wrote 68 files.

All done!
[√] Flutter: is fully installed. (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 6.1.7601], locale en-US)
[√] Android toolchain - develop for Android devices: is fully installed. (Android SDK version 29.0.2)
[√] Android Studio: is fully installed. (version 3.5)
[√] Connected device: is fully installed. (2 available)

In order to run your application, type:

  $ cd example
  $ flutter run

Your application code is in example\lib\main.dart.

If using Android Studio 3.5.2, run the default example for assurance:

Add a new configuration for the example main.dart by selecting Edit Configurations... from the Flutter drop-down on the toolbar.
Select the Flutter directory on the left of the Run/Debug Configurations dialog and press the + button.
Select Flutter
Browse for main.dart in the new example/lib directory by clicking the file folder in the Dart entrypoint: dialog.
Click the triangle run button on the toolbar.

I just performed these steps for my own project and it worked perfectly.

Then, to customize for your project, edit the example's pubspec.yaml file and add a dependency to your project:

dependencies:
  my_project:
    path: ../

score 0 · Answer 5 · answered Jan 31 '23 at 07:03

In my case , I had forgot to add the example file . I added this in this way. You can check at my pub.dev location_provider package.

1)Create a directory/package inside you package . Name of package/directory must be "example". For more info check this.

2)Open command Terminal and move inside the example package using

cd example

3)Create Flutter project inside it using command

Flutter create

4)You will see the lib/main.dart file inside it. Add your example in this file.

5)After adding , push latest code to the github.

6)Increase the version of your package inside pubspec.yaml file and CHELLAGELOG.md file . After that, run these command to publish the package to pub.dev.

Flutter publish --dry-run
Flutter publish

After that you will see ,example Tab in pub.dev

How do I add an Example Project to a Flutter Package?

5 Answers5